From 00510820a2794efcadbc83f7f8b54318fe198ecb Mon Sep 17 00:00:00 2001 From: Zéro~Informatique Date: Tue, 26 Jul 2022 08:44:34 +0200 Subject: viewer: migrate to vue 3, general refactoring and cleanup Non-exhaustive list of fixes and improvements done at the same time: - html default background to grey (avoids white flash during init) - unified links behavior - added more theme variables - removed the flex-expand transition (it wasn't working) and replaced it with a slide - fixed LdLoading not centered on the content - title on removable tags - fixed an issue with encoded URI from vue-router - unified Item resource URLs - removed the iframe for PlainTextViewer (it wasn't working properly) and replaced it with a pre - fixed clear and search buttons tabindex - fixed the information panel bumping up during the fade animation of tag's dropdown - fixed some focus outlines not appearing correctly - moved CSS variables to the :root context - Code cleaning GitHub: closes #217 GitHub: closes #300 GitHub: closes #297 GitHub: closes #105 GitHub: closes #267 GitHub: closes #275 GitHub: closes #228 GitHub: closes #215 GitHub: closes #112 --- viewer/src/@types/ItemType.ts | 29 --- viewer/src/@types/Operation.ts | 24 --- viewer/src/@types/gallery.d.ts | 125 ------------- viewer/src/@types/gallery.ts | 129 +++++++++++++ viewer/src/@types/itemType.ts | 29 +++ viewer/src/@types/operation.ts | 24 +++ viewer/src/@types/scrollposition.d.ts | 20 -- viewer/src/@types/splashscreen.d.ts | 25 --- viewer/src/@types/splashscreen.ts | 25 +++ viewer/src/@types/tag.d.ts | 41 ---- viewer/src/@types/tag.ts | 42 +++++ viewer/src/@types/v-lazy-image.d.ts | 20 -- viewer/src/@types/vue-dragscroll.d.ts | 20 -- viewer/src/assets/scss/_buefy_variables.scss | 171 ----------------- viewer/src/assets/scss/buefy.scss | 47 ----- viewer/src/assets/scss/constants.scss | 53 ++++++ viewer/src/assets/scss/global.scss | 53 +++--- viewer/src/assets/scss/palette.scss | 31 --- viewer/src/assets/scss/scrollbar.scss | 2 +- viewer/src/assets/scss/theme.scss | 42 ++--- viewer/src/assets/scss/transition.scss | 40 +++- viewer/src/components/LdBreadcrumb.vue | 129 ------------- viewer/src/components/LdCommand.vue | 98 ---------- viewer/src/components/LdCommandSearch.vue | 56 ------ viewer/src/components/LdCommandSort.vue | 60 ------ viewer/src/components/LdError.vue | 58 ------ viewer/src/components/LdGallery.vue | 59 ------ viewer/src/components/LdInformation.vue | 84 --------- viewer/src/components/LdInput.vue | 60 ++++++ viewer/src/components/LdKeyPress.vue | 49 ----- viewer/src/components/LdLink.vue | 75 ++++++++ viewer/src/components/LdLoading.vue | 51 +++++ viewer/src/components/LdNotice.vue | 57 ++++++ viewer/src/components/LdProposition.vue | 186 ------------------ viewer/src/components/LdTagInput.vue | 96 ---------- viewer/src/components/LdThumbnail.vue | 91 --------- viewer/src/components/LdTitle.vue | 47 ----- viewer/src/components/async/AsyncLdMarkdown.vue | 125 +++++++++++++ viewer/src/components/async/Markdown.vue | 123 ------------ viewer/src/components/async/index.ts | 24 ++- viewer/src/components/index.ts | 44 ----- .../src/components/item_handlers/LdAudioViewer.vue | 56 ------ .../components/item_handlers/LdDirectoryViewer.vue | 41 ---- .../components/item_handlers/LdDownloadViewer.vue | 58 ------ .../components/item_handlers/LdMarkdownViewer.vue | 76 -------- .../src/components/item_handlers/LdPdfViewer.vue | 44 ----- .../components/item_handlers/LdPictureViewer.vue | 128 ------------- .../components/item_handlers/LdPlainTextViewer.vue | 56 ------ .../src/components/item_handlers/LdVideoViewer.vue | 46 ----- viewer/src/locales/en.json | 26 --- viewer/src/locales/en.yml | 44 +++++ viewer/src/main.ts | 65 +++---- viewer/src/plugins/asyncLib.ts | 3 + viewer/src/plugins/buefy.ts | 48 ----- viewer/src/plugins/devServer.js | 53 ++++++ viewer/src/plugins/dragscroll.ts | 23 --- viewer/src/plugins/fontawesome-icons.ts | 45 ----- viewer/src/plugins/fontawesome.ts | 31 --- viewer/src/plugins/i18n.ts | 19 +- viewer/src/plugins/index.ts | 8 - viewer/src/plugins/lazyimage.ts | 23 --- viewer/src/plugins/router.ts | 22 +-- viewer/src/services/api/ldFetch.ts | 35 ++++ viewer/src/services/dragscrollclickfix.ts | 51 ----- viewer/src/services/fetchWithCheck.ts | 7 - viewer/src/services/indexFactory.ts | 163 ++++++++++++++++ viewer/src/services/indexSearch.ts | 74 ++++++++ viewer/src/services/indexfactory.ts | 157 ---------------- viewer/src/services/indexsearch.ts | 70 ------- viewer/src/services/itemComparator.ts | 93 +++++++++ viewer/src/services/itemComparators.ts | 74 -------- viewer/src/services/itemGuards.ts | 11 ++ viewer/src/services/ldzoom.ts | 135 ------------- viewer/src/services/navigation.ts | 90 +++++---- viewer/src/services/ui/ldFullscreen.ts | 41 ++++ viewer/src/services/ui/ldItemResourceUrl.ts | 15 ++ viewer/src/services/ui/ldKeepFocus.ts | 34 ++++ viewer/src/services/ui/ldKeyboard.ts | 28 +++ viewer/src/services/ui/ldSaveScroll.ts | 37 ++++ viewer/src/services/ui/ldTitle.ts | 34 ++++ viewer/src/services/ui/ldZoom.ts | 128 +++++++++++++ viewer/src/shims-tsx.d.ts | 13 -- viewer/src/shims-vue.d.ts | 10 +- viewer/src/store/galleryStore.ts | 201 ++++++++------------ viewer/src/store/index.ts | 46 ----- viewer/src/store/uiStore.ts | 116 +++++------- viewer/src/views/GalleryNavigation.vue | 106 ++++++----- viewer/src/views/GallerySearch.vue | 60 +++--- viewer/src/views/GalleryTiles.vue | 70 +++++++ viewer/src/views/ItemThumbnail.vue | 99 ++++++++++ viewer/src/views/MainLayout.vue | 173 +++++++---------- viewer/src/views/PanelLeft.vue | 120 ------------ viewer/src/views/PanelTop.vue | 32 ---- viewer/src/views/SplashScreen.vue | 106 ++++++----- viewer/src/views/item_handlers/AudioViewer.vue | 65 +++++++ viewer/src/views/item_handlers/DirectoryViewer.vue | 42 +++++ viewer/src/views/item_handlers/DownloadViewer.vue | 66 +++++++ viewer/src/views/item_handlers/MarkdownViewer.vue | 50 +++++ viewer/src/views/item_handlers/PdfViewer.vue | 48 +++++ viewer/src/views/item_handlers/PictureViewer.vue | 129 +++++++++++++ viewer/src/views/item_handlers/PlainTextViewer.vue | 69 +++++++ viewer/src/views/item_handlers/VideoViewer.vue | 47 +++++ .../src/views/layout/left/LayoutCommandSearch.vue | 64 +++++++ viewer/src/views/layout/left/LayoutInformation.vue | 99 ++++++++++ viewer/src/views/layout/left/LayoutLeft.vue | 158 ++++++++++++++++ viewer/src/views/layout/left/LayoutProposition.vue | 208 +++++++++++++++++++++ viewer/src/views/layout/left/LayoutTagInput.vue | 164 ++++++++++++++++ viewer/src/views/layout/left/LayoutTagList.vue | 74 ++++++++ viewer/src/views/layout/top/LayoutBreadcrumb.vue | 130 +++++++++++++ viewer/src/views/layout/top/LayoutCommand.vue | 127 +++++++++++++ viewer/src/views/layout/top/LayoutCommandSort.vue | 117 ++++++++++++ viewer/src/views/layout/top/LayoutTop.vue | 38 ++++ 112 files changed, 3851 insertions(+), 3752 deletions(-) delete mode 100644 viewer/src/@types/ItemType.ts delete mode 100644 viewer/src/@types/Operation.ts delete mode 100644 viewer/src/@types/gallery.d.ts create mode 100644 viewer/src/@types/gallery.ts create mode 100644 viewer/src/@types/itemType.ts create mode 100644 viewer/src/@types/operation.ts delete mode 100644 viewer/src/@types/scrollposition.d.ts delete mode 100644 viewer/src/@types/splashscreen.d.ts create mode 100644 viewer/src/@types/splashscreen.ts delete mode 100644 viewer/src/@types/tag.d.ts create mode 100644 viewer/src/@types/tag.ts delete mode 100644 viewer/src/@types/v-lazy-image.d.ts delete mode 100644 viewer/src/@types/vue-dragscroll.d.ts delete mode 100644 viewer/src/assets/scss/_buefy_variables.scss delete mode 100644 viewer/src/assets/scss/buefy.scss create mode 100644 viewer/src/assets/scss/constants.scss delete mode 100644 viewer/src/assets/scss/palette.scss delete mode 100644 viewer/src/components/LdBreadcrumb.vue delete mode 100644 viewer/src/components/LdCommand.vue delete mode 100644 viewer/src/components/LdCommandSearch.vue delete mode 100644 viewer/src/components/LdCommandSort.vue delete mode 100644 viewer/src/components/LdError.vue delete mode 100644 viewer/src/components/LdGallery.vue delete mode 100644 viewer/src/components/LdInformation.vue create mode 100644 viewer/src/components/LdInput.vue delete mode 100644 viewer/src/components/LdKeyPress.vue create mode 100644 viewer/src/components/LdLink.vue create mode 100644 viewer/src/components/LdLoading.vue create mode 100644 viewer/src/components/LdNotice.vue delete mode 100644 viewer/src/components/LdProposition.vue delete mode 100644 viewer/src/components/LdTagInput.vue delete mode 100644 viewer/src/components/LdThumbnail.vue delete mode 100644 viewer/src/components/LdTitle.vue create mode 100644 viewer/src/components/async/AsyncLdMarkdown.vue delete mode 100644 viewer/src/components/async/Markdown.vue delete mode 100644 viewer/src/components/index.ts delete mode 100644 viewer/src/components/item_handlers/LdAudioViewer.vue delete mode 100644 viewer/src/components/item_handlers/LdDirectoryViewer.vue delete mode 100644 viewer/src/components/item_handlers/LdDownloadViewer.vue delete mode 100644 viewer/src/components/item_handlers/LdMarkdownViewer.vue delete mode 100644 viewer/src/components/item_handlers/LdPdfViewer.vue delete mode 100644 viewer/src/components/item_handlers/LdPictureViewer.vue delete mode 100644 viewer/src/components/item_handlers/LdPlainTextViewer.vue delete mode 100644 viewer/src/components/item_handlers/LdVideoViewer.vue delete mode 100644 viewer/src/locales/en.json create mode 100644 viewer/src/locales/en.yml create mode 100644 viewer/src/plugins/asyncLib.ts delete mode 100644 viewer/src/plugins/buefy.ts create mode 100644 viewer/src/plugins/devServer.js delete mode 100644 viewer/src/plugins/dragscroll.ts delete mode 100644 viewer/src/plugins/fontawesome-icons.ts delete mode 100644 viewer/src/plugins/fontawesome.ts delete mode 100644 viewer/src/plugins/index.ts delete mode 100644 viewer/src/plugins/lazyimage.ts create mode 100644 viewer/src/services/api/ldFetch.ts delete mode 100644 viewer/src/services/dragscrollclickfix.ts delete mode 100644 viewer/src/services/fetchWithCheck.ts create mode 100644 viewer/src/services/indexFactory.ts create mode 100644 viewer/src/services/indexSearch.ts delete mode 100644 viewer/src/services/indexfactory.ts delete mode 100644 viewer/src/services/indexsearch.ts create mode 100644 viewer/src/services/itemComparator.ts delete mode 100644 viewer/src/services/itemComparators.ts create mode 100644 viewer/src/services/itemGuards.ts delete mode 100644 viewer/src/services/ldzoom.ts create mode 100644 viewer/src/services/ui/ldFullscreen.ts create mode 100644 viewer/src/services/ui/ldItemResourceUrl.ts create mode 100644 viewer/src/services/ui/ldKeepFocus.ts create mode 100644 viewer/src/services/ui/ldKeyboard.ts create mode 100644 viewer/src/services/ui/ldSaveScroll.ts create mode 100644 viewer/src/services/ui/ldTitle.ts create mode 100644 viewer/src/services/ui/ldZoom.ts delete mode 100644 viewer/src/shims-tsx.d.ts delete mode 100644 viewer/src/store/index.ts create mode 100644 viewer/src/views/GalleryTiles.vue create mode 100644 viewer/src/views/ItemThumbnail.vue delete mode 100644 viewer/src/views/PanelLeft.vue delete mode 100644 viewer/src/views/PanelTop.vue create mode 100644 viewer/src/views/item_handlers/AudioViewer.vue create mode 100644 viewer/src/views/item_handlers/DirectoryViewer.vue create mode 100644 viewer/src/views/item_handlers/DownloadViewer.vue create mode 100644 viewer/src/views/item_handlers/MarkdownViewer.vue create mode 100644 viewer/src/views/item_handlers/PdfViewer.vue create mode 100644 viewer/src/views/item_handlers/PictureViewer.vue create mode 100644 viewer/src/views/item_handlers/PlainTextViewer.vue create mode 100644 viewer/src/views/item_handlers/VideoViewer.vue create mode 100644 viewer/src/views/layout/left/LayoutCommandSearch.vue create mode 100644 viewer/src/views/layout/left/LayoutInformation.vue create mode 100644 viewer/src/views/layout/left/LayoutLeft.vue create mode 100644 viewer/src/views/layout/left/LayoutProposition.vue create mode 100644 viewer/src/views/layout/left/LayoutTagInput.vue create mode 100644 viewer/src/views/layout/left/LayoutTagList.vue create mode 100644 viewer/src/views/layout/top/LayoutBreadcrumb.vue create mode 100644 viewer/src/views/layout/top/LayoutCommand.vue create mode 100644 viewer/src/views/layout/top/LayoutCommandSort.vue create mode 100644 viewer/src/views/layout/top/LayoutTop.vue (limited to 'viewer/src') diff --git a/viewer/src/@types/ItemType.ts b/viewer/src/@types/ItemType.ts deleted file mode 100644 index 5ef38d8..0000000 --- a/viewer/src/@types/ItemType.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2021 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -export enum ItemType { - OTHER = "other", - PICTURE = "picture", - PLAINTEXT = "plaintext", - MARKDOWN = "markdown", - PDF = "pdf", - VIDEO = "video", - AUDIO = "audio", - DIRECTORY = "directory", -} diff --git a/viewer/src/@types/Operation.ts b/viewer/src/@types/Operation.ts deleted file mode 100644 index e566f4b..0000000 --- a/viewer/src/@types/Operation.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -export enum Operation { - INTERSECTION = "", - ADDITION = "+", - SUBSTRACTION = "-", -} diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts deleted file mode 100644 index 0b4cfc4..0000000 --- a/viewer/src/@types/gallery.d.ts +++ /dev/null @@ -1,125 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -import { ItemType } from "./ItemType"; -import { SplashScreenConfig } from "./splashscreen"; - -export type ItemSortStr = "title_asc" | "date_asc" | "date_desc"; - -export interface Config { - galleryRoot: string; - galleryIndex?: string; - initialItemSort?: ItemSortStr; - initialTagDisplayLimit?: number; - splashScreen?: SplashScreenConfig; -} - -export interface Properties { - galleryTitle: string; - tagCategories: RawTag[]; -} -export interface Index { - properties: Properties; - tree: DirectoryItem; -} - -export interface OtherItem extends Item { - properties: OtherProperties; -} -export interface PictureItem extends Item { - properties: PictureProperties; -} -export interface PlainTextItem extends Item { - properties: PlainTextProperties; -} -export interface MarkdownItem extends Item { - properties: MarkdownProperties; -} -export interface PDFItem extends Item { - properties: PDFProperties; -} -export interface VideoItem extends Item { - properties: VideoProperties; -} -export interface AudioItem extends Item { - properties: AudioProperties; -} -export interface DirectoryItem extends Item { - properties: DirectoryProperties; -} -export interface Item { - title: string; - datetime: string; - description: string; - tags: RawTag[]; - path: string; - thumbnail?: Thumbnail; - properties: - | OtherProperties - | PictureProperties - | PlainTextProperties - | MarkdownProperties - | PDFProperties - | VideoProperties - | AudioProperties - | DirectoryProperties; -} -export interface Resolution { - width: number; - height: number; -} -export interface OtherProperties { - type: ItemType.OTHER; - resource: string; -} -export interface PictureProperties { - type: ItemType.PICTURE; - resource: string; - resolution: Resolution; -} -export interface PlainTextProperties { - type: ItemType.PLAINTEXT; - resource: string; -} -export interface MarkdownProperties { - type: ItemType.MARKDOWN; - resource: string; -} -export interface PDFProperties { - type: ItemType.PDF; - resource: string; -} -export interface VideoProperties { - type: ItemType.VIDEO; - resource: string; -} -export interface AudioProperties { - type: ItemType.AUDIO; - resource: string; -} -export interface DirectoryProperties { - type: ItemType.DIRECTORY; - items: Item[]; -} - -export interface Thumbnail { - resource: string; - resolution: Resolution; -} -export type RawTag = string; diff --git a/viewer/src/@types/gallery.ts b/viewer/src/@types/gallery.ts new file mode 100644 index 0000000..8c0f177 --- /dev/null +++ b/viewer/src/@types/gallery.ts @@ -0,0 +1,129 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2019-2022 Guillaume FOUET +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + +import { ItemType } from './itemType'; +import { SplashScreenConfig } from './splashscreen'; + +export type ItemSortStr = 'title_asc' | 'date_asc' | 'date_desc'; + +export interface Config { + galleryRoot: string; + galleryIndex?: string; + initialItemSort?: ItemSortStr; + initialTagDisplayLimit?: number; + splashScreen?: SplashScreenConfig; +} + +// --- + +export interface Resolution { + width: number; + height: number; +} +export interface Thumbnail { + resource: string; + resolution: Resolution; +} +export type RawTag = string; + +// --- + +export interface Downloadable { + resource: string; + type: ItemType; // unknown +} +export interface OtherProperties extends Downloadable { + type: ItemType.OTHER; +} +export interface PictureProperties extends Downloadable { + type: ItemType.PICTURE; + resolution: Resolution; +} +export interface PlainTextProperties extends Downloadable { + type: ItemType.PLAINTEXT; +} +export interface MarkdownProperties extends Downloadable { + type: ItemType.MARKDOWN; +} +export interface PDFProperties extends Downloadable { + type: ItemType.PDF; +} +export interface VideoProperties extends Downloadable { + type: ItemType.VIDEO; +} +export interface AudioProperties extends Downloadable { + type: ItemType.AUDIO; +} +export interface DirectoryProperties { + type: ItemType.DIRECTORY; + // eslint-disable-next-line no-use-before-define + items: Item[]; +} + +// --- + +export interface Item { + title: string; + datetime: string; + description: string; + tags: RawTag[]; + path: string; + thumbnail?: Thumbnail; + properties: + | Downloadable + | DirectoryProperties; +} +export interface DownloadableItem extends Item { // Special unknown item type + properties: Downloadable; +} +export interface OtherItem extends Item { + properties: OtherProperties; +} +export interface PictureItem extends Item { + properties: PictureProperties; +} +export interface PlainTextItem extends Item { + properties: PlainTextProperties; +} +export interface MarkdownItem extends Item { + properties: MarkdownProperties; +} +export interface PDFItem extends Item { + properties: PDFProperties; +} +export interface VideoItem extends Item { + properties: VideoProperties; +} +export interface AudioItem extends Item { + properties: AudioProperties; +} +export interface DirectoryItem extends Item { + properties: DirectoryProperties; +} + +// --- + +export interface IndexProperties { + galleryTitle: string; + tagCategories: RawTag[]; +} +export interface Index { + properties: IndexProperties; + tree: DirectoryItem; +} diff --git a/viewer/src/@types/itemType.ts b/viewer/src/@types/itemType.ts new file mode 100644 index 0000000..ecab05c --- /dev/null +++ b/viewer/src/@types/itemType.ts @@ -0,0 +1,29 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2019-2021 Guillaume FOUET +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + +export enum ItemType { + OTHER = 'other', + PICTURE = 'picture', + PLAINTEXT = 'plaintext', + MARKDOWN = 'markdown', + PDF = 'pdf', + VIDEO = 'video', + AUDIO = 'audio', + DIRECTORY = 'directory', +} diff --git a/viewer/src/@types/operation.ts b/viewer/src/@types/operation.ts new file mode 100644 index 0000000..ec6a2d3 --- /dev/null +++ b/viewer/src/@types/operation.ts @@ -0,0 +1,24 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2019-2022 Guillaume FOUET +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + +export enum Operation { + INTERSECTION = '', + ADDITION = '+', + SUBSTRACTION = '-', +} diff --git a/viewer/src/@types/scrollposition.d.ts b/viewer/src/@types/scrollposition.d.ts deleted file mode 100644 index 0102eab..0000000 --- a/viewer/src/@types/scrollposition.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -export type ScrollPosition = Record; diff --git a/viewer/src/@types/splashscreen.d.ts b/viewer/src/@types/splashscreen.d.ts deleted file mode 100644 index 4e03fa8..0000000 --- a/viewer/src/@types/splashscreen.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2021 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -export interface SplashScreenConfig { - resource?: string; - acknowledgmentKey?: string; - buttonAcknowledgeLabel?: string; - style?: any; -} diff --git a/viewer/src/@types/splashscreen.ts b/viewer/src/@types/splashscreen.ts new file mode 100644 index 0000000..ea2e331 --- /dev/null +++ b/viewer/src/@types/splashscreen.ts @@ -0,0 +1,25 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2019-2021 Guillaume FOUET +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + +export interface SplashScreenConfig { + resource?: string; + acknowledgmentKey?: string; + buttonAcknowledgeLabel?: string; + style?: unknown; +} diff --git a/viewer/src/@types/tag.d.ts b/viewer/src/@types/tag.d.ts deleted file mode 100644 index 9ed2c04..0000000 --- a/viewer/src/@types/tag.d.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -import { Item, RawTag } from "./gallery"; - -export interface TagNode { - tag: RawTag; - tagfiltered: RawTag; - rootPart: boolean; - childPart: boolean; - items: Item[]; - children: TagIndex; -} -export interface TagSearch extends TagNode { - parent?: TagNode; - operation: string; // Enum Operation - display: string; -} -export type TagSearchByOperation = Record; -export type TagIndex = Record; - -export interface TagCategory { - tag: string; - index: TagIndex; -} diff --git a/viewer/src/@types/tag.ts b/viewer/src/@types/tag.ts new file mode 100644 index 0000000..4c909f2 --- /dev/null +++ b/viewer/src/@types/tag.ts @@ -0,0 +1,42 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2019-2022 Guillaume FOUET +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + +import { Item, RawTag } from './gallery'; + +export interface TagNode { + tag: RawTag; + tagfiltered: RawTag; + rootPart: boolean; + childPart: boolean; + items: Item[]; + // eslint-disable-next-line no-use-before-define + children: TagIndex; +} +export interface TagSearch extends TagNode { + parent?: TagNode; + operation: string; // Enum Operation + display: string; +} +export type TagSearchByOperation = Record; +export type TagIndex = Record; + +export interface TagCategory { + tag: string; + index: TagIndex; +} diff --git a/viewer/src/@types/v-lazy-image.d.ts b/viewer/src/@types/v-lazy-image.d.ts deleted file mode 100644 index 2777921..0000000 --- a/viewer/src/@types/v-lazy-image.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -declare module "v-lazy-image"; diff --git a/viewer/src/@types/vue-dragscroll.d.ts b/viewer/src/@types/vue-dragscroll.d.ts deleted file mode 100644 index c07c7d8..0000000 --- a/viewer/src/@types/vue-dragscroll.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -declare module "vue-dragscroll"; diff --git a/viewer/src/assets/scss/_buefy_variables.scss b/viewer/src/assets/scss/_buefy_variables.scss deleted file mode 100644 index e008269..0000000 --- a/viewer/src/assets/scss/_buefy_variables.scss +++ /dev/null @@ -1,171 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -// Included below are all the defined variables from Bulma -// Modify as needed, removing the !default attribute. - -// Colors - -$black: hsl(0, 0%, 4%) !default; -$black-bis: hsl(0, 0%, 7%) !default; -$black-ter: hsl(0, 0%, 14%) !default; - -$grey-darker: hsl(0, 0%, 21%) !default; -$grey-dark: hsl(0, 0%, 29%) !default; -$grey: hsl(0, 0%, 48%) !default; -$grey-light: hsl(0, 0%, 71%) !default; -$grey-lighter: hsl(0, 0%, 86%) !default; - -$white-ter: hsl(0, 0%, 96%) !default; -$white-bis: hsl(0, 0%, 98%) !default; -$white: hsl(0, 0%, 100%) !default; - -$orange: hsl(14, 100%, 53%) !default; -$yellow: hsl(48, 100%, 67%) !default; -$green: hsl(141, 71%, 48%) !default; -$turquoise: hsl(171, 100%, 41%) !default; -$cyan: hsl(204, 86%, 53%) !default; -$blue: hsl(217, 71%, 53%) !default; -$purple: hsl(271, 100%, 71%) !default; -$red: hsl(348, 100%, 61%) !default; - -// Typography - -$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", - "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; -$family-monospace: monospace !default; -$render-mode: optimizeLegibility !default; - -$size-1: 3rem !default; -$size-2: 2.5rem !default; -$size-3: 2rem !default; -$size-4: 1.5rem !default; -$size-5: 1.25rem !default; -$size-6: 1rem !default; -$size-7: 0.75rem !default; - -$weight-light: 300 !default; -$weight-normal: 400 !default; -$weight-medium: 500 !default; -$weight-semibold: 600 !default; -$weight-bold: 700 !default; - -// Responsiveness - -// The container horizontal gap, which acts as the offset for breakpoints -$gap: 32px !default; -// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 -$tablet: 769px !default; -// 960px container + 4rem -$desktop: 960px + (2 * $gap) !default; -// 1152px container + 4rem -$widescreen: 1152px + (2 * $gap) !default; -// 1344px container + 4rem; -$fullhd: 1344px + (2 * $gap) !default; - -// Miscellaneous - -$easing: ease-out !default; -$radius-small: 2px !default; -$radius: 3px !default; -$radius-large: 5px !default; -$radius-rounded: 290486px !default; -$speed: 86ms !default; - -// Flags - -$variable-columns: true !default; - -// The default Bulma derived variables are declared below - -$primary: $turquoise !default; - -$info: $cyan !default; -$success: $green !default; -$warning: $yellow !default; -$danger: $red !default; - -$light: $white-ter !default; -$dark: $grey-darker !default; - -// Invert colors - -$orange-invert: findColorInvert($orange) !default; -$yellow-invert: findColorInvert($yellow) !default; -$green-invert: findColorInvert($green) !default; -$turquoise-invert: findColorInvert($turquoise) !default; -$cyan-invert: findColorInvert($cyan) !default; -$blue-invert: findColorInvert($blue) !default; -$purple-invert: findColorInvert($purple) !default; -$red-invert: findColorInvert($red) !default; - -$primary-invert: $turquoise-invert !default; -$info-invert: $cyan-invert !default; -$success-invert: $green-invert !default; -$warning-invert: $yellow-invert !default; -$danger-invert: $red-invert !default; -$light-invert: $dark !default; -$dark-invert: $light !default; - -// General colors - -$background: $white-ter !default; - -$border: $grey-lighter !default; -$border-hover: $grey-light !default; - -// Text colors - -$text: $grey-dark !default; -$text-invert: findColorInvert($text) !default; -$text-light: $grey !default; -$text-strong: $grey-darker !default; - -// Code colors - -$code: $red !default; -$code-background: $background !default; - -$pre: $text !default; -$pre-background: $background !default; - -// Link colors - -$link: $blue !default; -$link-invert: $blue-invert !default; -$link-visited: $purple !default; - -$link-hover: $grey-darker !default; -$link-hover-border: $grey-light !default; - -$link-focus: $grey-darker !default; -$link-focus-border: $blue !default; - -$link-active: $grey-darker !default; -$link-active-border: $grey-dark !default; - -// Typography - -$family-primary: $family-sans-serif !default; -$family-code: $family-monospace !default; - -$size-small: $size-7 !default; -$size-normal: $size-6 !default; -$size-medium: $size-5 !default; -$size-large: $size-4 !default; diff --git a/viewer/src/assets/scss/buefy.scss b/viewer/src/assets/scss/buefy.scss deleted file mode 100644 index 2bc4985..0000000 --- a/viewer/src/assets/scss/buefy.scss +++ /dev/null @@ -1,47 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -@import "~bulma/sass/utilities/initial-variables"; -@import "~bulma/sass/utilities/functions"; -// 1. Set your own initial variables and derived -// variables in _variables.scss -@import "buefy_variables"; - -// 2. Setup your Custom Colors -@import "@/assets/scss/theme.scss"; - -@import "~bulma/sass/utilities/derived-variables"; - -// 3. Add new color variables to the color map. -$addColors: ( - "green": ( - $green, - $green-invert, - ), - "purple": ( - $purple, - $purple-invert, - ), -); -$colors: map-merge($colors, $addColors); - -@import "~bulma"; -@import "~buefy/src/scss/buefy"; - -// 4. Provide custom buefy overrides and site styles here diff --git a/viewer/src/assets/scss/constants.scss b/viewer/src/assets/scss/constants.scss new file mode 100644 index 0000000..0732534 --- /dev/null +++ b/viewer/src/assets/scss/constants.scss @@ -0,0 +1,53 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2019-2022 Guillaume FOUET +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + +// Typography + +$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; + +$size-1: 3rem !default; +$size-2: 2.5rem !default; +$size-3: 2rem !default; +$size-4: 1.5rem !default; +$size-5: 1.25rem !default; +$size-6: 1rem !default; +$size-7: 0.75rem !default; + +$weight-light: 300 !default; +$weight-normal: 400 !default; +$weight-medium: 500 !default; +$weight-semibold: 600 !default; +$weight-bold: 700 !default; + +// Responsiveness +$tablet: 769px !default; + +// Material Design Blue Gray colour palette +$palette-000: #ffffff; +$palette-050: #eceff1; +$palette-100: #cfd8dc; +$palette-200: #b0bec5; +$palette-300: #90a4ae; +$palette-400: #78909c; +$palette-500: #607d8b; +$palette-600: #546e7a; +$palette-700: #455a64; +$palette-800: #37474f; +$palette-900: #263238; diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 06d975f..0a2f8f0 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -1,7 +1,7 @@ /* ldgallery - A static generator which turns a collection of tagged -- pictures into a searchable web gallery. -- --- Copyright (C) 2019-2020 Guillaume FOUET +-- Copyright (C) 2019-2022 Guillaume FOUET -- -- This program is free software: you can redistribute it and/or modify -- it under the terms of the GNU Affero General Public License as @@ -18,24 +18,37 @@ */ // Global CSS -@import "~@/assets/scss/theme.scss"; +@import "theme"; -// === Forms - -.required label::after { - content: "*"; - color: red; +h1 { + font-size: $size-5; + font-weight: $weight-semibold; + line-height: 1.125; +} +h2 { + font-size: $size-6; + font-weight: $weight-normal; } -button svg + span { - margin-left: 7px; +// === Forms + +button { + cursor: pointer; + color: $button-color; + background-color: $button-background-color; + border: 1px solid $button-border-color; + padding: calc(0.375em - 1px) 0.75em; + font-family: inherit; + line-height: 1.5; + font-size: $size-6; + &:hover,&:focus { + border-color: $button-active-color; + outline: none; + } } // === Tools -.nowrap { - white-space: nowrap; -} .no-scroll { overflow: hidden; } @@ -53,16 +66,15 @@ button svg + span { .flex-center { align-items: center; } +.flex-grow-1 { + flex-grow: 1; +} .fill { width: 100%; height: 100%; } -.flex-grow-1 { - flex-grow: 1; -} - /** * Class for containers that centers its content vertically and horizontally, * preferably sticking to the container start if the container is smaller than the content. @@ -76,15 +88,6 @@ button svg + span { // === Links -.link { - color: $link; - cursor: pointer; - text-decoration: none; - &:hover, &:hover a { - color: $link-hover; - } -} - .disabled { color: $disabled-color !important; cursor: initial; diff --git a/viewer/src/assets/scss/palette.scss b/viewer/src/assets/scss/palette.scss deleted file mode 100644 index e70e8a1..0000000 --- a/viewer/src/assets/scss/palette.scss +++ /dev/null @@ -1,31 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2020 Pacien TRAN-GIRARD --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -// Material Design Blue Gray colour palette -$palette-000: #ffffff; -$palette-050: #eceff1; -$palette-100: #cfd8dc; -$palette-200: #b0bec5; -$palette-300: #90a4ae; -$palette-400: #78909c; -$palette-500: #607d8b; -$palette-600: #546e7a; -$palette-700: #455a64; -$palette-800: #37474f; -$palette-900: #263238; diff --git a/viewer/src/assets/scss/scrollbar.scss b/viewer/src/assets/scss/scrollbar.scss index 4ca0a2c..d40d1a1 100644 --- a/viewer/src/assets/scss/scrollbar.scss +++ b/viewer/src/assets/scss/scrollbar.scss @@ -17,7 +17,7 @@ -- along with this program. If not, see . */ -@import "~@/assets/scss/theme.scss"; +@import "theme"; // === Scrollbar styling diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss index 19fe673..63febbf 100644 --- a/viewer/src/assets/scss/theme.scss +++ b/viewer/src/assets/scss/theme.scss @@ -1,7 +1,7 @@ /* ldgallery - A static generator which turns a collection of tagged -- pictures into a searchable web gallery. -- --- Copyright (C) 2019-2020 Guillaume FOUET +-- Copyright (C) 2019-2022 Guillaume FOUET -- 2020 Pacien TRAN-GIRARD -- -- This program is free software: you can redistribute it and/or modify @@ -18,47 +18,27 @@ -- along with this program. If not, see . */ -@import "_buefy_variables.scss"; -@import "palette.scss"; - -// Buefy components +@import "constants"; $primary: $palette-000; $text: $primary; $text-light: $palette-100; -$text-strong: $primary; $input-color: $text; $input-placeholder-color: $text-light; -$input-shadow: none; -$input-border-color: transparent; $input-background-color: $palette-500; $input-focus-box-border-color: $palette-200; -$input-focus-box-shadow-color: transparent; $link: $primary; -$link-visited: $link; $link-hover: $palette-100; $disabled-color: $palette-400; -$radius: 0; -$loading-background: $palette-800; $title-color: $palette-200; -$title-size: $size-5; -$subtitle-color: $palette-200; -$subtitle-size: $size-5; -$tag-background-color: $palette-800; +$tag-background-color: $palette-900; $button-color: $palette-100; $button-active-color: $palette-100; -$button-active-border-color: $palette-500; $button-background-color: $palette-700; $button-border-color: $palette-500; -$button-focus-color: $button-color; -$button-focus-border-color: $link; -$button-focus-box-shadow-size: 0; $body-line-height: 1.5; -$dropdown-item-color: $palette-900; -$dropdown-item-active-color: $palette-900; - -// Custom components - +$dropdown-item-color: $palette-600; +$dropdown-item-hover-color: $palette-500; $panel-top-bgcolor: $palette-800; $panel-top-txtcolor: $primary; $panel-left-bgcolor: $palette-800; @@ -67,12 +47,14 @@ $command-buttons-bgcolor: $palette-700; $content-bgcolor: $palette-900; $scrollbar-color: $palette-300; $scrollbar-width: 10px; -$loader-color: $palette-800; -$input-tag-delete-background-color: $palette-700; -$breadcrumb-margins: 12px; +$loader-color: $palette-200; +$skeleton-color: $palette-800; +$breadcrumb-margins: 10px; $breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px; $thumbnail-other-size: $body-line-height * 7em; $proposed-category-bgcolor: $palette-700; +$viewer-text: $palette-000; +$viewer-text-background: $palette-900; // Layout @@ -81,4 +63,6 @@ $layout-left: 250px; // Transitions -$transition-flex-expand: 0.1s; +$transition-slide: 0.1s; +$transition-fade: 0.1s; +$transition-move: 0.1s; diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss index fb8d2af..49fd5ba 100644 --- a/viewer/src/assets/scss/transition.scss +++ b/viewer/src/assets/scss/transition.scss @@ -17,16 +17,42 @@ -- along with this program. If not, see . */ -@import "~@/assets/scss/theme.scss"; +@import "theme"; // === Transitions for Vue -.flex-expand-enter-active, .flex-expand-leave-active { - transition: max-height $transition-flex-expand linear; +// slide +.slide-enter-active, +.slide-leave-active { + transition: transform $transition-slide linear; } -.flex-expand-enter, .flex-expand-leave-to { - max-height: 0%; +.slide-enter-from, +.slide-leave-to { + transform: translateX(-100%); } -.flex-expand-enter-to, .flex-expand-leave { - max-height: 100%; + +// fade +.fade-enter-active, +.fade-leave-active { + transition: opacity $transition-fade ease; +} + +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} + +// moving +.move-move, +.move-enter-active, +.move-leave-active { + transition: all $transition-move ease-in-out; +} +.move-enter-from, +.move-leave-to { + opacity: 0; + transform: translateX(15px); } +.move-leave-active { + position: absolute; +} \ No newline at end of file diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue deleted file mode 100644 index d518365..0000000 --- a/viewer/src/components/LdBreadcrumb.vue +++ /dev/null @@ -1,129 +0,0 @@ - - - - - - - diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue deleted file mode 100644 index 19174ad..0000000 --- a/viewer/src/components/LdCommand.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - - diff --git a/viewer/src/components/LdCommandSearch.vue b/viewer/src/components/LdCommandSearch.vue deleted file mode 100644 index 61b66f4..0000000 --- a/viewer/src/components/LdCommandSearch.vue +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - diff --git a/viewer/src/components/LdCommandSort.vue b/viewer/src/components/LdCommandSort.vue deleted file mode 100644 index c8a822e..0000000 --- a/viewer/src/components/LdCommandSort.vue +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - - diff --git a/viewer/src/components/LdError.vue b/viewer/src/components/LdError.vue deleted file mode 100644 index c71e2ad..0000000 --- a/viewer/src/components/LdError.vue +++ /dev/null @@ -1,58 +0,0 @@ - - - - -