Skip to content

Commit 03c0b29

Browse files
dbulatovicx32dbulatovicx32
committed
layout and style updates
- include new developments in the general settings - update background and card styling for editor
1 parent cc82f9f commit 03c0b29

19 files changed

Lines changed: 485 additions & 458 deletions

File tree

‎src/assets/scss/base/_common.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,3 +271,6 @@ body {
271271
}
272272
}
273273
}
274+
.kn-background {
275+
background-color: var(--kn-color-background);
276+
}

‎src/assets/scss/utils/_variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
--kn-color-warning: #fbc53d;
1313
--kn-color-warning-alpha: #fbc53d84;
1414
--kn-color-error: #d32f2f;
15+
--kn-color-background: #f6f6f6;
1516

1617
// FONTS
1718
--kn-font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;

‎src/modules/documentExecution/dashboard/generalSettings/DashboardCrossNavigation.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<q-layout view="hHh lpR fFf" container style="height: 100%; overflow: hidden">
33
<q-page-container>
44
<q-page class="row" style="position: unset">
5-
<q-drawer v-model="drawerVisible" side="left" :width="400" :breakpoint="0" show-if-above class="column no-wrap">
5+
<q-drawer v-model="drawerVisible" side="left" :width="300" :breakpoint="0" show-if-above class="column no-wrap">
66
<q-toolbar class="kn-toolbar kn-toolbar--secondary">
77
<q-toolbar-title>{{ $t('managers.crossNavigationManagement.title') }}</q-toolbar-title>
88
<KnFabButton icon="fas fa-plus" data-test="new-button" @click="showForm(-1)" />

‎src/modules/documentExecution/dashboard/generalSettings/DashboardGeneralSettings.vue‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
</template>
99
</Toolbar>
1010

11-
<div class="datasetEditor-container">
11+
<div class="datasetEditor-container kn-background">
1212
<DashboardGeneralSettingsList :dashboard-model-prop="dashboardModel" :selected="selectedOption" @selected-option="setSelectedOption"></DashboardGeneralSettingsList>
13-
<div v-if="selectedOption !== 'Custom Header'" class="general-settings-content">
13+
<div v-if="selectedOption !== 'Custom Header' && selectedOption !== 'CrossNavigation'" class="general-settings-content">
1414
<div class="general-settings-panel-wrapper">
1515
<KnHint v-if="!selectedOption || selectedOption === 'General'" class="p-as-center" :title="'common.settings'" :hint="'dashboard.widgetEditor.settings.hint'"></KnHint>
16-
<q-list v-else-if="selectedOption !== 'Custom Header'" class="general-settings-accordion" bordered>
16+
<q-card v-else class="q-ma-sm">
1717
<q-expansion-item v-model="accordionOpen" :label="selectedOptionLabel" header-class="general-settings-accordion-header">
1818
<DashboardVariables v-if="selectedOption === 'Variables'" :dashboard-id="dashboardId" :prop-variables="variables" :selected-datasets="selectedDatasets" :selected-datasets-columns-map="selectedDatasetColumnsMap" :profile-attributes="profileAttributes" />
1919
<DashboardInformation v-if="selectedOption === 'Information'" :dashboard-model-prop="dashboardModel" />
@@ -23,20 +23,19 @@
2323
<DashboardThemes v-if="isEnterprise && selectedOption === 'Themes'" :dashboard-model-prop="dashboardModel" />
2424
<AiSettings v-if="isEnterprise && selectedOption === 'aisettings'" :dashboard-model-prop="dashboardModel" @change="setAiModel" />
2525
</q-expansion-item>
26-
</q-list>
26+
</q-card>
2727
</div>
2828
</div>
29-
<div v-if="customHeaderWidgetEditorVisible && customHeaderWidget" class="p-d-flex p-flex-column kn-flex q-ma-md" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px">
29+
<div v-if="customHeaderWidgetEditorVisible && customHeaderWidget" class="p-d-flex p-flex-column kn-flex q-ma-md" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px; background-color: white">
3030
<q-toggle v-model="menuWidgetsConfig.enableCustomHeader" :label="$t('dashboard.generalSettings.menuWidgets.enableCustomHeader')" />
3131
<q-separator />
3232
<WidgetEditor ref="widgetEditor" :dashboard-id="dashboardId" :datasets="datasets" :variables="variables" :prop-widget="customHeaderWidget" :class="{ 'editor-disabled': !menuWidgetsConfig.enableCustomHeader }"></WidgetEditor>
3333
</div>
3434
<AiSettings v-if="isEnterprise && selectedOption === 'aisettings'" :dashboard-model-prop="dashboardModel" @change="setAiModel" />
3535

36-
<!-- TODO: New field, adapt -->
37-
<div v-if="selectedOption === 'CrossNavigation'" class="p-d-flex p-flex-column kn-flex dashboard-card-shadow q-ma-md">
36+
<q-card v-if="selectedOption === 'CrossNavigation'" class="kn-flex q-ma-md column" style="overflow: hidden">
3837
<DashboardCrossNavigation ref="crossNavRef" :dashboard-id="dashboardId" />
39-
</div>
38+
</q-card>
4039
</div>
4140
</div>
4241
</template>
@@ -216,11 +215,7 @@ export default defineComponent({
216215
</style>
217216

218217
<style lang="scss">
219-
.general-settings-accordion {
220-
border-radius: 4px;
221-
222-
.general-settings-accordion-header {
223-
font-weight: 500;
224-
}
218+
.general-settings-accordion-header {
219+
font-weight: 500;
225220
}
226221
</style>

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditor.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535

3636
<q-page-container class="widget-page-container">
3737
<!-- with some ungodly hacking, this scroll area preserves the whole layout of the editor, i have no idea how it works -->
38-
<q-scroll-area :style="{ height: scrollAreaHeight }">
39-
<q-tab-panels v-model="activeTab" keep-alive class="kn-width-full kn-height-full column">
38+
<q-scroll-area class="kn-background" :style="{ height: scrollAreaHeight }">
39+
<q-tab-panels v-model="activeTab" keep-alive class="kn-width-full kn-height-full column kn-background">
4040
<q-tab-panel v-if="hasDataTab" name="data" class="column" style="max-width: 850px !important; justify-self: center">
4141
<MapWidgetLayersTab v-if="widget.type === 'map'" :prop-widget="widget" :datasets="datasets" :selected-datasets="selectedDatasets" :layers="layers" :variables="variables" :dashboard-id="dashboardId" :selected-layer="selectedLayer" @layerSelected="onLayerSelected" />
4242
<WidgetEditorDataTab v-else :prop-widget="widget" :selected-dataset="selectedDataset" :selected-dataset-columns="selectedDatasetColumns" :list-drag-active="listDragActive" data-test="data-tab" />

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/ChartWidget/chartJS/ChartJSWidgetSettingsAccordion.vue‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,32 @@
22
<div v-show="widgetModel">
33
<Message v-if="themePropertyChanged" class="p-p-2 p-m-4" severity="warn" :closable="false">{{ $t('dashboard.widgetEditor.themeChangedWarning') }}</Message>
44
<WidgetEditorThemePicker v-if="showThemePicker" :widget-model="widgetModel" :style-changed-flag="styleChangedFlag" @themeSelected="onThemeSelected"></WidgetEditorThemePicker>
5-
<q-list class="widget-editor-accordion" bordered separator>
6-
<q-expansion-item v-for="(accordion, index) in filteredSettings" :key="index" :model-value="activeIndex === index" expand-icon-class="col kn-width-full" @update:model-value="(val) => onExpansionChange(val, index)">
7-
<template #header>
8-
<ChartJSWidgetSettingsAccordionHeader :widget-model="widgetModel" :title="accordion.title" :type="accordion.type" @styleChanged="onStyleChanged"></ChartJSWidgetSettingsAccordionHeader>
9-
</template>
10-
<ChartJSLegendSettings v-if="accordion.type === 'Legend'" :widget-model="widgetModel"></ChartJSLegendSettings>
11-
<ChartJSTooltipSettings v-else-if="accordion.type === 'Tooltip'" :widget-model="widgetModel"></ChartJSTooltipSettings>
12-
<ChartColorSettings v-else-if="accordion.type === 'Colors'" :widget-model="widgetModel" :theme-style="null"></ChartColorSettings>
13-
<WidgetSelectionConfiguration v-else-if="accordion.type === 'SelectionConfiguration'" :widget-model="widgetModel"></WidgetSelectionConfiguration>
14-
<WidgetMenuConfiguration v-else-if="accordion.type === 'MenuConfiguration'" :widget-model="widgetModel"></WidgetMenuConfiguration>
15-
<WidgetExport v-else-if="accordion.type === 'Export'" :widget-model="widgetModel"></WidgetExport>
16-
<WidgetTitleStyle v-else-if="accordion.type === 'Title'" :widget-model="widgetModel" :theme-style="null" :toolbar-style-settings="settingsTabDescriptor.defaultToolbarStyleOptions" :dashboard-id="dashboardId" @styleChanged="onStyleChanged"></WidgetTitleStyle>
17-
<WidgetBackgroundColorStyle v-else-if="accordion.type === 'BackgroundColorStyle'" :widget-model="widgetModel" :theme-style="null" @styleChanged="onStyleChanged"></WidgetBackgroundColorStyle>
18-
<WidgetBordersStyle v-else-if="accordion.type === 'BordersStyle'" :widget-model="widgetModel" :theme-style="null" @styleChanged="onStyleChanged"></WidgetBordersStyle>
19-
<WidgetPaddingStyle v-else-if="accordion.type === 'PaddingStyle'" :widget-model="widgetModel" :theme-style="null" @styleChanged="onStyleChanged"></WidgetPaddingStyle>
20-
<WidgetShadowsStyle v-else-if="accordion.type === 'ShadowsStyle'" :widget-model="widgetModel" :theme-style="null" @styleChanged="onStyleChanged"></WidgetShadowsStyle>
21-
<WidgetResponsive v-else-if="accordion.type === 'Responsive'" :widget-model="widgetModel"></WidgetResponsive>
22-
<WidgetSelection v-else-if="accordion.type === 'Selection'" :widget-model="widgetModel"></WidgetSelection>
23-
<WidgetCrossNavigation v-else-if="accordion.type === 'CrossNavigation'" :widget-model="widgetModel" :datasets="datasets" :selected-datasets="selectedDatasets" :dashboard-id="dashboardId"></WidgetCrossNavigation>
24-
<WidgetInteractionsLinks v-else-if="accordion.type === 'Link'" :widget-model="widgetModel" :datasets="datasets" :selected-datasets="selectedDatasets" :dashboard-id="dashboardId"></WidgetInteractionsLinks>
25-
<WidgetPreview v-else-if="accordion.type === 'Preview'" :widget-model="widgetModel" :datasets="datasets" :selected-datasets="selectedDatasets" :dashboard-id="dashboardId"></WidgetPreview>
26-
<WidgetHelpSettings v-else-if="accordion.type === 'HelpSettings'" :widget-model="widgetModel"></WidgetHelpSettings>
27-
</q-expansion-item>
28-
</q-list>
5+
<q-card class="q-ma-sm">
6+
<q-list class="widget-editor-accordion" separator>
7+
<q-expansion-item v-for="(accordion, index) in filteredSettings" :key="index" :model-value="activeIndex === index" expand-icon-class="col kn-width-full" @update:model-value="(val) => onExpansionChange(val, index)">
8+
<template #header>
9+
<ChartJSWidgetSettingsAccordionHeader :widget-model="widgetModel" :title="accordion.title" :type="accordion.type" @styleChanged="onStyleChanged"></ChartJSWidgetSettingsAccordionHeader>
10+
</template>
11+
<ChartJSLegendSettings v-if="accordion.type === 'Legend'" :widget-model="widgetModel"></ChartJSLegendSettings>
12+
<ChartJSTooltipSettings v-else-if="accordion.type === 'Tooltip'" :widget-model="widgetModel"></ChartJSTooltipSettings>
13+
<ChartColorSettings v-else-if="accordion.type === 'Colors'" :widget-model="widgetModel" :theme-style="null"></ChartColorSettings>
14+
<WidgetSelectionConfiguration v-else-if="accordion.type === 'SelectionConfiguration'" :widget-model="widgetModel"></WidgetSelectionConfiguration>
15+
<WidgetMenuConfiguration v-else-if="accordion.type === 'MenuConfiguration'" :widget-model="widgetModel"></WidgetMenuConfiguration>
16+
<WidgetExport v-else-if="accordion.type === 'Export'" :widget-model="widgetModel"></WidgetExport>
17+
<WidgetTitleStyle v-else-if="accordion.type === 'Title'" :widget-model="widgetModel" :theme-style="null" :toolbar-style-settings="settingsTabDescriptor.defaultToolbarStyleOptions" :dashboard-id="dashboardId" @styleChanged="onStyleChanged"></WidgetTitleStyle>
18+
<WidgetBackgroundColorStyle v-else-if="accordion.type === 'BackgroundColorStyle'" :widget-model="widgetModel" :theme-style="null" @styleChanged="onStyleChanged"></WidgetBackgroundColorStyle>
19+
<WidgetBordersStyle v-else-if="accordion.type === 'BordersStyle'" :widget-model="widgetModel" :theme-style="null" @styleChanged="onStyleChanged"></WidgetBordersStyle>
20+
<WidgetPaddingStyle v-else-if="accordion.type === 'PaddingStyle'" :widget-model="widgetModel" :theme-style="null" @styleChanged="onStyleChanged"></WidgetPaddingStyle>
21+
<WidgetShadowsStyle v-else-if="accordion.type === 'ShadowsStyle'" :widget-model="widgetModel" :theme-style="null" @styleChanged="onStyleChanged"></WidgetShadowsStyle>
22+
<WidgetResponsive v-else-if="accordion.type === 'Responsive'" :widget-model="widgetModel"></WidgetResponsive>
23+
<WidgetSelection v-else-if="accordion.type === 'Selection'" :widget-model="widgetModel"></WidgetSelection>
24+
<WidgetCrossNavigation v-else-if="accordion.type === 'CrossNavigation'" :widget-model="widgetModel" :datasets="datasets" :selected-datasets="selectedDatasets" :dashboard-id="dashboardId"></WidgetCrossNavigation>
25+
<WidgetInteractionsLinks v-else-if="accordion.type === 'Link'" :widget-model="widgetModel" :datasets="datasets" :selected-datasets="selectedDatasets" :dashboard-id="dashboardId"></WidgetInteractionsLinks>
26+
<WidgetPreview v-else-if="accordion.type === 'Preview'" :widget-model="widgetModel" :datasets="datasets" :selected-datasets="selectedDatasets" :dashboard-id="dashboardId"></WidgetPreview>
27+
<WidgetHelpSettings v-else-if="accordion.type === 'HelpSettings'" :widget-model="widgetModel"></WidgetHelpSettings>
28+
</q-expansion-item>
29+
</q-list>
30+
</q-card>
2931
<q-item v-if="isSearchActive && filteredSettings.length === 0" class="q-pa-md">
3032
<q-item-section class="text-grey-6">{{ $t('common.info.noAvailableItems') }}</q-item-section>
3133
</q-item>

0 commit comments

Comments
 (0)