From 406c82214dbe07249799e3f8fd80d9e65d1c0fdf Mon Sep 17 00:00:00 2001 From: Ola Blissing Date: Fri, 10 Jul 2020 18:00:34 +0200 Subject: [PATCH 001/128] Rework field-adder, added entity-action component, reworked highlight functionality --- .../components/inspector/entity-action.vue | 116 +++++ .../src/components/inspector/field-adder.vue | 20 +- .../src/components/inspector/item-local.vue | 201 ++++---- .../src/components/inspector/item-sibling.vue | 161 ++++--- .../components/inspector/property-adder.vue | 456 ++++++++++++++++++ .../src/components/mixins/form-mixin.vue | 3 + .../vue-client/src/resources/json/i18n.json | 3 + 7 files changed, 776 insertions(+), 184 deletions(-) create mode 100644 viewer/vue-client/src/components/inspector/entity-action.vue create mode 100644 viewer/vue-client/src/components/inspector/property-adder.vue diff --git a/viewer/vue-client/src/components/inspector/entity-action.vue b/viewer/vue-client/src/components/inspector/entity-action.vue new file mode 100644 index 000000000..a92f05de2 --- /dev/null +++ b/viewer/vue-client/src/components/inspector/entity-action.vue @@ -0,0 +1,116 @@ + + + + + diff --git a/viewer/vue-client/src/components/inspector/field-adder.vue b/viewer/vue-client/src/components/inspector/field-adder.vue index 94c03ea3b..99c7b1ee5 100644 --- a/viewer/vue-client/src/components/inspector/field-adder.vue +++ b/viewer/vue-client/src/components/inspector/field-adder.vue @@ -277,9 +277,7 @@ export default { diff --git a/viewer/vue-client/src/components/mixins/form-mixin.vue b/viewer/vue-client/src/components/mixins/form-mixin.vue index 8c400a146..af5afa414 100644 --- a/viewer/vue-client/src/components/mixins/form-mixin.vue +++ b/viewer/vue-client/src/components/mixins/form-mixin.vue @@ -54,17 +54,15 @@ export default { return this.formObj['@reverse']; }, reverseItemInForm() { - // Disabled for the time being - return {}; - // const reverseItem = cloneDeep(this.reverseItem); - // const propsInMainForm = require('@/resources/json/displayGroups.json').reverse.mainForm; - // const objToMainForm = {}; - // each(reverseItem, (item, key) => { - // if (propsInMainForm.indexOf(`@reverse/${key}`) > -1) { - // objToMainForm[`@reverse/${key}`] = item; - // } - // }); - // return objToMainForm; + const reverseItem = cloneDeep(this.reverseItem); + const propsInMainForm = require('@/resources/json/displayGroups.json').reverse.mainForm; + const objToMainForm = {}; + each(reverseItem, (item, key) => { + if (propsInMainForm.indexOf(`@reverse/${key}`) > -1) { + objToMainForm[`@reverse/${key}`] = item; + } + }); + return objToMainForm; }, reverseItemSorted() { const reverseItem = cloneDeep(this.reverseItem); From 4119ef1bec84ae9026d5859e43c2343775a5b682 Mon Sep 17 00:00:00 2001 From: Ola Blissing Date: Tue, 18 Aug 2020 16:57:30 +0200 Subject: [PATCH 011/128] Expand button component to be able to be a larger button with text, add preview button to extraction --- viewer/vue-client/src/App.vue | 2 +- .../components/inspector/search-window.vue | 60 ++++++++++++------- .../src/components/shared/button.vue | 55 +++++++++++++---- .../vue-client/src/resources/json/i18n.json | 2 + 4 files changed, 85 insertions(+), 34 deletions(-) diff --git a/viewer/vue-client/src/App.vue b/viewer/vue-client/src/App.vue index 0faa2785b..c0aef88d6 100644 --- a/viewer/vue-client/src/App.vue +++ b/viewer/vue-client/src/App.vue @@ -528,7 +528,7 @@ body { } } } - input, textarea, img, select, .ItemEntity, .ItemLocal, .ItemSibling, .icon, .icon i, li, i.fa { + input, textarea, img, select, .ItemEntity, .ItemLocal, .EntityAction, .ItemSibling, .icon, .icon i, li, i.fa { &:focus { .focus-mixin-border(); } diff --git a/viewer/vue-client/src/components/inspector/search-window.vue b/viewer/vue-client/src/components/inspector/search-window.vue index e09e342a3..642cfb2bd 100644 --- a/viewer/vue-client/src/components/inspector/search-window.vue +++ b/viewer/vue-client/src/components/inspector/search-window.vue @@ -5,8 +5,10 @@ import { mapGetters } from 'vuex'; import VueSimpleSpinner from 'vue-simple-spinner'; import * as DisplayUtil from '@/utils/display'; import * as VocabUtil from '@/utils/vocab'; +import * as StringUtil from '@/utils/string'; import PanelComponent from '@/components/shared/panel-component'; import PanelSearchList from '@/components/search/panel-search-list'; +import Button from '@/components/shared/button'; import Sort from '@/components/search/sort'; import ModalPagination from '@/components/inspector/modal-pagination'; import FilterSelect from '@/components/shared/filter-select.vue'; @@ -25,15 +27,9 @@ export default { loading: false, debounceTimer: 500, showHelp: false, + showExtractSummary: false, searchMade: false, currentSearchTypes: [], - localEntitySettings: { - text: 'Create and link entity', - styling: 'brand', - icon: 'plus', - show: true, - inspectAction: false, - }, listItemSettings: { text: 'Replace local entity', styling: 'brand', @@ -109,6 +105,7 @@ export default { 'modal-pagination': ModalPagination, 'filter-select': FilterSelect, 'vue-simple-spinner': VueSimpleSpinner, + 'button-component': Button, sort: Sort, }, watch: { @@ -147,6 +144,9 @@ export default { 'settings', 'status', ]), + typeOfExtractingEntity() { + return StringUtil.getLabelByLang(this.itemInfo['@type'], this.user.settings.language, this.resources.vocab, this.resources.context); + }, filterPlaceHolder() { if (this.someValuesFrom.length > 0) { return 'Suggested types'; @@ -482,17 +482,33 @@ export default {
+
+ +

{{ "Create link from local entity" | translatePhrase }}:

-
- - +
+

+ En liten text som förklarar saker. +

+ +
@@ -596,9 +612,7 @@ export default { max-height: inherit; max-height: fit-content; overflow: auto; - padding: 0 0 0 15px; - border-left: 1px solid @grey-lighter; - margin-left: 15px; + padding: 0; } } @@ -611,6 +625,12 @@ export default { padding: 15px; } + &-dialogContainer { + .Button:not(:first-of-type) { + margin-left: 1em; + } + } + &-panel { } diff --git a/viewer/vue-client/src/components/shared/button.vue b/viewer/vue-client/src/components/shared/button.vue index 5e8d5351d..3cfb734f1 100644 --- a/viewer/vue-client/src/components/shared/button.vue +++ b/viewer/vue-client/src/components/shared/button.vue @@ -14,6 +14,7 @@ Listen to the 'click' event in the parent as usual. * label - (if icon) provide a string that will be translated & used as accessible label * shadow - (default: false) show a shadow under the button */ +import { isArray } from 'lodash-es'; export default { name: 'button-component', @@ -26,6 +27,10 @@ export default { type: Boolean, default: false, }, + variant: { + type: String, + default: 'info', + }, disabled: { type: Boolean, default: false, @@ -38,8 +43,16 @@ export default { type: Boolean, default: false, }, + transparent: { + type: Boolean, + default: false, + }, + border: { + type: [Boolean, String], + default: true, + }, buttonText: { - type: String, + type: [String, Array], default: '', }, icon: { @@ -69,11 +82,17 @@ export default { computedLabel() { return this.disabled ? '' : this.$options.filters.translatePhrase(this.label); }, - smallText() { - if (this.buttonText && this.buttonText.length > 3) { - return true; + computedButtonText() { + if (isArray(this.buttonText)) { + let buttonText = ''; + for (let i = 0; i < this.buttonText.length; i++) { + buttonText += this.$options.filters.translatePhrase(this.buttonText[i]); + buttonText += ' '; + } + return buttonText; + } else { + return this.$options.filters.translatePhrase(this.buttonText); } - return false; }, }, components: { @@ -91,19 +110,23 @@ export default { :class="[ { 'has-shadow': shadow, + 'has-no-border': border === false, 'disabled' : disabled, - 'Button-primary': indicator && !disabled, + 'Button-primary': indicator && !disabled, 'is-active': active, 'is-inverted': inverted, + 'is-transparent': transparent, + 'is-wide': buttonText, }, this.size ? 'Button-' + this.size : '', + this.variant ? 'Button-' + this.variant : '', ]" @click="action()" :aria-label="computedLabel"> - {{ buttonText }} + {{ computedButtonText }} @@ -133,6 +156,15 @@ export default { height: 36px; } + &.is-wide { + width: auto; + padding: 0 0.5em; + } + + &.has-no-border { + border: 0; + } + &.has-shadow { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.1); } @@ -164,6 +196,9 @@ export default { box-shadow: inset 0em 0em 0.75rem 0em fadeout(darken(@color, 60%), 75%); } } + &.is-transparent { + background-color: transparent; + } &.disabled { border-color: @grey-lighter !important; color: @grey !important; @@ -217,12 +252,6 @@ export default { &-info { .ButtonMixin(@brand-info); } - - &-buttonText { - &.small-text { - font-size: 85%; - } - } i { transition: transform 0.25s ease; diff --git a/viewer/vue-client/src/resources/json/i18n.json b/viewer/vue-client/src/resources/json/i18n.json index ad8aa8dbe..36e195b29 100644 --- a/viewer/vue-client/src/resources/json/i18n.json +++ b/viewer/vue-client/src/resources/json/i18n.json @@ -74,6 +74,7 @@ "Show search help": "Visa sökhjälp", "Loading editor" : "Laddar redigeringen", "View MARC21" : "Granska MARC21", + "Preview": "Förhandsgranska", "Preview MARC21": "Förhandsgranska MARC21", "Loading marc" : "Laddar MARC21", "Add entity" : "Lägg till entitet", @@ -228,6 +229,7 @@ "Linking was successful": "Länkning lyckades", "Extract entity": "Bryt ut entitet", "Create/link": "Skapa/länka", + "Create": "Skapa", "Creating link": "Skapar länk", "Item": "Bestånd", "Missing label": "Etikett saknas", From cf2097977c1cd1dd4c31039560d6edc9d4a20b71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20Engstr=C3=B6m?= Date: Thu, 13 Aug 2020 11:30:07 +0200 Subject: [PATCH 012/128] Navbar: fix items, style, responsive etc --- viewer/client/static/less/main_id.less | 20 ++-- viewer/client/static/less/shared/flexbox.less | 15 +++ viewer/client/static/less/shared/kungbib.less | 19 --- viewer/client/static/less/shared/main.less | 1 + .../client/static/less/shared/marcframe.less | 2 - viewer/client/static/less/shared/navbar.less | 113 +++++++----------- viewer/client/static/less/shared/vocab.less | 6 - viewer/dataaccess.py | 7 +- viewer/templates/base.html | 12 +- viewer/templates/marcframeview.html | 2 +- viewer/templates/vocab.html | 6 +- 11 files changed, 87 insertions(+), 116 deletions(-) create mode 100644 viewer/client/static/less/shared/flexbox.less diff --git a/viewer/client/static/less/main_id.less b/viewer/client/static/less/main_id.less index 79626a7cb..e7d7f41e9 100644 --- a/viewer/client/static/less/main_id.less +++ b/viewer/client/static/less/main_id.less @@ -14,24 +14,24 @@ // ----------- VARIABLES ------------ @font-family-base: 'Open Sans', sans-serif; -@brand-primary: @happy-muted-denim; -@bg-site: #E5E5E5; +@brand-primary: #4A7682; +@brand-contrast: #F7A07B; +@bg-site: #F9F9F9; @bg-img: none; @bg-content: @white; -@bg-navbar: @happy-muted-denim; -@bg-navbar-hover: darken(@bg-navbar, 10%); -@shadow-navbar: none; -@text-navbar: @white; + +@bg-navbar: @brand-primary; +@text-navbar: fade(@white, 90%); +@text-navbar-hover: @white; @text-brand: @white; @text-brand-env: @white; -@text-alt-navbar: fade(@white, 55%); +@navbar-active-color: @brand-contrast; + @bg-sidebars: darken(@white, 5%); -@border-navbar: fadeout(#fff, 100%); -@border-navbar-width: 0px; @bg-footer: @bg-navbar; @shadow-footer: 0px; @text-footer: @text-navbar; -@text-alt-footer: @text-alt-navbar; +@text-alt-footer: fade(@white, 55%); @bg-jumbotron: transparent; @bg-jumbotron-image: none; @border-footer: @grey-light; diff --git a/viewer/client/static/less/shared/flexbox.less b/viewer/client/static/less/shared/flexbox.less new file mode 100644 index 000000000..f7ccd59d5 --- /dev/null +++ b/viewer/client/static/less/shared/flexbox.less @@ -0,0 +1,15 @@ +.flex { + display: flex; + + &.column { + flex-direction: column; + } + + &.wrap { + flex-wrap: wrap; + } + + &.fill-available { + flex: 1; + } +} \ No newline at end of file diff --git a/viewer/client/static/less/shared/kungbib.less b/viewer/client/static/less/shared/kungbib.less index fd2dc6042..b7a95b488 100644 --- a/viewer/client/static/less/shared/kungbib.less +++ b/viewer/client/static/less/shared/kungbib.less @@ -9,7 +9,6 @@ @grey-lighter:#E0E6E9; @happy-blue: #5DC4ED; -@happy-muted-denim: #547E91; @happy-magenta: rgb(255, 154, 255); body { @@ -18,24 +17,6 @@ body { color: #333; } -.navbar-logo img { - margin: .2em 0; - height: 80%; -} - -.navbar-brand { - margin: 0!important; -} - -.navbar-logo { - padding: 0; -} - .logo-medium { height: 75px; -} - -.navbar-inverse .navbar-brand, -.navbar-inverse .navbar-nav>li>a{ - color: #fff; } \ No newline at end of file diff --git a/viewer/client/static/less/shared/main.less b/viewer/client/static/less/shared/main.less index bafb6f428..25ecce019 100644 --- a/viewer/client/static/less/shared/main.less +++ b/viewer/client/static/less/shared/main.less @@ -11,6 +11,7 @@ @import '../shared/thing.less'; @import '../shared/button-and-links.less'; @import '../shared/kungbib.less'; +@import '../shared/flexbox.less'; // ----------- BASE STYLES ---------- diff --git a/viewer/client/static/less/shared/marcframe.less b/viewer/client/static/less/shared/marcframe.less index a9339a989..cb5a516a2 100644 --- a/viewer/client/static/less/shared/marcframe.less +++ b/viewer/client/static/less/shared/marcframe.less @@ -84,8 +84,6 @@ body#marcframeview { left: 0px; width: 100%; z-index: 998; - border: solid @gray-light; - border-width: 0px 0px 1px 0px; li.active > a { background-color: darken(@brand-primary, 20%) !important; } diff --git a/viewer/client/static/less/shared/navbar.less b/viewer/client/static/less/shared/navbar.less index 79f91adaf..56322ca5e 100644 --- a/viewer/client/static/less/shared/navbar.less +++ b/viewer/client/static/less/shared/navbar.less @@ -1,89 +1,64 @@ body > .navbar { width: 100%; + min-height: auto; + margin: 0; z-index: 900; - border: solid @border-navbar; background-color: @bg-navbar; - border-width: 0px 0px @border-navbar-width 0px; - box-shadow: @shadow-navbar; + font-weight: 600; + border: 0; + border-radius: 0; + @media screen and (max-width: @screen-sm-min) { padding: 0 20px; } - .navbar-circle { - display: inline-block; - width: 32px; - height: 32px; - border-radius: 50%; - background-color: @grey-lighter; - line-height: 2em; - margin-right: 0.25em; - text-align: center; - .user-gravatar { - border-radius: 50%; + + .navbar-header { + .navbar-brand { + color: @text-brand; + font-size: 20px; + margin: 0!important; + } + + .navbar-logo { + padding: 0; + + img { + margin: .2em 0; + height: 80%; + } + } + + .environment-label { + text-transform: uppercase; + font-size: 0.5em; + color: @text-brand-env; + font-weight: bold; + display: block; + margin: -0.5em 0px 0px 0.5em; + float: right; } } - .container-fluid { - padding: 0 30px 0 15px; - } + .navbar-nav { .navbar-item { - text-transform: none; - &.user-settings { - .navbar-circle { - width: 2.2em; - } - } - .navbar-circle { - width: 0.8em; - background-color: transparent; - } + display: inline-block; } + a { + color: @text-navbar; + white-space: nowrap; cursor: pointer; &:hover, &:focus { - background-color: @bg-navbar-hover; - } - i { - color: @text-alt-navbar; - } - } - text-transform: uppercase; - font-weight: 600; - font-size: 14px; - .dropdown { - text-shadow: none; - .dropdown-menu { - li { - a { - color: @text-alt-navbar; - i { - color: @green; - } - } - } - font-size: 12px; - } - li:hover { - a { - color: @text-alt-navbar; - } + color: @text-navbar-hover; } } - } -} -.navbar-header { - margin-left: 1em; - .navbar-brand { - font-size: 18px; - color: @text-brand; - } - .environment-label { - text-transform: uppercase; - font-size: 0.5em; - color: @text-brand-env; - font-weight: bold; - display: block; - margin: -0.5em 0px 0px 0.5em; - float: right; + .navbar-underline { + display: block; + background-color: @navbar-active-color; + height: 2px; + margin-top: 2px; + width: 100%; + } } } diff --git a/viewer/client/static/less/shared/vocab.less b/viewer/client/static/less/shared/vocab.less index a408dda47..23080fa42 100644 --- a/viewer/client/static/less/shared/vocab.less +++ b/viewer/client/static/less/shared/vocab.less @@ -187,12 +187,6 @@ body svg { } } } -.dropdown-menu.list-inline { - width: 42em; -} -.dropdown-menu.list-inline > li > a { - padding: 2px 8px; -} } // Closing bracket for body#vocab diff --git a/viewer/dataaccess.py b/viewer/dataaccess.py index fb1668913..93585adfc 100644 --- a/viewer/dataaccess.py +++ b/viewer/dataaccess.py @@ -55,9 +55,10 @@ "statsfind": '{"inScheme.@id":{"inCollection.@id":["@type"], "@type":[]}}', "filter_param": "inScheme.@id", "itemList": [ - {ID: "/doc/about", "title": "Om id.kb.se", "icon": "info-circle"}, - {ID: "/marcframe", "title": "MARC-mappningar", "icon": "exchange"}, - {ID: "/vocab", "title": "Basvokabulär", "icon": "book"} + {ID: "/", "title": "Sök"}, + {ID: "/marcframe/", "title": "MARC-mappningar"}, + {ID: "/vocab/", "title": "Basvokabulär"}, + {ID: "/doc/about", "title": "Om id.kb.se"}, ] }, LIBRIS: { diff --git a/viewer/templates/base.html b/viewer/templates/base.html index 3baac361c..8160bc18d 100644 --- a/viewer/templates/base.html +++ b/viewer/templates/base.html @@ -64,10 +64,16 @@

Din webbläsare stöds inte av tjänsten


-