From df2d041e3a05104bc12760eae73ce6446ec45a2e Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Thu, 28 Apr 2022 16:18:04 +0300 Subject: [PATCH 1/4] feat(ui5-upload-collection): visual adjustments --- packages/base/hash.txt | 2 +- packages/fiori/src/UploadCollectionItem.hbs | 17 ++++++++- .../fiori/src/themes/UploadCollectionItem.css | 38 +++++++++++-------- .../base/UploadCollection-parameters.css | 3 ++ .../UploadCollection-parameters.css | 7 ++++ .../themes/sap_horizon/parameters-bundle.css | 2 +- .../UploadCollection-parameters.css | 7 ++++ .../sap_horizon_dark/parameters-bundle.css | 2 +- .../UploadCollection-parameters.css | 3 ++ .../UploadCollection-parameters.css | 3 ++ 10 files changed, 64 insertions(+), 20 deletions(-) create mode 100644 packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css create mode 100644 packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css diff --git a/packages/base/hash.txt b/packages/base/hash.txt index c30373c6e622..ff9e1239c23b 100644 --- a/packages/base/hash.txt +++ b/packages/base/hash.txt @@ -1 +1 @@ -6uF3armWsQqj6RlvG7f/WVGVIdc= \ No newline at end of file +ooLPAyUBPPRlCOItS5Rb21ikAaw= \ No newline at end of file diff --git a/packages/fiori/src/UploadCollectionItem.hbs b/packages/fiori/src/UploadCollectionItem.hbs index 6c2bcddbf4fd..3fc765cc91a6 100644 --- a/packages/fiori/src/UploadCollectionItem.hbs +++ b/packages/fiori/src/UploadCollectionItem.hbs @@ -1,5 +1,7 @@ {{>include "../../main/src/ListItem.hbs"}} +{{#*inline "selectionElement"}}{{/inline}} + {{#*inline "listItemContent"}}
@@ -22,7 +24,7 @@ {{#if fileNameClickable}} {{fileName}} {{else}} - {{fileName}} + {{fileName}} {{/if}} {{/if}}
@@ -90,6 +92,19 @@ > {{/if}} + + {{#if renderDeleteButton}} + + {{/if}} {{/if}}
diff --git a/packages/fiori/src/themes/UploadCollectionItem.css b/packages/fiori/src/themes/UploadCollectionItem.css index 916eea620048..28224404ad51 100644 --- a/packages/fiori/src/themes/UploadCollectionItem.css +++ b/packages/fiori/src/themes/UploadCollectionItem.css @@ -59,17 +59,18 @@ } .ui5-uci-file-name { - width: 100%; - display: block; font-family: "72override", var(--sapFontFamily); font-size: var(--sapFontLargeSize); - color: var(--sapTextColor); margin-bottom: 0.25rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } +.ui5-uci-file-name-text { + color: var(--sapList_TextColor); +} + [ui5-link].ui5-uci-file-name { pointer-events: all; } @@ -111,19 +112,13 @@ .ui5-uci-edit-buttons { pointer-events: all; - margin-left: 1rem; + margin-inline-start: 1rem; } .ui5-uci-edit-rename-btn { margin-right: 0.125rem; } -/* Progress Box */ -.ui5-uci-progress-box { - width: 20%; - min-width: 4rem; -} - @media(max-width: 30rem) { .ui5-uci-content-and-edit-container { display: block; @@ -142,14 +137,13 @@ width: 100%; } - .ui5-uci-edit-buttons, - .ui5-li-detailbtn, - .ui5-li-deletebtn { - margin-top: 0.75rem; + .ui5-uci-edit-buttons { + margin-inline-start: 0; + margin-block-start: var(--ui5_upload_collection_small_size_buttons_margin_block_start); } - .ui5-uci-edit-buttons { - margin-left: 0; + .ui5-uci-edit-buttons [ui5-button] { + margin-block-end: var(--ui5_upload_collection_button_margin_block_end); } } @@ -164,3 +158,15 @@ display: flex; justify-content: space-between; } + +[ui5-button] { + margin-inline: 0.5rem; +} + +[ui5-button]:first-of-type { + margin-inline-start: 0; +} + +[ui5-button]:last-of-type { + margin-inline-end: var(--ui5_upload_collection_last_button_inline_end); +} diff --git a/packages/fiori/src/themes/base/UploadCollection-parameters.css b/packages/fiori/src/themes/base/UploadCollection-parameters.css index e78985ecade9..9686026a484f 100644 --- a/packages/fiori/src/themes/base/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/base/UploadCollection-parameters.css @@ -2,4 +2,7 @@ --ui5_upload_collection_drag_overlay_border: 0.125rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.125rem solid var(--sapContent_DragAndDropActiveColor); --ui5_upload_collection_drop_overlay_background: transparent; + --ui5_upload_collection_button_margin_block_end: 0; + --ui5_upload_collection_last_button_inline_end: 0; + --ui5_upload_collection_small_size_buttons_margin_block_start: 0.75rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css new file mode 100644 index 000000000000..f504586df9e2 --- /dev/null +++ b/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css @@ -0,0 +1,7 @@ +@import "../base/UploadCollection-parameters.css"; + +:root { + --ui5_upload_collection_button_margin_block_end: 2px; + --ui5_upload_collection_last_button_inline_end: 2px; + --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css index 3290504f2fc5..4f41d73924fc 100644 --- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css @@ -8,7 +8,7 @@ @import "./ShellBar-parameters.css"; @import "./TimelineItem-parameters.css"; @import "./SideNavigation-parameters.css"; -@import "../base/UploadCollection-parameters.css"; +@import "./UploadCollection-parameters.css"; @import "../base/ViewSettingsDialog-parameters.css"; @import "./Wizard-parameters.css"; @import "./WizardTab-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css new file mode 100644 index 000000000000..f504586df9e2 --- /dev/null +++ b/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css @@ -0,0 +1,7 @@ +@import "../base/UploadCollection-parameters.css"; + +:root { + --ui5_upload_collection_button_margin_block_end: 2px; + --ui5_upload_collection_last_button_inline_end: 2px; + --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css index 3290504f2fc5..4f41d73924fc 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css @@ -8,7 +8,7 @@ @import "./ShellBar-parameters.css"; @import "./TimelineItem-parameters.css"; @import "./SideNavigation-parameters.css"; -@import "../base/UploadCollection-parameters.css"; +@import "./UploadCollection-parameters.css"; @import "../base/ViewSettingsDialog-parameters.css"; @import "./Wizard-parameters.css"; @import "./WizardTab-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css index a8a841cacc59..5b91ba85f8ef 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css @@ -6,4 +6,7 @@ --ui5_upload_collection_drop_overlay_background: transparent; --ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor); --ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor); + --ui5_upload_collection_button_margin_block_end: 2px; + --ui5_upload_collection_last_button_inline_end: 2px; + --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css index f34277975a57..cde62472a8b4 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css @@ -5,4 +5,7 @@ --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); --ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor); --ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor); + --ui5_upload_collection_button_margin_block_end: 2px; + --ui5_upload_collection_last_button_inline_end: 2px; + --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; } \ No newline at end of file From e0a41fe7272abd6a314f1caeeb474700fe8c9573 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Fri, 29 Apr 2022 11:08:14 +0300 Subject: [PATCH 2/4] feat(ui5-upload-collection): visual adjustments --- packages/base/hash.txt | 2 +- packages/fiori/src/themes/UploadCollectionItem.css | 6 ++++++ .../themes/sap_fiori_3_hcb/UploadCollection-parameters.css | 2 -- .../themes/sap_fiori_3_hcw/UploadCollection-parameters.css | 2 -- .../themes/sap_horizon_hcb/UploadCollection-parameters.css | 2 -- .../themes/sap_horizon_hcw/UploadCollection-parameters.css | 2 -- packages/theming/hash.txt | 2 +- 7 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/base/hash.txt b/packages/base/hash.txt index 923a883279a3..acfed17da040 100644 --- a/packages/base/hash.txt +++ b/packages/base/hash.txt @@ -1 +1 @@ -mUCRKUiEewx+UyYrPGkfoYy4H4I= \ No newline at end of file +DUvg7ZS310t+aEyIwnSRd8Wk4KY= \ No newline at end of file diff --git a/packages/fiori/src/themes/UploadCollectionItem.css b/packages/fiori/src/themes/UploadCollectionItem.css index 28224404ad51..6e7700bf22de 100644 --- a/packages/fiori/src/themes/UploadCollectionItem.css +++ b/packages/fiori/src/themes/UploadCollectionItem.css @@ -84,6 +84,12 @@ } /* Edit mode */ + +.ui5-uci-edit-container { + display: flex; + align-items: center; +} + .ui5-uci-edit-container [ui5-input] { width: 60%; pointer-events: all; diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcb/UploadCollection-parameters.css index a8a841cacc59..e635bd9a99d1 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcb/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcb/UploadCollection-parameters.css @@ -4,6 +4,4 @@ --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); --ui5_upload_collection_drop_overlay_background: transparent; - --ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor); - --ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor); } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcw/UploadCollection-parameters.css index f34277975a57..24c88b60f303 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcw/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcw/UploadCollection-parameters.css @@ -3,6 +3,4 @@ :root { --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); - --ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor); - --ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor); } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css index 5b91ba85f8ef..743a58be3118 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css @@ -4,8 +4,6 @@ --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); --ui5_upload_collection_drop_overlay_background: transparent; - --ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor); - --ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor); --ui5_upload_collection_button_margin_block_end: 2px; --ui5_upload_collection_last_button_inline_end: 2px; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; diff --git a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css index cde62472a8b4..7c3f439e2931 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css @@ -3,8 +3,6 @@ :root { --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); - --ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor); - --ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor); --ui5_upload_collection_button_margin_block_end: 2px; --ui5_upload_collection_last_button_inline_end: 2px; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; diff --git a/packages/theming/hash.txt b/packages/theming/hash.txt index 14ef08f4a7b3..fcfe007453b3 100644 --- a/packages/theming/hash.txt +++ b/packages/theming/hash.txt @@ -1 +1 @@ -jTxjP4q8ZYzq4ZcbwLrh2rt5ZuI= \ No newline at end of file +nVDITlsbNpjqxPOZcH0r7oboURo= \ No newline at end of file From b0d791db0bee3ae97540324c3f819f2dade9f5a7 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Fri, 29 Apr 2022 14:49:08 +0300 Subject: [PATCH 3/4] feat(ui5-upload-collection): fixed tests --- packages/fiori/src/UploadCollectionItem.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fiori/src/UploadCollectionItem.hbs b/packages/fiori/src/UploadCollectionItem.hbs index 3fc765cc91a6..09dd339889e4 100644 --- a/packages/fiori/src/UploadCollectionItem.hbs +++ b/packages/fiori/src/UploadCollectionItem.hbs @@ -95,6 +95,7 @@ {{#if renderDeleteButton}} Date: Fri, 29 Apr 2022 15:08:03 +0300 Subject: [PATCH 4/4] feat(ui5-upload-collection): fixed text ellipsis --- packages/fiori/src/themes/UploadCollectionItem.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/fiori/src/themes/UploadCollectionItem.css b/packages/fiori/src/themes/UploadCollectionItem.css index 6e7700bf22de..dca12f72ce15 100644 --- a/packages/fiori/src/themes/UploadCollectionItem.css +++ b/packages/fiori/src/themes/UploadCollectionItem.css @@ -59,6 +59,7 @@ } .ui5-uci-file-name { + display: block; font-family: "72override", var(--sapFontFamily); font-size: var(--sapFontLargeSize); margin-bottom: 0.25rem; @@ -81,6 +82,8 @@ font-size: var(--sapFontMediumSize); color: var(--sapContent_LabelColor); white-space: initial; + overflow: hidden; + text-overflow: ellipsis; } /* Edit mode */