diff --git a/packages/client/hmi-client/src/assets/css/theme/_fonts.scss b/packages/client/hmi-client/src/assets/css/theme/_fonts.scss index 0acc6a427a..de8cb68d42 100644 --- a/packages/client/hmi-client/src/assets/css/theme/_fonts.scss +++ b/packages/client/hmi-client/src/assets/css/theme/_fonts.scss @@ -13,18 +13,17 @@ h2 { } h4 { - font-size: 20px; - letter-spacing: 0.15px; + font-size: $fontBodyLarge; } h5 { - font-size: 16px; + font-size: $fontBodyMedium; } h6 { - font-size: 14px; + font-size: $fontBodySmall; } h7 { - font-size: var(--font-caption); -} \ No newline at end of file + font-size: $fontCaption; +} diff --git a/packages/client/hmi-client/src/assets/css/theme/_variables.scss b/packages/client/hmi-client/src/assets/css/theme/_variables.scss index e01036906f..e60ab2cb1d 100644 --- a/packages/client/hmi-client/src/assets/css/theme/_variables.scss +++ b/packages/client/hmi-client/src/assets/css/theme/_variables.scss @@ -35,13 +35,13 @@ $fontBodySmall: 14px; $fontBodyMedium: 16px; $fontBodyLarge: 18px; $fontFamily: Figtree, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif !default; -$fontSize: $fontBodyMedium; +$fontSize: $fontBodySmall; $fontWeight: 400 !default; $fontWeightSemiBold: 600; //global $textColor: rgb(16, 24, 40); -$textSecondaryColor: $emphasis-medium !default; +$textSecondaryColor: $emphasis-medium !default; $borderRadius: 4px !default; $mediumBorderRadius: 6px !default; $bigBorderRadius: 8px !default; @@ -58,6 +58,7 @@ $disabledOpacity: .38 !default; $maskBg: rgba(0, 0, 0, 0.32) !default; $loadingIconFontSize: 2rem !default; $errorColor: #B00020 !default; +$padding: .5rem !default; //selected state $highlightBg: #E9FFFC; @@ -86,7 +87,7 @@ $actionIconHoverColor: $textSecondaryColor !default; $actionIconBorderRadius: 50% !default; //input field (e.g. inputtext, spinner, inputmask) -$inputPadding: 1rem 1rem !default; +$inputPadding: $padding $padding !default; $inputTextFontSize: $fontSize; $inputBg: #ffffff !default; $inputTextColor: $emphasis-high !default; @@ -693,7 +694,7 @@ $overlayMenuBg: $menuBg !default; $overlayMenuBorder: 0 none !default; $overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) !default; $verticalMenuPadding: .5rem 0 !default; -$menuSeparatorMargin: .5rem 0 !default; +$menuSeparatorMargin: .5rem 0 !default; $breadcrumbPadding: 1rem !default; $breadcrumbBg: #ffffff !default; @@ -956,4 +957,4 @@ $petri-inputBox: var(--surface-0); --node-header-hover: var(--text-color-subdued); --z-index-modal: 1000; --keyboard-zindex: calc(var(--z-index-modal) + 100); -} \ No newline at end of file +} diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/panel/_accordion.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/panel/_accordion.scss index fb13b18df6..3e40c65b59 100644 --- a/packages/client/hmi-client/src/assets/css/theme/designer/components/panel/_accordion.scss +++ b/packages/client/hmi-client/src/assets/css/theme/designer/components/panel/_accordion.scss @@ -13,7 +13,6 @@ .p-accordion-toggle-icon { margin-right: $inlineSpacing; - color: var(--text-color-subdued); } &:focus { @@ -77,7 +76,7 @@ border-bottom-left-radius: $borderRadius; } - + .p-accordion-tab { margin-bottom: $accordionSpacing; @@ -132,4 +131,4 @@ } } } -} \ No newline at end of file +} diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_accordion.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_accordion.scss index d5f828eda5..0377c72aae 100644 --- a/packages/client/hmi-client/src/assets/css/theme/extensions/_accordion.scss +++ b/packages/client/hmi-client/src/assets/css/theme/extensions/_accordion.scss @@ -16,11 +16,7 @@ border-bottom-right-radius: $borderRadius; } - - .p-accordion-toggle-icon { - order: 1; - margin-left: auto; transition: transform $transitionDuration; } @@ -54,4 +50,4 @@ color: var(--text-color-subdued); content: ' (' attr(data-count)')'; } -} \ No newline at end of file +} diff --git a/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue b/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue index 5fa65c8518..f7884ed03e 100644 --- a/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue +++ b/packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue @@ -469,11 +469,6 @@ section math-editor { justify-content: center; } -.edit-button { - margin-left: 5px; - margin-right: 5px; -} - /* Let svg dynamically resize when the sidebar opens/closes or page resizes */ :deep(.graph-element svg) { width: 100%; @@ -492,6 +487,14 @@ section math-editor { background-color: var(--surface-secondary); height: 100%; } + +:deep(.graph-element .p-button) { + &, + &:hover { + background-color: var(--surface-secondary); + } +} + .legend { position: absolute; bottom: 0; diff --git a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue index aa1edba408..521b80dd14 100644 --- a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue +++ b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue @@ -19,14 +19,6 @@ -
@@ -38,12 +30,6 @@
- import { computed, ref, watch, onMounted } from 'vue'; import { useRouter } from 'vue-router'; -import { isEmpty } from 'lodash'; import Avatar from 'primevue/avatar'; import Button from 'primevue/button'; -import Chip from 'primevue/chip'; import Dialog from 'primevue/dialog'; import Menu from 'primevue/menu'; import { MenuItem } from 'primevue/menuitem'; -import TeraSearchbar from '@/components/navbar/tera-searchbar.vue'; import { RoutePath, useCurrentRoute } from '@/router/index'; import { RouteMetadata, RouteName } from '@/router/routes'; -import { getRelatedTerms } from '@/services/data'; import useAuthStore from '@/stores/auth'; import InputText from 'primevue/inputtext'; import TeraModal from '@/components/widgets/tera-modal.vue'; @@ -146,7 +128,6 @@ import { useProjects } from '@/composables/project'; defineProps<{ active: boolean; - showSuggestions: boolean; }>(); /* @@ -369,30 +350,6 @@ function closeLogoutDialog() { isLogoutDialog.value = false; } -/* - * Search - */ -const searchBarRef = ref(); -const terms = ref([]); - -async function updateRelatedTerms(query?: string) { - if (query || query === '' || !isDataExplorer.value) terms.value = await getRelatedTerms(query); -} - -function searchByExampleModalToggled() { - // TODO - // toggle the search by example modal represented by the component search-by-example - // which may be used as follows - /* - - */ -} - watch( () => useProjects().allProjects.value, () => { diff --git a/packages/client/hmi-client/src/components/operator/tera-operator-header.vue b/packages/client/hmi-client/src/components/operator/tera-operator-header.vue index 91738a5236..e10933c506 100644 --- a/packages/client/hmi-client/src/components/operator/tera-operator-header.vue +++ b/packages/client/hmi-client/src/components/operator/tera-operator-header.vue @@ -1,6 +1,6 @@ @@ -101,7 +73,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'; import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue'; import SelectButton from 'primevue/selectbutton'; -import { fetchData, getDocumentById } from '@/services/data'; +import { fetchData, getDocumentById, getRelatedTerms } from '@/services/data'; import { ResourceType, ResultType, @@ -124,11 +96,11 @@ import { getResourceID, isDataset, isModel, isDocument, validate } from '@/utils import { cloneDeep, intersectionBy, isEmpty, isEqual, max, min, unionBy } from 'lodash'; import { useRoute } from 'vue-router'; import TeraPreviewPanel from '@/page/data-explorer/components/tera-preview-panel.vue'; -import TeraSelectedResourcesOptionsPane from '@/page/data-explorer/components/tera-selected-resources-options-pane.vue'; -import TeraSelectedResourcesHeaderPane from '@/page/data-explorer/components/tera-selected-resources-header-pane.vue'; import TeraFacetsPanel from '@/page/data-explorer/components/tera-facets-panel.vue'; import TeraSearchResultsList from '@/page/data-explorer/components/tera-search-results-list.vue'; import { XDDFacetsItemResponse } from '@/types/Types'; +import TeraSearchbar from '@/components/navbar/tera-searchbar.vue'; +import Chip from 'primevue/chip'; import { useSearchByExampleOptions } from './search-by-example'; import TeraFilterBar from './components/tera-filter-bar.vue'; @@ -417,30 +389,6 @@ const onSearchByExample = async (searchOptions: SearchByExampleOptions) => { } }; -// helper function to bypass the search-by-example modal -// by executing a search by example and refreshing the output -const onFindRelatedContent = (item) => { - searchByExampleItem.value = item.item; - searchByExampleOptions.value = { - similarContent: false, - forwardCitation: false, - backwardCitation: false, - relatedContent: true - }; -}; - -// helper function to bypass the search-by-example modal -// by executing a search by example and refreshing the output -const onFindSimilarContent = (item) => { - searchByExampleItem.value = item.item; - searchByExampleOptions.value = { - similarContent: true, - forwardCitation: false, - backwardCitation: false, - relatedContent: false - }; -}; - const toggleDataItemSelected = (dataItem: { item: ResultType; type?: string }) => { let foundIndx = -1; const item = dataItem.item; @@ -499,17 +447,6 @@ watch(resourceType, async (newResourceType, oldResourceType) => { } }); -const clearItemSelected = () => { - selectedSearchItems.value = []; -}; -// const addPreviewItemToCart = () => { -// if (previewItem.value) { -// toggleDataItemSelected( {item: previewItem.value } ); -// previewItem.value = null; -// isSliderResourcesOpen.value = true; -// } -// }; - async function executeNewQuery() { if (route.query?.q?.toString() === '' || route.query?.q?.toString()) { searchTerm.value = route.query?.q?.toString(); @@ -593,6 +530,30 @@ onMounted(async () => { onUnmounted(() => { queryStore.reset(); }); + +/* + * Search + */ +const searchBarRef = ref(); +const terms = ref([]); + +async function updateRelatedTerms(query?: string) { + if (query || query === '') terms.value = await getRelatedTerms(query); +} + +function searchByExampleModalToggled() { + // TODO + // toggle the search by example modal represented by the component search-by-example + // which may be used as follows + /* + + */ +} diff --git a/packages/client/hmi-client/src/page/data-explorer/components/tera-filter-bar.vue b/packages/client/hmi-client/src/page/data-explorer/components/tera-filter-bar.vue index 5316c7bd6e..b297b3eaec 100644 --- a/packages/client/hmi-client/src/page/data-explorer/components/tera-filter-bar.vue +++ b/packages/client/hmi-client/src/page/data-explorer/components/tera-filter-bar.vue @@ -1,5 +1,5 @@