85d7932e45
refs https://github.com/TryGhost/Team/issues/559
refs 054a5f15f5
- with the update of `ember-promise-modals` we started to get deprecation warnings when using `modals.open('modal-component-name')`
- upcoming Ember build updates will introduce tree shaking but using run-time lookup of modal components by name works against that because it's not statically analysable
- switched to importing components and passing the component class directly, eg. `modals.open(ModalComponent)`
- standardized modal component class names with a `MyModal` style to get better behaviour in code editors when it auto generates imports
- dropped the modal defaults from the modals service because we can now use a static `modalOptions` property on the modal components themselves when we want to override the defaults
53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import InstallThemeModal from './install-theme';
|
|
import {action} from '@ember/object';
|
|
import {inject as service} from '@ember/service';
|
|
import {tracked} from '@glimmer/tracking';
|
|
|
|
export default class ViewThemeModal extends Component {
|
|
@service modals;
|
|
@service router;
|
|
|
|
static modalOptions = {
|
|
className: 'fullscreen-modal-total-overlay',
|
|
omitBackdrop: true
|
|
};
|
|
|
|
@tracked previewSize = 'desktop';
|
|
|
|
get isDesktopPreview() {
|
|
return this.previewSize === 'desktop';
|
|
}
|
|
|
|
get isMobilePreview() {
|
|
return this.previewSize === 'mobile';
|
|
}
|
|
|
|
willDestroy() {
|
|
super.willDestroy(...arguments);
|
|
|
|
// leave install modal visiible if it's in the success state because
|
|
// we're switching over to the design customisation screen in the bg
|
|
// and don't want to auto-close when this modal closes
|
|
if (this.installModal && !this.showingSuccessModal) {
|
|
this.installModal.close();
|
|
}
|
|
}
|
|
|
|
@action
|
|
installTheme() {
|
|
this.installModal = this.modals.open(InstallThemeModal, {
|
|
theme: this.args.data.theme,
|
|
onSuccess: () => {
|
|
this.showingSuccessModal = true;
|
|
this.router.transitionTo('settings.design');
|
|
}
|
|
});
|
|
}
|
|
|
|
@action
|
|
setPreviewSize(size) {
|
|
this.previewSize = size;
|
|
}
|
|
}
|