From 72541c8f9f752e0322d98c591cbc997b27e84242 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Fri, 8 Mar 2024 16:37:04 +0100 Subject: [PATCH 1/5] Kup-card-layout --- .../components/kup-card/built-in/kup-card-built-in-2.scss | 1 - .../components/kup-card/standard/kup-card-standard-12.scss | 3 ++- .../components/kup-card/standard/kup-card-standard-14.scss | 3 +++ .../components/kup-card/standard/kup-card-standard-15.scss | 5 +++++ 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss index 0da6420150..9f75e9bb48 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss @@ -1,6 +1,5 @@ .built-in-layout-2 { background-color: var(--kup-background-color); - border-radius: 4px; box-sizing: border-box; box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6); diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss index 555a06c3a6..84975a8331 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss @@ -21,7 +21,7 @@ flex-direction: column; &.has-content { border-bottom: 1px solid var(--kup-border-color); - padding: 0.5em 0.5em; + padding: var(--kup-space-05); } kup-date-picker:first-of-type, kup-time-picker:first-of-type { @@ -35,6 +35,7 @@ flex-direction: column; max-height: 20vh; overflow: auto; + padding: var(--kup-space-05); kup-checkbox { margin-left: 0; margin-right: auto; diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss index 7429feee42..c13f4e41be 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss @@ -53,6 +53,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + @include kup-heading-02; &:hover { text-decoration: underline; @@ -70,11 +71,13 @@ margin-right: 0.75em; min-width: max-content; width: auto; + @include kup-body-compact-01; } .value { font-weight: 600; width: 100%; + @include kup-heading-compact-01; } } } diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss index 036dee1f1e..41cd1c76d1 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss @@ -54,6 +54,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + @include kup-heading-02; &:hover { text-decoration: underline; @@ -71,11 +72,13 @@ margin-right: 0.75em; min-width: max-content; width: auto; + @include kup-body-compact-01; } .value { font-weight: 600; width: 100%; + @include kup-heading-compact-01; } } } @@ -112,6 +115,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + @include kup-body-compact-01; } &__value { @@ -122,6 +126,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + @include kup-heading-compact-01; } } From 14eeec3f8a3f24852e5ef7f203c923969af934ea Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Fri, 8 Mar 2024 16:37:16 +0100 Subject: [PATCH 2/5] Kup-progress-bar --- .../f-components/f-progress-bar/f-progress-bar.scss | 6 +++--- packages/ketchup/src/progress-bar.html | 10 ++++++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss b/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss index 29bd819383..054e8ab14d 100644 --- a/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss +++ b/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss @@ -30,7 +30,7 @@ ); --kup_progressbar_track_background_color: var( --kup-progressbar-track-background-color, - var(--kup-gray-color-10) + var(--kup-gray-color-20) ); --kup_progressbar_width: var(--kup-progressbar-width, 100%); @@ -156,8 +156,8 @@ cursor: default; display: block; font-size: 0.25em; - left: 0.4em; - line-height: 2.75em; + left: 0.6em; + line-height: 3em; position: absolute; right: 0.4em; text-align: center; diff --git a/packages/ketchup/src/progress-bar.html b/packages/ketchup/src/progress-bar.html index 77ec277b7e..ca436305b3 100644 --- a/packages/ketchup/src/progress-bar.html +++ b/packages/ketchup/src/progress-bar.html @@ -20,9 +20,15 @@ +
-
+ + + From 69cc169140752e400d2060d31bd25317042123ff Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Thu, 14 Mar 2024 17:03:10 +0100 Subject: [PATCH 3/5] Kup-card : dash layout plus --- packages/ketchup/src/card.html | 7 ++ .../scalable/kup-card-scalable-10.scss | 34 ++---- .../kup-card/scalable/kup-card-scalable.tsx | 100 ++++++++++++++++-- 3 files changed, 111 insertions(+), 30 deletions(-) diff --git a/packages/ketchup/src/card.html b/packages/ketchup/src/card.html index b1ab673bca..9cc95a3bd4 100644 --- a/packages/ketchup/src/card.html +++ b/packages/ketchup/src/card.html @@ -301,6 +301,13 @@

Scalable layouts

size-x="300px" size-y="300px" > +

Dialog layouts

2 ? component.data.color[2] : `var(${KupThemeColorValues.TEXT})`; + //Icon + const imageArray: GenericObject[] = component.data['image'] + ? component.data['image'] + : []; + //Image color + + const colorArray: string[] = component.data['color'] + ? component.data['color'] + : []; // Main text const mainText = component.data.text && component.data.text.length > 0 ? component.data.text[0] : null; + // Sub text const subText = component.data.text && component.data.text.length > 1 @@ -647,12 +657,88 @@ export function create10(component: KupCard): VNode { class={`scalable-layout-${component.layoutNumber}`} style={CSSVariables} > -
-
-
-
-
{mainText}
-
{subText}
+
+
+
{mainText}
+
+
+
+ {imageArray[0] ? ( + + ) : null} +
+
+
{subText}
+
+
+
+
+ ); +} + +/** + * 11th scalable card layout, icon with title and subtitle. + * @param {KupCard} component - Card component. + * @returns {VNode} 8th scalable layout virtual node. + */ +export function create11(component: KupCard): VNode { + //Image color + const colorArray: string[] = component.data['color'] + ? component.data['color'] + : []; + //Icon + const imageArray: GenericObject[] = component.data['image'] + ? component.data['image'] + : []; + //Title, subtitle + let textIndex: number = 0; + const textArray: string[] = component.data['text'] + ? component.data['text'] + : []; + return ( +
+
+
+ {imageArray[0] ? ( + + ) : null} +
+
+
+ {textArray[textIndex] ? textArray[textIndex] : ''} +
+
+
+
+ {textArray[++textIndex] ? textArray[textIndex] : ''}
From 1da1fc0b2a806650cc997874e25cc6c5dac471ec Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Wed, 20 Mar 2024 15:01:30 +0100 Subject: [PATCH 4/5] generali fixes --- .DS_Store | Bin 0 -> 6148 bytes packages/.DS_Store | Bin 0 -> 6148 bytes packages/ketchup/src/chart.html | 9 ++-- .../kup-box/styles/kup-box-main.scss | 6 +-- .../standard/kup-card-standard-14.scss | 5 +- .../kup-data-table/kup-data-table.tsx | 2 +- .../styles/kup-data-table-main.scss | 49 +++++++++++------- .../styles/kup-data-table-sticky-header.scss | 2 +- .../kup-tree/styles/kup-tree-main.scss | 11 ++-- .../f-components/f-checkbox/f-checkbox.scss | 13 +++-- .../f-components/f-checkbox/f-checkbox.tsx | 4 +- .../src/managers/kup-theme/themes.json | 10 +++- 12 files changed, 69 insertions(+), 42 deletions(-) create mode 100644 .DS_Store create mode 100644 packages/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..b64458dbf1b37fdeacc7a2724ec3061759958363 GIT binary patch literal 6148 zcmeHKJE{Uf5bRci1rtNVxq>$sL{H!a-g_zr3JPMrk>~PgR)2UXyMl>{R6}>o^mNU# z6>M*dh|VvYnaD&$8n~fcEp*M!%{w;8i~`}f<5zaFmGkDjK6I-46UJ@i1m;@ykNm&m z@!dQ6Z)TPXPys4H1*iZO=u^OYFRU2{GExC5Kn4C4uP1mkY>o4p*akWsd8Y&UGhn*VsKBQcxC6qp6>R_j literal 0 HcmV?d00001 diff --git a/packages/.DS_Store b/packages/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..353dd0c3ece8ccfdd660856ef0bc3843db837c0d GIT binary patch literal 6148 zcmeHKOKL(v5Ufsw2yR?vIakOH1~Dh_0umJh5ey{m-^z34XjXp~k(carkx&giHPh2I z!_?ySYXG)5Zl8cTfGOP(Cm+V<`|cyVtB4WlJmVEdyl+1?`Lj3PX~u+0f-ZZ!#Iy# zg4jGj?1e)jBQ#4YF{xH9h9#ZxR(ZW}NK87cnh&d+tvVEo+j)MAbXZT+C literal 0 HcmV?d00001 diff --git a/packages/ketchup/src/chart.html b/packages/ketchup/src/chart.html index 3e5566dd67..fd1dbac7ec 100644 --- a/packages/ketchup/src/chart.html +++ b/packages/ketchup/src/chart.html @@ -44,6 +44,11 @@ +
@@ -104,13 +109,11 @@

Stacked series

Combo chart

- +

Timeline chart

- - diff --git a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss index 684fe56da5..1649389239 100644 --- a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss +++ b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss @@ -58,10 +58,10 @@ .box-wrapper { display: flex; align-items: center; - background-color: var(--kup_box_background_color); - border-radius: var(--kup-radius-00); .box { + background-color: var(--kup_box_background_color); + border-radius: var(--kup-radius-00); flex-grow: 1; cursor: pointer; position: relative; @@ -84,7 +84,7 @@ } &.selected { - background-color: var(---kup_box_background_color_hover); + background-color: var(--kup_box_background_color_hover); & .box-section.titled > h3 { background-color: transparent; diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss index c13f4e41be..809270ec4a 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss @@ -108,7 +108,7 @@ } .sub-formula { - padding: 0.5em; + padding: 0.5em 0; } .sub-chip { @@ -120,9 +120,10 @@ .sub-field { display: flex; flex-direction: column; + gap: var(--kup-space-03); &.has-content { border-bottom: 1px solid var(--kup-border-color); - padding: 0.5em 0.5em; + padding: 0.5em 0; } kup-date-picker:first-of-type, kup-time-picker:first-of-type { diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx index 73b4b56825..c12de76fc4 100644 --- a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx +++ b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx @@ -5749,7 +5749,7 @@ export class KupDataTable { ) : null} {this.insertMode !== '' ? ( { if (this.insertMode === 'form') { diff --git a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss index c04eddcaf8..5958a2658b 100644 --- a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss +++ b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-main.scss @@ -67,6 +67,15 @@ 3px ); + --kup_datatable_background_color_hover: var( + --kup-datatable-background-color-hover, + var(--kup-gray-color-20) + ); + --kup_datatable_text_color_hover: var( + --kup-datatable-background-color-hover, + var(--kup-gray-color-80) + ); + display: block; font-family: var(--kup_datatable_font_family); font-size: var(--kup_datatable_font_size); @@ -111,7 +120,7 @@ table { &[#{$kup-dd-drag-over}] { td { &:first-of-type { - box-shadow: inset 4px 0px 0px 0px var(--kup-secondary-color); + box-shadow: inset 4px 0px 0px 0px var(--kup-gray-color-30); } } } @@ -157,22 +166,24 @@ table { } tfoot { - td { - border-bottom: var(--kup_datatable_border); - border-right: var(--kup_datatable_border); - box-sizing: border-box; - height: 36px; - text-align: right; - font-weight: bold; - padding: 0.5em 0.6em; - &:hover { - background-color: var(--kup_datatable_background_color); - } - &:first-of-type { - // border-left: var(--kup_datatable_border); - } - &:last-of-type { - border-right: none; + tr { + td { + border-bottom: var(--kup_datatable_border); + border-right: var(--kup_datatable_border); + box-sizing: border-box; + height: 36px; + text-align: right; + font-weight: bold; + padding: 0.5em 0.6em; + &:hover { + background-color: var(--kup_datatable_background_color); + } + &:first-of-type { + // border-left: var(--kup_datatable_border); + } + &:last-of-type { + border-right: none; + } } } } @@ -370,8 +381,8 @@ tbody { &:hover:not(.group):not(.selected) { td { - color: var(--kup-hover-color); - background-color: var(--kup-hover-background-color); + color: var(--kup_datatable_text_color_hover); + background-color: var(--kup_datatable_background_color_hover); } } diff --git a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-sticky-header.scss b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-sticky-header.scss index 14d3ffc45e..9a9d14e5aa 100644 --- a/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-sticky-header.scss +++ b/packages/ketchup/src/components/kup-data-table/styles/kup-data-table-sticky-header.scss @@ -5,7 +5,7 @@ sticky-header { .persistent-header { & ~ sticky-header { background: var(--kup-gray-color-20); - box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5); + // box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5); color: var(--kup-title-color); display: block; opacity: 0; diff --git a/packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss b/packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss index d647fb2c84..04ad1b87a2 100644 --- a/packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss +++ b/packages/ketchup/src/components/kup-tree/styles/kup-tree-main.scss @@ -40,7 +40,6 @@ var(--kup-gray-color-30) ); - --kup_tree_border: var(--kup-tree-border, 1px solid var(--kup-border-color)); --kup_tree_text_color: var(--kup-tree-text-color, var(--kup-gray-color-70)); --kup_tree_header_text_color: var( --kup-tree-header-text-color, @@ -301,8 +300,8 @@ tfoot { td { - border-bottom: var(--kup_tree_border); - border-right: var(--kup_tree_border); + border-bottom: solid 1px var(--kup_tree_border_color); + border-right: solid 1px var(--kup_tree_border_color); box-sizing: border-box; height: 36px; text-align: right; @@ -313,7 +312,7 @@ tfoot { } &:first-of-type { border: none; - border-right: var(--kup_tree_border); + border-right: solid 1px var(--kup_tree_border_color); } } } @@ -339,8 +338,8 @@ tfoot { display: table-header-group; tr { - border-left: var(--kup_tree_border); - border-right: var(--kup_tree_border); + border-left: solid 1px var(--kup_tree_border_color); + border-right: solid 1px var(--kup_tree_border_color); th span { @include kup-heading-compact-01; } diff --git a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss index cfaba3f16d..41e198ccb3 100644 --- a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss +++ b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss @@ -1,4 +1,9 @@ .f-checkbox { + --kup_danger_icon_color: var(--kup-danger-color, var(--kup-danger-color-50)); + --kup_warning_icon_color: var( + --kup-warning-color, + var(--kup-warning-color-40) + ); --kup_checkbox_disabled_checkmark_color: var( --kup-checkbox-disabled-checkmark-color, var(--kup-gray-color-10) @@ -214,7 +219,7 @@ } } .checkbox__error-message { - color: var(--kup-accent-red-color); + color: var(--kup_danger_icon_color); } } } @@ -233,17 +238,17 @@ } .checkbox__error-message { - color: var(--kup-accent-red-color); + color: var(--kup_danger_icon_color); } &.checkbox--error { .checkbox__background { - border-color: var(--kup-accent-red-color); + border-color: var(--kup_danger_icon_color); } } &.#{$kup-class-danger} { - --kup-checkbox-primary-color: var(--kup-danger-color); + --kup-checkbox-primary-color: var(--kup_danger_icon_color); --kup-checkbox-primary-color-rgb: var(--kup-danger-color-rgb); --kup-checkbox-text-on-primary-color: white; --kup-checkbox-text-on-primary-color-rgb: 255, 255, 255; diff --git a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.tsx b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.tsx index 5976da1c12..eed5ce2548 100644 --- a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.tsx +++ b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.tsx @@ -24,8 +24,8 @@ export const FCheckbox: FunctionalComponent = ( const propsFImage: FImageProps = { color: props.error - ? `var(--kup-accent-red-color)` - : `var(--kup-accent-orange-color)`, + ? `var(--kup_danger_icon_color)` + : `var(--kup_warning_icon_color)`, resource: props.error ? 'error' : 'warning', sizeX: '1.15em', sizeY: '1.15em', diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json index 51afe7daa2..7321244b60 100644 --- a/packages/ketchup/src/managers/kup-theme/themes.json +++ b/packages/ketchup/src/managers/kup-theme/themes.json @@ -24,7 +24,15 @@ "--kup-gray-color-80": "#393939", "--kup-gray-color-90": "#262626", "--kup-gray-color-100": "#161616", - "--kup-danger-color-10": "da inserire il codice per il kup danger colors", + "--kup-danger-color-50": "#fa4d56", + "--kup-danger-color-60": "#da1e28", + "--kup-danger-color-70": "#ba1b23", + "--kup-danger-color-80": "#750e13", + "--kup-success-color-40": "#42be65", + "--kup-success-color-60": "#198038", + "--kup-info-color-50": "#4589ff", + "--kup-info-color-70": "#0043ce", + "--kup-warning-color-40": "#f1c21b", "--kup-background-color": "#ffffff", "--kup-navbar-background-color": "#161616", "--kup-navbar-color": "#ffffff", From 60da2b3502a83d3c62891a5d7abd8a2439461e26 Mon Sep 17 00:00:00 2001 From: Leonardo-Signorelli Date: Wed, 20 Mar 2024 15:01:45 +0100 Subject: [PATCH 5/5] kup-image-list : redesign p1 --- .../styles/kup-image-list-main.scss | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss index 732b02027c..0fe41edf6d 100644 --- a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss +++ b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss @@ -21,16 +21,14 @@ ); --kup_imagelist_columns: var(--kup-imagelist-columns, 4); --kup_imagelist_grid_gap: var(--kup-imagelist-grid-gap, 0.5em); - --kup_imagelist_image_margin: var(--kup-imagelist-image-margin, 1em auto); - --kup_imagelist_image_min_height: var(--kup-imagelist-image-min-height, 64px); + --kup_imagelist_image_min_height: var( + --kup-imagelist-image-min-height, + var(--kup-space-09) + ); --kup_imagelist_item_border_radius: var( --kup-imagelist-item-border-radius, var(--kup-radius-00) ); - --kup_imagelist_box_shadow_hover: var( - --kup-box-box-shadow-hover, - 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5) - ); --kup_imagelist_item_height: var(--kup-imagelist-item-height, auto); --kup_imagelist_item_padding: var(--kup-imagelist-item-padding, 0); --kup_imagelist_item_width: var(--kup-imagelist-item-width, auto); @@ -106,14 +104,11 @@ } &__label { - font-size: 1.2em; - font-weight: bold; - letter-spacing: 0.12em; overflow: hidden; - padding: 0 0.5em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; + @include kup-body-compact-01; } } } @@ -132,6 +127,9 @@ .f-cell { height: 100%; width: 100%; + .f-cell__content .image-list__wrapper { + padding: var(--kup-space-03); + } } &__item { @@ -142,12 +140,12 @@ padding: var(--kup_imagelist_item_padding); width: var(--kup_imagelist_item_width); &:hover { - box-shadow: var(--kup_imagelist_box_shadow_hover); + background-color: var(--kup-gray-color-20); } } &__image.f-image { - margin: var(--kup_imagelist_image_margin); + margin-bottom: var(--kup-space-03); .f-image__icon { min-height: var(--kup_imagelist_image_min_height); @@ -155,11 +153,9 @@ } &__label { - color: var(--kup_imagelist_text_color); - letter-spacing: 0.12em; - margin: var(--kup_imagelist_label_margin); overflow: hidden; text-align: center; text-overflow: ellipsis; + @include kup-label-01; } }