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/.env | 4 +- viewer/.eslintrc.js | 45 +- viewer/.gitignore | 4 +- viewer/.prettierrc.js | 10 - viewer/.vscode/launch.json | 19 - viewer/.vscode/tasks.json | 49 - viewer/babel.config.js | 5 +- viewer/examples/config.json.example | 3 - viewer/examples/defaulticon.png | Bin 3363 -> 0 bytes viewer/examples/manifest.json.example | 13 - viewer/ldgallery-viewer.7.md | 2 +- viewer/package.json | 84 +- viewer/public/index.html | 40 +- 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 + viewer/tsconfig.json | 13 +- viewer/viewer.code-workspace | 22 + viewer/visualstudio.code-workspace | 42 - viewer/vue.config.js | 70 +- viewer/yarn.lock | 9266 +++++++------------- 130 files changed, 7175 insertions(+), 10119 deletions(-) delete mode 100644 viewer/.prettierrc.js delete mode 100644 viewer/.vscode/launch.json delete mode 100644 viewer/.vscode/tasks.json delete mode 100644 viewer/examples/config.json.example delete mode 100644 viewer/examples/defaulticon.png delete mode 100644 viewer/examples/manifest.json.example 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 create mode 100644 viewer/viewer.code-workspace delete mode 100644 viewer/visualstudio.code-workspace diff --git a/viewer/.env b/viewer/.env index 99efa3d..b552629 100644 --- a/viewer/.env +++ b/viewer/.env @@ -1,6 +1,6 @@ # Override with .env.development.local and .env.production.local -VUE_APP_I18N_LOCALE=en -VUE_APP_I18N_FALLBACK_LOCALE=en VUE_APP_DATA_URL=./ VUE_APP_FULLWIDTH_LIMIT=1216 +VUE_APP_I18N_LOCALE=en +VUE_APP_I18N_FALLBACK_LOCALE=en diff --git a/viewer/.eslintrc.js b/viewer/.eslintrc.js index 9d3fbbc..0308e3f 100644 --- a/viewer/.eslintrc.js +++ b/viewer/.eslintrc.js @@ -1,39 +1,22 @@ module.exports = { root: true, - env: { node: true, }, - - plugins: ["prettier"], - - extends: ["plugin:vue/essential", "plugin:prettier/recommended", "@vue/typescript"], - - rules: { - "no-console": "off", - "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", - "prettier/prettier": "warn", - "eol-last": ["warn", "always"], - "object-curly-spacing": ["warn", "always"], - "quote-props": ["warn", "as-needed"], - indent: ["warn", 2, { SwitchCase: 1 }], - quotes: ["warn", "double"], - "vue/attribute-hyphenation": "warn", - "vue/html-closing-bracket-spacing": "warn", - "vue/html-end-tags": "error", - "vue/html-quotes": "warn", - "vue/html-self-closing": "off", - "vue/no-multi-spaces": "warn", - "vue/no-spaces-around-equal-signs-in-attribute": "warn", - "vue/no-template-shadow": "error", - "vue/v-bind-style": "warn", - "vue/v-on-style": "warn", - "vue/attributes-order": "warn", - "vue/this-in-template": "warn", - }, - + extends: [ + 'plugin:vue/vue3-recommended', + '@vue/standard', + '@vue/typescript/recommended', + ], parserOptions: { - sourceType: "module", - parser: "@typescript-eslint/parser", + ecmaVersion: 2020, + }, + rules: { + 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + semi: ['warn', 'always'], + 'space-before-function-paren': ['warn', 'never'], + 'no-use-before-define': ['warn', 'nofunc'], + 'comma-dangle': ['warn', 'always-multiline'], }, }; diff --git a/viewer/.gitignore b/viewer/.gitignore index f1ab425..dd02288 100644 --- a/viewer/.gitignore +++ b/viewer/.gitignore @@ -2,6 +2,7 @@ node_modules /dist + # local env files .env.local .env.*.local @@ -10,10 +11,11 @@ node_modules npm-debug.log* yarn-debug.log* yarn-error.log* +pnpm-debug.log* # Editor directories and files .idea -.vscode/settings.json +.vscode *.suo *.ntvs* *.njsproj diff --git a/viewer/.prettierrc.js b/viewer/.prettierrc.js deleted file mode 100644 index 36c85bc..0000000 --- a/viewer/.prettierrc.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - trailingComma: "es5", - tabWidth: 2, - useTabs: false, - singleQuote: false, - printWidth: 120, - bracketSpacing: true, - arrowParens: "avoid", - endOfLine: "auto", -}; diff --git a/viewer/.vscode/launch.json b/viewer/.vscode/launch.json deleted file mode 100644 index d7995e5..0000000 --- a/viewer/.vscode/launch.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - // Use IntelliSense to learn about possible attributes. - // Hover to view descriptions of existing attributes. - // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 - "version": "0.2.0", - "configurations": [ - { - "type": "chrome", - "request": "launch", - "name": "vuejs: chrome", - "url": "http://127.0.0.1:8085", - "webRoot": "${workspaceFolder}/src", - "breakOnLoad": true, - "sourceMapPathOverrides": { - "webpack:///./src/*": "${webRoot}/*" - } - } - ] -} \ No newline at end of file diff --git a/viewer/.vscode/tasks.json b/viewer/.vscode/tasks.json deleted file mode 100644 index cb1cdb2..0000000 --- a/viewer/.vscode/tasks.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - // See https://go.microsoft.com/fwlink/?LinkId=733558 - // for the documentation about the tasks.json format - "version": "2.0.0", - "tasks": [ - { - "type": "npm", - "script": "build", - "group": { - "kind": "build", - "isDefault": true - }, - "problemMatcher": [ - "$tsc" - ] - }, - { - "type": "npm", - "script": "serve", - "problemMatcher": [ - "$tsc" - ] - }, - { - "type": "npm", - "script": "lint-autoformat", - "problemMatcher": [ - "$tsc" - ] - }, - { - "type": "npm", - "script": "lint", - "problemMatcher": [ - "$tsc" - ] - }, - { - "type": "npm", - "script": "build:report", - "problemMatcher": [ - "$tsc" - ], - "group": "build", - "label": "npm: build:report", - "detail": "vue-cli-service build --report", - } - ] -} diff --git a/viewer/babel.config.js b/viewer/babel.config.js index ca2a3c1..757ff9b 100644 --- a/viewer/babel.config.js +++ b/viewer/babel.config.js @@ -1,4 +1,5 @@ module.exports = { - presets: ["@vue/cli-plugin-babel/preset"], - plugins: [], + presets: [ + '@vue/cli-plugin-babel/preset', + ], }; diff --git a/viewer/examples/config.json.example b/viewer/examples/config.json.example deleted file mode 100644 index 580da8c..0000000 --- a/viewer/examples/config.json.example +++ /dev/null @@ -1,3 +0,0 @@ -{ - "galleryRoot": "gallery/" -} diff --git a/viewer/examples/defaulticon.png b/viewer/examples/defaulticon.png deleted file mode 100644 index 0194e29..0000000 Binary files a/viewer/examples/defaulticon.png and /dev/null differ diff --git a/viewer/examples/manifest.json.example b/viewer/examples/manifest.json.example deleted file mode 100644 index d07209f..0000000 --- a/viewer/examples/manifest.json.example +++ /dev/null @@ -1,13 +0,0 @@ -{ - "short_name": "LdGallery", - "name": "LdGallery", - "icons": [ - { - "src": "defaulticon.png", - "type": "image/png", - "sizes": "192x192" - } - ], - "display": "standalone", - "_comment": "https://developer.mozilla.org/en-US/docs/Web/Manifest" -} diff --git a/viewer/ldgallery-viewer.7.md b/viewer/ldgallery-viewer.7.md index 1e914ff..00435bc 100644 --- a/viewer/ldgallery-viewer.7.md +++ b/viewer/ldgallery-viewer.7.md @@ -161,7 +161,7 @@ The ldgallery source code is available on . # LICENSE -Copyright (C) 2019-2020 Pacien TRAN-GIRARD and Guillaume FOUET. +Copyright (C) 2019-2022 Pacien TRAN-GIRARD and 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. diff --git a/viewer/package.json b/viewer/package.json index bc39a21..e6a1477 100644 --- a/viewer/package.json +++ b/viewer/package.json @@ -1,58 +1,52 @@ { "name": "ldgallery-viewer", - "version": "2.0.0", - "homepage": "https://ldgallery.pacien.org/", - "license": "AGPL-3", + "version": "3.0.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "build:report": "vue-cli-service build --report", "lint": "vue-cli-service lint --no-fix --max-warnings 0", - "lint-autoformat": "vue-cli-service lint --fix", - "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue|ts)' --locales './src/locales/*.json'" + "lint-autoformat": "vue-cli-service lint --fix" }, "dependencies": { - "@fortawesome/fontawesome-svg-core": "1.2.30", - "@fortawesome/free-solid-svg-icons": "5.14.0", - "@fortawesome/free-regular-svg-icons": "5.14.0", - "@fortawesome/vue-fontawesome": "2.0.0", - "@types/hammerjs": "2.0.39", - "@types/marked": "2.0.3", - "buefy": "0.8.15", + "@fortawesome/fontawesome-svg-core": "6.1.2", + "@fortawesome/free-solid-svg-icons": "6.1.2", + "@fortawesome/vue-fontawesome": "3.0.1", + "@vueuse/core": "9.1.1", + "core-js": "3.25.0", "hammerjs": "2.0.8", - "marked": "2.1.3", - "v-lazy-image": "1.4.0", - "vue": "2.6.14", - "vue-class-component": "7.2.6", - "vue-dragscroll": "2.1.0", - "vue-i18n": "8.24.5", - "vue-property-decorator": "9.1.2", - "vue-router": "3.5.2", - "vuex": "3.6.2", - "vuex-class-component": "2.3.5" + "marked": "4.0.19", + "mosha-vue-toastify": "1.0.23", + "pinia": "2.0.21", + "v-lazy-image": "2.1.1", + "vue": "3.2.37", + "vue-dragscroll": "4.0.4", + "vue-i18n": "9.1.10", + "vue-router": "4.1.5" }, "devDependencies": { - "@types/webpack": "4.41.29", - "@typescript-eslint/eslint-plugin": "4.21.0", - "@typescript-eslint/parser": "4.21.0", - "@vue/cli-plugin-babel": "4.5.13", - "@vue/cli-plugin-eslint": "4.5.13", - "@vue/cli-plugin-router": "4.5.13", - "@vue/cli-plugin-typescript": "4.5.13", - "@vue/cli-plugin-vuex": "4.5.13", - "@vue/cli-service": "4.5.13", - "@vue/eslint-config-typescript": "7.0.0", - "eslint": "7.23.0", - "eslint-config-prettier": "8.5.0", - "eslint-plugin-prettier": "3.4.1", - "eslint-plugin-vue": "7.20.0", - "node-sass": "6.0.1", - "sass-loader": "10.2.1", - "typescript": "4.2.4", - "vue-cli-plugin-buefy": "0.3.8", - "vue-cli-plugin-fontawesome": "0.2.0", - "vue-cli-plugin-i18n": "2.1.1", - "vue-template-compiler": "2.6.14" - } + "@types/hammerjs": "2.0.41", + "@types/marked": "4.0.6", + "@typescript-eslint/eslint-plugin": "5.31.0", + "@typescript-eslint/parser": "5.31.0", + "@vue/cli-plugin-babel": "5.0.8", + "@vue/cli-plugin-eslint": "5.0.8", + "@vue/cli-plugin-router": "5.0.8", + "@vue/cli-plugin-typescript": "5.0.8", + "@vue/cli-service": "5.0.8", + "@vue/eslint-config-standard": "8.0.0", + "@vue/eslint-config-typescript": "11.0.0", + "eslint": "8.20.0", + "eslint-plugin-import": "2.26.0", + "eslint-plugin-node": "11.1.0", + "eslint-plugin-promise": "6.0.0", + "eslint-plugin-vue": "9.3.0", + "js-yaml-loader": "1.2.2", + "sass": "1.54.0", + "sass-loader": "13.0.2", + "typescript": "4.7.4", + "vue-cli-plugin-pinia": "0.1.4" + }, + "homepage": "https://ldgallery.pacien.org/", + "license": "AGPL-3" } diff --git a/viewer/public/index.html b/viewer/public/index.html index c3ff247..7058e4e 100644 --- a/viewer/public/index.html +++ b/viewer/public/index.html @@ -1,7 +1,7 @@ - - - - - - - - - - - - ldgallery - - - - -
- - - + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+ + 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, +.m