diff --git a/studio/src/app/components/core/app-dashboard-deck-actions/app-dashboard-deck-actions.tsx b/studio/src/app/components/core/app-dashboard-deck-actions/app-dashboard-deck-actions.tsx index dc2257c12..ee3ee4a08 100644 --- a/studio/src/app/components/core/app-dashboard-deck-actions/app-dashboard-deck-actions.tsx +++ b/studio/src/app/components/core/app-dashboard-deck-actions/app-dashboard-deck-actions.tsx @@ -5,7 +5,7 @@ import {loadingController, popoverController} from '@ionic/core'; import {Deck} from '@deckdeckgo/editor'; -import store from '../../../stores/error.store'; +import errorStore from '../../../stores/error.store'; import i18n from '../../../stores/i18n.store'; import {clone} from '../../../utils/core/dashboard.utils'; @@ -19,7 +19,11 @@ import {AppIcon} from '../../core/app-icon/app-icon'; styleUrl: 'app-dashboard-deck-actions.scss' }) export class AppDashboardDeckActions { - @Prop() deck: Deck; + @Prop() + deck: Deck; + + @Prop() + disableDelete: boolean; @Event() deckDeleted: EventEmitter; @Event() deckCloned: EventEmitter; @@ -71,7 +75,7 @@ export class AppDashboardDeckActions { this.deckDeleted.emit(this.deck.id); } catch (err) { - store.state.error = err; + errorStore.state.error = err; } await loading.dismiss(); @@ -100,7 +104,7 @@ export class AppDashboardDeckActions { this.deckCloned.emit(); } catch (err) { - store.state.error = err; + errorStore.state.error = err; } await loading.dismiss(); @@ -111,19 +115,14 @@ export class AppDashboardDeckActions { render() { return ( - diff --git a/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx b/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx index ecb5498f0..c4a3ae69e 100644 --- a/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx +++ b/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx @@ -140,13 +140,18 @@ export class AppNavigationActions { return ( - - ); diff --git a/studio/src/app/components/core/app-signin/app-signin.tsx b/studio/src/app/components/core/app-signin/app-signin.tsx index a26d2e537..82ba2aabe 100644 --- a/studio/src/app/components/core/app-signin/app-signin.tsx +++ b/studio/src/app/components/core/app-signin/app-signin.tsx @@ -14,6 +14,7 @@ import {EnvironmentCloud, EnvironmentDeckDeckGoConfig} from '../../../types/core import {renderI18n} from '../../../utils/core/i18n.utils'; import {firebase, cloud} from '../../../utils/core/environment.utils'; +import {removeSyncBeforeUnload} from '../../../utils/core/sync.window.utils'; @Component({ tag: 'app-signin', @@ -34,6 +35,9 @@ export class AppSignIn { await this.loadSignIn(); await this.initSignIn(); + + // We do not want to present a warning when user sign in + removeSyncBeforeUnload(); } private onSignInSuccess = (credentials: {uid: string | undefined; githubAccessToken: string | undefined} | undefined) => { diff --git a/studio/src/app/pages/core/app-decks/app-decks.scss b/studio/src/app/pages/core/app-decks/app-decks.scss index 20160ddfd..3807538f7 100644 --- a/studio/src/app/pages/core/app-decks/app-decks.scss +++ b/studio/src/app/pages/core/app-decks/app-decks.scss @@ -31,8 +31,6 @@ app-decks { } article { - cursor: pointer; - visibility: visible; opacity: 1; diff --git a/studio/src/app/pages/core/app-decks/app-decks.tsx b/studio/src/app/pages/core/app-decks/app-decks.tsx index 355347679..c97169cec 100644 --- a/studio/src/app/pages/core/app-decks/app-decks.tsx +++ b/studio/src/app/pages/core/app-decks/app-decks.tsx @@ -19,6 +19,8 @@ import {ParseDeckSlotsUtils} from '../../../utils/editor/parse-deck-slots.utils' import {ParseSlidesUtils} from '../../../utils/editor/parse-slides.utils'; import {TemplateUtils} from '../../../utils/editor/template.utils'; import {loadAndImport} from '../../../utils/core/dashboard.utils'; +import {getEdit} from '../../../utils/editor/editor.utils'; +import {removeSyncBeforeUnload} from '../../../utils/core/sync.window.utils'; import {decks} from '../../../providers/data/deck/deck.provider'; import {getSlide} from '../../../providers/data/slide/slide.provider'; @@ -50,6 +52,9 @@ export class AppDecks implements ComponentInterface { @State() private decksLoading: boolean = true; + @State() + private currentDeckId: string | undefined; + private readonly debounceLoading: () => void; private readonly debounceDecksLoading: () => void; @@ -77,6 +82,8 @@ export class AppDecks implements ComponentInterface { }); await this.initDashboard(); + + this.currentDeckId = await getEdit(); } private async initDashboard() { @@ -223,6 +230,9 @@ export class AppDecks implements ComponentInterface { } private navigateReloadEditor() { + // We are aware a sync is going to happen and we are navigating programmatically + removeSyncBeforeUnload(); + navStore.state.nav = { url: '/', direction: NavDirection.RELOAD @@ -367,8 +377,10 @@ export class AppDecks implements ComponentInterface { } return ( -
this.navigateDeck(deck)}> - {this.renderDeck(deck)} +
+ this.navigateDeck(deck)}> + {this.renderDeck(deck)} + {this.renderAside(deck)}
@@ -384,6 +396,7 @@ export class AppDecks implements ComponentInterface { this.removeDeletedDeck($event)} onDeckCloned={() => this.navigateReloadEditor()}> diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx index 760b6a279..1b9ce3320 100644 --- a/studio/src/app/pages/editor/app-editor/app-editor.tsx +++ b/studio/src/app/pages/editor/app-editor/app-editor.tsx @@ -20,6 +20,9 @@ import {SlideTemplate, SyncEvent} from '@deckdeckgo/editor'; import {CreateSlidesUtils} from '../../../utils/editor/create-slides.utils'; import {ParseDeckSlotsUtils} from '../../../utils/editor/parse-deck-slots.utils'; +import {getEdit} from '../../../utils/editor/editor.utils'; +import {signIn as navigateSignIn} from '../../../utils/core/signin.utils'; +import {SlideUtils} from '../../../utils/editor/slide.utils'; import {DeckEvents} from '../../../events/editor/deck/deck.events'; import {RemoteEvents} from '../../../events/editor/remote/remote.events'; @@ -32,13 +35,10 @@ import {SlideHelper} from '../../../helpers/editor/slide.helper'; import {SlotType} from '../../../types/editor/slot-type'; -import {signIn as navigateSignIn} from '../../../utils/core/signin.utils'; -import {SlideUtils} from '../../../utils/editor/slide.utils'; - import {EnvironmentConfigService} from '../../../services/environment/environment-config.service'; import {FontsService} from '../../../services/editor/fonts/fonts.service'; -import {sync} from '../../../providers/sync/sync.provider'; +import {initSyncState, sync} from '../../../providers/sync/sync.provider'; import {EnvironmentGoogleConfig} from '../../../types/core/environment-config'; @@ -158,6 +158,8 @@ export class AppEditor { await sync(data.data); }; + + await initSyncState(); } @Listen('reloadDeck', {target: 'document'}) @@ -175,7 +177,7 @@ export class AppEditor { } private async initOrFetch() { - const deckId: string | undefined = await get('deckdeckgo_deck_id'); + const deckId: string | undefined = await getEdit(); if (!deckId) { await this.initSlide(); diff --git a/studio/src/app/stores/sync.store.ts b/studio/src/app/stores/sync.store.ts index de4f8b638..350778dbb 100644 --- a/studio/src/app/stores/sync.store.ts +++ b/studio/src/app/stores/sync.store.ts @@ -2,6 +2,8 @@ import {createStore} from '@stencil/store'; import {SyncState} from '@deckdeckgo/editor'; +import {syncBeforeUnload} from '../utils/core/sync.window.utils'; + interface SyncStore { sync: SyncState; } @@ -10,22 +12,6 @@ const {state, onChange} = createStore({ sync: 'idle' }); -const onBeforeUnload = ($event: BeforeUnloadEvent) => { - if (window.location.pathname === '/signin') { - // We do not want to present a warning when user sign in - return; - } - - $event.preventDefault(); - return ($event.returnValue = 'Are you sure you want to exit?'); -}; - -onChange('sync', (sync: SyncState) => { - if (['pending', 'in_progress'].includes(sync)) { - window.addEventListener('beforeunload', onBeforeUnload, {capture: true}); - } else { - window.removeEventListener('beforeunload', onBeforeUnload, {capture: true}); - } -}); +onChange('sync', (sync: SyncState) => syncBeforeUnload(sync)); export default {state, onChange}; diff --git a/studio/src/app/utils/core/sync.window.utils.ts b/studio/src/app/utils/core/sync.window.utils.ts new file mode 100644 index 000000000..d597230fe --- /dev/null +++ b/studio/src/app/utils/core/sync.window.utils.ts @@ -0,0 +1,22 @@ +import {SyncState} from '@deckdeckgo/editor'; + +const onBeforeUnload = ($event: BeforeUnloadEvent) => { + $event.preventDefault(); + return ($event.returnValue = 'Are you sure you want to exit?'); +}; + +const addSyncBeforeUnload = () => { + window.addEventListener('beforeunload', onBeforeUnload, {capture: true}); +}; + +export const removeSyncBeforeUnload = () => { + window.removeEventListener('beforeunload', onBeforeUnload, {capture: true}); +}; + +export const syncBeforeUnload = (sync: SyncState) => { + if (['pending', 'in_progress'].includes(sync)) { + addSyncBeforeUnload(); + } else { + removeSyncBeforeUnload(); + } +}; diff --git a/studio/src/app/utils/editor/editor.utils.ts b/studio/src/app/utils/editor/editor.utils.ts index 3ffec6ac0..97e9a90c3 100644 --- a/studio/src/app/utils/editor/editor.utils.ts +++ b/studio/src/app/utils/editor/editor.utils.ts @@ -1,9 +1,11 @@ -import {del} from 'idb-keyval'; +import {del, get} from 'idb-keyval'; import {clearSync} from '../../providers/sync/sync.provider'; import {ImageHistoryService} from '../../services/editor/image-history/image-history.service'; +export const getEdit = (): Promise => get('deckdeckgo_deck_id'); + export const clearEdit = async (clearSyncData: boolean) => { if (clearSyncData) { await clearSync(); diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index 13dc5fb80..d9375ef95 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -133,6 +133,7 @@ export namespace Components { } interface AppDashboardDeckActions { "deck": Deck; + "disableDelete": boolean; } interface AppDeckFonts { "deckElement": HTMLElement; @@ -1409,6 +1410,7 @@ declare namespace LocalJSX { } interface AppDashboardDeckActions { "deck"?: Deck; + "disableDelete"?: boolean; "onDeckCloned"?: (event: CustomEvent) => void; "onDeckDeleted"?: (event: CustomEvent) => void; } diff --git a/studio/src/global/theme/mixins/_dashboard.scss b/studio/src/global/theme/mixins/_dashboard.scss index f5b1cb3e6..d49e37c85 100644 --- a/studio/src/global/theme/mixins/_dashboard.scss +++ b/studio/src/global/theme/mixins/_dashboard.scss @@ -32,11 +32,11 @@ color: var(--ion-color-dark); } - &.disabled { + &[disabled] { border: 1px solid var(--ion-color-light); ion-icon { - color: var(--ion-color-light); + color: rgba(var(--ion-color-dark-rgb), 0.2); } } }