From e62ccc1ffb0b59544743efafab879272bdcc4d3f Mon Sep 17 00:00:00 2001 From: Aleksei Efremov Date: Wed, 25 Oct 2023 15:36:39 +0300 Subject: [PATCH 1/2] Right click menu styling --- css/apps/files-right-click.scss | 55 +++++++++++++++++++++++++++++++++ css/nmcstyle.scss | 1 + img/actions/cut-paste.svg | 7 +++++ src/icons.mjs | 1 + 4 files changed, 64 insertions(+) create mode 100644 css/apps/files-right-click.scss create mode 100644 img/actions/cut-paste.svg diff --git a/css/apps/files-right-click.scss b/css/apps/files-right-click.scss new file mode 100644 index 00000000..f9111859 --- /dev/null +++ b/css/apps/files-right-click.scss @@ -0,0 +1,55 @@ +@import '../_mixins.scss'; + +#rightClickMenu { + padding: 20px 8px; + ul li { + .menu-option { + gap: 8px; + padding: 8px 14px 8px 16px; + line-height: 26px; + span.icon { + padding: 26px 0 0 26px; + background-position: center; + background-size: 24px; + } + + // hide 'details' and 'edit locally' buttons + &.option-editlocally, &.option-details { + display: none; + } + + .icon.icon-download { + background-image: var(--icon-download-dark); + } + + .icon.icon-external { + background-image: var(--icon-cut-paste-dark); + } + + &:hover { + background-color: initial; + color: var(--telekom-color-text-and-icon-primary-standard); + .icon:not(.icon-starred) { + @include color-icon; + } + } + } + } +} + +// override global nextcloud hover styles +body .icon-delete:hover { + background-image: var(--icon-delete-dark); +} + +body .icon-starred:hover { + background-image: var(--icon-starred-yellow); +} + +body .icon-rename { + background-image: var(--icon-edit-dark); +} + +body .icon-favorite { + background-image: var(--icon-star-dark); +} diff --git a/css/nmcstyle.scss b/css/nmcstyle.scss index 3040267b..abe40ea3 100644 --- a/css/nmcstyle.scss +++ b/css/nmcstyle.scss @@ -47,6 +47,7 @@ @import 'apps/viewer.scss'; @import 'apps/media.scss'; @import 'apps/rich-workspace.scss'; +@import 'apps/files-right-click.scss'; /* v25 override */ @import 'v25/ncappnavigation.scss'; diff --git a/img/actions/cut-paste.svg b/img/actions/cut-paste.svg new file mode 100644 index 00000000..92dc8d9f --- /dev/null +++ b/img/actions/cut-paste.svg @@ -0,0 +1,7 @@ + + + /svg/icon/action/cut-paste/default + + + + \ No newline at end of file diff --git a/src/icons.mjs b/src/icons.mjs index f19a5a89..377d71dc 100644 --- a/src/icons.mjs +++ b/src/icons.mjs @@ -107,6 +107,7 @@ const icons = { 'toggle-filelist': path.join(__dirname, '../img', 'actions', 'toggle-filelist.svg'), 'toggle-pictures': path.join(__dirname, '../img', 'actions', 'toggle-pictures.svg'), restore: path.join(__dirname, '../img', 'actions', 'restore.svg'), + 'cut-paste': path.join(__dirname, '../img', 'actions', 'cut-paste.svg'), alert: path.join(__dirname, '../img', 'rich-workspace', 'warning.svg'), bold: path.join(__dirname, '../img', 'rich-workspace', 'bold.svg'), checklist: path.join(__dirname, '../img', 'rich-workspace', 'checklist.svg'), From 0321aa0693ab8f370f95c5477ce8ec70b248650e Mon Sep 17 00:00:00 2001 From: Aleksei Efremov Date: Wed, 25 Oct 2023 16:01:58 +0300 Subject: [PATCH 2/2] Use right click menu styles for '...' button popover --- css/apps/files-right-click.scss | 29 ++++++++++++++++++++++------- css/layouts/guestview.scss | 8 ++++---- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/css/apps/files-right-click.scss b/css/apps/files-right-click.scss index f9111859..b5acf26d 100644 --- a/css/apps/files-right-click.scss +++ b/css/apps/files-right-click.scss @@ -1,9 +1,10 @@ @import '../_mixins.scss'; -#rightClickMenu { +// add current style to right click menu and also to the '...' button in filetable +#rightClickMenu, .fileActionsMenu { padding: 20px 8px; ul li { - .menu-option { + .menu-option, .menuitem { gap: 8px; padding: 8px 14px 8px 16px; line-height: 26px; @@ -13,15 +14,11 @@ background-size: 24px; } - // hide 'details' and 'edit locally' buttons + // hide 'details' and 'edit locally' buttons in the right click menu &.option-editlocally, &.option-details { display: none; } - .icon.icon-download { - background-image: var(--icon-download-dark); - } - .icon.icon-external { background-image: var(--icon-cut-paste-dark); } @@ -37,6 +34,24 @@ } } +// style overrides for '...' button in filetable +#app-content-files { + .fileActionsMenu .menuitem { + padding: 8px 14px 8px 16px !important; + + .icon { + background-size: 24px; + } + + // Edit locally has an img instead of span + &.action-editlocally img{ + padding: 2px; + width: 26px; + height: 26px; + } + } +} + // override global nextcloud hover styles body .icon-delete:hover { background-image: var(--icon-delete-dark); diff --git a/css/layouts/guestview.scss b/css/layouts/guestview.scss index e63963eb..02b32709 100644 --- a/css/layouts/guestview.scss +++ b/css/layouts/guestview.scss @@ -30,10 +30,6 @@ $footer-height: 60px; $breakpoint-mobile: 1024px; $breakpoint-mobile-small: 480px; -body .icon-download { - background-image: var(--icon-download-white); -} - #body-public { #header .header-right { #header-primary-action { @@ -43,6 +39,10 @@ body .icon-download { } } + .icon-download { + background-image: var(--icon-download-white); + } + .app-files_sharing #app-content { position: fixed; height: var(--body-height);