From 6d0c43fee2a9622a2954fbab5886679d53991c12 Mon Sep 17 00:00:00 2001 From: Mike Bryant Date: Wed, 24 Jul 2024 11:29:20 +0100 Subject: [PATCH] Update Vue and various components, and consolidate common CSS --- .../admin/app/assets/css/admin/_admin.scss | 10 +- modules/admin/app/assets/css/apps.scss | 85 + modules/admin/app/assets/css/datasets.scss | 85 +- modules/admin/app/assets/css/dmeditor.scss | 37 +- modules/admin/app/assets/css/vocabeditor.scss | 1 + .../js/dmeditor/components/_list-et.vue | 9 +- .../dmeditor/components/_modal-fm-editor.vue | 9 +- .../app/assets/js/lib/vue.runtime.global.js | 20865 ++++++++-------- modules/admin/app/views/admin/Helpers.scala | 2 + package-lock.json | 5157 ++-- package.json | 22 +- 11 files changed, 13660 insertions(+), 12622 deletions(-) create mode 100644 modules/admin/app/assets/css/apps.scss diff --git a/modules/admin/app/assets/css/admin/_admin.scss b/modules/admin/app/assets/css/admin/_admin.scss index 90cd3b632..d1a96563e 100644 --- a/modules/admin/app/assets/css/admin/_admin.scss +++ b/modules/admin/app/assets/css/admin/_admin.scss @@ -470,16 +470,14 @@ body.spa-app { } .app-content { - @include make-container(); - @include make-container-max-widths(); - flex: 1; - display: flex; - flex-direction: column; - margin-top: $margin-md; + @extend %expanding-column; } .app-content-inner { + @include make-container(); + @include make-container-max-widths(); @extend %expanding-column; + margin-top: $margin-md; } .priority-badge { diff --git a/modules/admin/app/assets/css/apps.scss b/modules/admin/app/assets/css/apps.scss new file mode 100644 index 000000000..0fc97e8a7 --- /dev/null +++ b/modules/admin/app/assets/css/apps.scss @@ -0,0 +1,85 @@ +@import "lib/docview-portal/css/portal.scss"; + +//Admin +@import "./admin/admin"; +@import "./admin/forms"; + +// Styling common to docview VueJS applications + +#app-error-notice { + position: absolute; + bottom: $margin-sm; + right: $margin-sm; + padding: $margin-xs $margin-sm; + z-index: 100; + + .close { + margin-left: $margin-xs; + margin-top: -3px; + cursor: pointer; + } +} + +.modal { + background-color: rgba(0, 0, 0, 0.1); +} + +.modal-alert { + z-index: 1000; + display: flex !important; + + .modal-content { + box-shadow: $box-shadow-lg; + } +} + +.modal-content.resizable { + min-height: 30rem; +} + +.modal-content.resizable > .modal-body { + display: flex; + flex-direction: column; + flex: 1; +} + +.modal-resize-handle { + position: absolute; + right: 0; + bottom: 0; + display: inline; + width: 1rem; + height: 1rem; + cursor: nwse-resize; +} + +.modal-resize-handle:after { + content:''; + display:block; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid $ehri-border-gray; + width: 2px; + height: 5px; + position: absolute; + pointer-events: none; + right: -1px; + bottom: 1px; + transform: rotate(135deg); +} + +.options-form { + padding: $margin-md; + input:invalid { + background-color: lighten($danger, 40%); + } +} + +.resizable .options-form { + flex: 1; +} + +.options-form .small.form-text { + color: $text-muted; +} + diff --git a/modules/admin/app/assets/css/datasets.scss b/modules/admin/app/assets/css/datasets.scss index 8f2cb3003..66546dac4 100644 --- a/modules/admin/app/assets/css/datasets.scss +++ b/modules/admin/app/assets/css/datasets.scss @@ -1,8 +1,4 @@ -@import "lib/docview-portal/css/portal.scss"; - -//Admin -@import "./admin/admin"; -@import "./admin/forms"; +@import "apps"; $active-table-row: #e7f1ff; @@ -165,60 +161,6 @@ $active-table-row: #e7f1ff; flex: 1; justify-content: flex-end; } - -#app-error-notice { - position: absolute; - bottom: $margin-sm; - right: $margin-sm; - padding: $margin-xs $margin-sm; - z-index: 100; - - .close { - margin-left: $margin-xs; - margin-top: -3px; - cursor: pointer; - } -} - -.modal { - background-color: rgba(0, 0, 0, 0.1); -} - -.modal-content.resizable { - min-height: 30rem; -} - -.modal-content.resizable > .modal-body { - display: flex; - flex-direction: column; - flex: 1; -} - -.modal-resize-handle { - position: absolute; - right: 0; - bottom: 0; - display: inline; - width: 1rem; - height: 1rem; - cursor: nwse-resize; -} - -.modal-resize-handle:after { - content:''; - display:block; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid $ehri-border-gray; - width: 2px; - height: 5px; - position: absolute; - pointer-events: none; - right: -1px; - bottom: 1px; - transform: rotate(135deg); -} - #stage-tabs, #dataset-manager-tabs { @@ -236,15 +178,6 @@ $active-table-row: #e7f1ff; margin-bottom: $margin-sm; } -.modal-alert { - z-index: 1000; - display: flex !important; - - .modal-content { - box-shadow: $box-shadow-lg; - } -} - .file-picker { display: flex; align-items: center; @@ -676,6 +609,7 @@ $active-table-row: #e7f1ff; // strange gaps. border-collapse: separate; border-spacing: 0; + border: none; // table doesn't need a double border, however cells do have one } // Sticky headers. Note: applying `position: sticky` to `thead` @@ -985,21 +919,6 @@ $active-table-row: #e7f1ff; background-color: $gray-100; } -.options-form { - padding: $margin-md; - input:invalid { - background-color: lighten($danger, 40%); - } -} - -.resizable .options-form { - flex: 1; -} - -.options-form .small.form-text { - color: $text-muted; -} - .data-manager-form-item { margin-bottom: $margin-xs; @include make-row(); diff --git a/modules/admin/app/assets/css/dmeditor.scss b/modules/admin/app/assets/css/dmeditor.scss index c56ffc872..179e9a1ad 100644 --- a/modules/admin/app/assets/css/dmeditor.scss +++ b/modules/admin/app/assets/css/dmeditor.scss @@ -1,39 +1,14 @@ -@import "lib/docview-portal/css/portal.scss"; - -//Admin -@import "./admin/admin"; -@import "./admin/forms"; +@import "apps"; $active-table-row: #e7f1ff; .app-wrapper { background-color: $white; } -// TODO: de-dup from dataset manager -.options-form { - padding: $margin-md; - input:invalid { - background-color: lighten($danger, 40%); - } -} -.resizable .options-form { - flex: 1; +// Make content area scrollable, this prevents +// weird behaviour with modal popups +.app-content { + overflow: auto; + flex-basis: 0; } - -// TODO: de-dup from dataset manager -#app-error-notice { - position: absolute; - bottom: $margin-sm; - right: $margin-sm; - padding: $margin-xs $margin-sm; - z-index: 2000; // higher than modal - - .close { - margin-left: $margin-xs; - margin-top: -3px; - cursor: pointer; - } -} - - diff --git a/modules/admin/app/assets/css/vocabeditor.scss b/modules/admin/app/assets/css/vocabeditor.scss index 09301ed99..0c92eb8d4 100644 --- a/modules/admin/app/assets/css/vocabeditor.scss +++ b/modules/admin/app/assets/css/vocabeditor.scss @@ -3,6 +3,7 @@ //Admin @import "./admin/admin"; @import "./admin/forms"; +//@import "apps"; // import this after compat check .footer-buttons { margin-top: $margin-sm; diff --git a/modules/admin/app/assets/js/dmeditor/components/_list-et.vue b/modules/admin/app/assets/js/dmeditor/components/_list-et.vue index b9d31498f..232dfdb59 100644 --- a/modules/admin/app/assets/js/dmeditor/components/_list-et.vue +++ b/modules/admin/app/assets/js/dmeditor/components/_list-et.vue @@ -168,11 +168,10 @@ export default { v-on:error="(...args) => $emit('error', ...args)">

Are you sure you want to delete this field?

diff --git a/modules/admin/app/assets/js/dmeditor/components/_modal-fm-editor.vue b/modules/admin/app/assets/js/dmeditor/components/_modal-fm-editor.vue index 68604f3ac..b516fccd4 100644 --- a/modules/admin/app/assets/js/dmeditor/components/_modal-fm-editor.vue +++ b/modules/admin/app/assets/js/dmeditor/components/_modal-fm-editor.vue @@ -51,6 +51,9 @@ export default { } return null; }, + idsForCategory: function(entityType, category) { + return this.templates[entityType][category]; + }, unusedIds: function (entityType) { let used = new Set(); let items = this.fieldMetadata[entityType] as FieldMetadata[]; @@ -120,8 +123,8 @@ export default {