diff options
author | John Molakvoæ <skjnldsv@protonmail.com> | 2022-05-10 17:47:48 +0300 |
---|---|---|
committer | John Molakvoæ <skjnldsv@protonmail.com> | 2022-05-11 00:24:06 +0300 |
commit | c59c3b5c1f8fba38d6b2e4bfd19714cb1f75ba85 (patch) | |
tree | 5ce2d8e17a8eb39f4493714a178a9164ad961840 /core | |
parent | f0f2a07f850af1105e27be5bc9180500b1dbac39 (diff) |
Migrate to static icons colours
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Diffstat (limited to 'core')
-rw-r--r-- | core/css/apps.scss | 21 | ||||
-rw-r--r-- | core/css/functions.scss | 64 | ||||
-rw-r--r-- | core/css/icons.scss | 371 | ||||
-rw-r--r-- | core/css/styles.scss | 2 | ||||
-rw-r--r-- | core/img/actions/change.svg | 1 | ||||
-rw-r--r-- | core/img/actions/recent.svg | 1 | ||||
-rw-r--r-- | core/img/actions/unshare.svg | 1 | ||||
-rw-r--r-- | core/img/apps/circles.svg | 1 | ||||
-rw-r--r-- | core/src/icons.js | 335 | ||||
-rw-r--r-- | core/src/jquery/css/jquery.ocdialog.scss | 2 | ||||
-rw-r--r-- | core/templates/layout.user.php | 2 |
11 files changed, 397 insertions, 404 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss index 8d753eb8d23..a9b20cfec2b 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -721,20 +721,16 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; #app-settings-header .settings-button { - display: block; + display: flex; + align-items: center; height: 44px; width: 100%; padding: 0; margin: 0; - background-color: var(--color-main-background); - @include icon-color('settings-dark', 'actions', $color-black, 1, true); - background-position: 14px center; - background-repeat: no-repeat; box-shadow: none; border: 0; border-radius: 0; text-align: left; - padding-left: 44px; font-weight: normal; font-size: 100%; opacity: 0.8; @@ -750,6 +746,19 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; &:focus { background-color: var(--color-background-hover); } + + &::before { + background-image: var(--icon-settings-dark); + background-position: 14px center; + background-repeat: no-repeat; + content: ''; + width: 44px; + height: 44px; + top: 0; + left: 0; + display: block; + filter: var(--background-invert-if-dark); + } } /* GENERAL SECTION ------------------------------------------------------------ */ diff --git a/core/css/functions.scss b/core/css/functions.scss index 7489e574e97..3311ef06955 100644 --- a/core/css/functions.scss +++ b/core/css/functions.scss @@ -26,7 +26,7 @@ * @param string $color The color * @return string The color without # */ -@function remove-hash-from-color($color) { + @function remove-hash-from-color($color) { $color: unquote($color); $index: str-index(inspect($color), '#'); @if $index { @@ -36,22 +36,34 @@ } /** - * Calculates the URL to the svg under the SVG API. - * - * @param string $icon the icon filename - * @param string $dir the icon folder within /core/img if $core or app name - * @param string $color the desired color in hexadecimal - * @param int [$version] the version of the file - * @param bool [$core] search icon in core - * @return string The URL to the svg. + * @see core/src/icons.js */ -@function icon-color-path($icon, $dir, $color, $version: 1, $core: false) { - $color: remove-hash-from-color($color); - @if $core { - @return '#{$webroot}/svg/core/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}'; - } @else { - @return '#{$webroot}/svg/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}'; +@function match-color-string($color) { + @if $color == #000 { + @return "dark"; + } + @if $color == #000 { + @return 'dark'; + } + @if $color == #fff { + @return 'white'; + } + @if $color == #FC0 { + @return 'yellow'; + } + @if $color == #e9322d { + @return 'red'; + } + @if $color == #eca700 { + @return 'orange'; } + @if $color == #46ba61 { + @return 'green'; + } + @if $color == #969696 { + @return 'grey'; + } + @return $color; } /** @@ -66,30 +78,12 @@ * @returns A background image with the url to the set to the requested icon. */ @mixin icon-color($icon, $dir, $color, $version: 1, $core: false) { - $color: remove-hash-from-color($color); + $color: match-color-string($color); /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ - $varName: "--icon-#{$dir}-#{$icon}-#{$color}"; - @if $core { - $varName: "--icon-#{$icon}-#{$color}"; - } - #{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core)); + $varName: "--icon-#{$icon}-#{$color}"; background-image: var(#{$varName}); } -/** - * Create black and white icons - * This will add a default black version of and an additional white version when .icon-white is applied - */ -@mixin icon-black-white($icon, $dir, $version, $core: false) { - .icon-#{$icon} { - @include icon-color($icon, $dir, $color-black, $version, $core); - } - .icon-#{$icon}-white, - .icon-#{$icon}.icon-white { - @include icon-color($icon, $dir, $color-white, $version, $core); - } -} - @mixin position($value) { @if $value == 'sticky' { position: -webkit-sticky; // Safari support diff --git a/core/css/icons.scss b/core/css/icons.scss index 78522895cf5..9acec4895be 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -123,393 +123,42 @@ audio, canvas, embed, iframe, img, input, object, video { } } -/* ICONS ------------------------------------------------------------------- - * These icon classes are generated automatically with the following pattern - * for icon-black-white('close', ...) - * .icon-close (black icon) - * .icon-close-white (white icon) - * .icon-close.icon-white (white icon) - * - * Some class definitions are kept as before, since they don't follow the pattern - * or have some additional styling like drop shadows - */ - -@include icon-black-white('add', 'actions', 1, true); -@include icon-black-white('address', 'actions', 1, true); - -@include icon-black-white('audio', 'actions', 2, true); .icon-audio-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('audio-off', 'actions', 1, true); .icon-audio-off-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -.icon-caret-white, -.icon-caret { - @include icon-color('caret', 'actions', $color-white, 1, true); -} - -.icon-caret-dark { - @include icon-color('caret', 'actions', $color-black, 1, true); -} - -@include icon-black-white('checkmark', 'actions', 1, true); -.icon-checkmark-color { - @include icon-color('checkmark', 'actions', $color-success, 1, true); -} - -@include icon-black-white('clippy', 'actions', 2, true); -@include icon-black-white('close', 'actions', 1, true); -@include icon-black-white('comment', 'actions', 1, true); -@include icon-black-white('confirm', 'actions', 2, true); -@include icon-black-white('download', 'actions', 1, true); - -.icon-confirm-fade { - @include icon-color('confirm-fade', 'actions', $color-black, 2, true); -} - -.icon-delete { - @include icon-color('delete', 'actions', $color-black, 1, true); - &.no-permission, - &.no-hover { - &:hover, - &:focus { - @include icon-color('delete', 'actions', $color-black, 1, true); - } - } - &:hover, - &:focus { - @include icon-color('delete', 'actions', $color-error, 1, true); - filter: initial; - } - - &.icon-white { - @include icon-color('delete', 'actions', $color-white, 1, true); - } -} - -.icon-delete-white { - @include icon-color('delete', 'actions', $color-white, 1, true); - &.no-permission { - &:hover, - &:focus { - @include icon-color('delete', 'actions', $color-white, 1, true); - } - } - &:hover, - &:focus { - @include icon-color('delete', 'actions', $color-error, 1, true); - } -} - -@include icon-black-white('details', 'actions', 1, true); -@include icon-black-white('edit', 'actions', 1, true); -@include icon-black-white('error', 'actions', 1, true); - -.icon-error-color { - @include icon-color('error', 'actions', $color-error, 1, true); -} -@include icon-black-white('external', 'actions', 1, true); -@include icon-black-white('fullscreen', 'actions', 1, true); - .icon-fullscreen-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('history', 'actions', 2, true); -@include icon-black-white('info', 'actions', 1, true); -@include icon-black-white('logout', 'actions', 1, true); -@include icon-black-white('mail', 'actions', 1, true); -@include icon-black-white('menu', 'actions', 1, true); -@include icon-black-white('menu-sidebar', 'actions', 1, true); -@include icon-black-white('more', 'actions', 1, true); -@include icon-black-white('password', 'actions', 1, true); -@include icon-black-white('pause', 'actions', 1, true); -@include icon-black-white('play', 'actions', 1, true); -@include icon-black-white('play-add', 'actions', 1, true); -@include icon-black-white('play-next', 'actions', 1, true); -@include icon-black-white('play-previous', 'actions', 1, true); -@include icon-black-white('projects', 'actions', 1, true); -@include icon-black-white('public', 'actions', 1, true); -@include icon-black-white('quota', 'actions', 1, true); -@include icon-black-white('rename', 'actions', 1, true); -@include icon-black-white('screen', 'actions', 1, true); -@include icon-black-white('template-add', 'actions', 1, true); - .icon-screen-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('screen-off', 'actions', 1, true); .icon-screen-off-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('search', 'actions', 1, true); - -/* default icon have a .5 opacity */ -.icon-settings { - @include icon-color('settings', 'actions', $color-black, 1, true); -} - -.icon-settings-dark { - @include icon-color('settings-dark', 'actions', $color-black, 1, true); -} - -.icon-settings-white { - @include icon-color('settings-dark', 'actions', $color-white, 1, true); -} - -/* always use icon-shared, AdBlock blocks icon-share */ -.icon-shared, -.icon-share { - @include icon-color('share', 'actions', $color-black, 1, true); - &.icon-white { - @include icon-color('share', 'actions', $color-white, 1, true); - } -} -.icon-shared-white, -.icon-share-white { - @include icon-color('share', 'actions', $color-white, 1, true); -} - -@include icon-black-white('sound', 'actions', 1, true); -@include icon-black-white('sound-off', 'actions', 1, true); - -.icon-favorite { - @include icon-color('star-dark', 'actions', $color-black, 1, true); -} - -@include icon-black-white('star', 'actions', 1, true); - -.icon-star-dark { - @include icon-color('star', 'actions', $color-black, 1, true); -} - -.icon-starred { - &:hover, - &:focus { - @include icon-color('star', 'actions', $color-black, 1, true); - } - @include icon-color('star-dark', 'actions', $color-yellow, 1, true); -} - -.icon-star { - &:hover, - &:focus { - @include icon-color('star-dark', 'actions', $color-yellow, 1, true); - } -} - -@include icon-black-white('tag', 'actions', 2, true); -@include icon-black-white('timezone', 'actions', 1, true); -@include icon-black-white('toggle', 'actions', 1, true); -@include icon-black-white('toggle-background', 'actions', 1, true); -@include icon-black-white('toggle-pictures', 'actions', 1, true); -@include icon-black-white('toggle-filelist', 'actions', 1, true); -@include icon-black-white('triangle-e', 'actions', 1, true); -@include icon-black-white('triangle-n', 'actions', 1, true); -@include icon-black-white('triangle-s', 'actions', 1, true); -@include icon-black-white('upload', 'actions', 1, true); -@include icon-black-white('user', 'actions', 1, true); -@include icon-black-white('group', 'actions', 1, true); -@include icon-black-white('filter', 'actions', 1, true); - -@include icon-black-white('video', 'actions', 2, true); .icon-video-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('video-off', 'actions', 1, true); .icon-video-off-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('video-switch', 'actions', 1, true); - -/* SHADOW WHITE ICONS: white version only ----------------------------------- */ -.icon-view-close, -.icon-view-close-white { - @include icon-color('view-close', 'actions', $color-white, 1, true); -} -.icon-view-download, -.icon-view-download-white { - @include icon-color('view-download', 'actions', $color-white, 1, true); -} -.icon-view-pause, -.icon-view-pause-white { - @include icon-color('view-pause', 'actions', $color-white, 1, true); -} -.icon-view-play, -.icon-view-play-white { - @include icon-color('view-play', 'actions', $color-white, 1, true); -} -.icon-view-next { - @include icon-color('arrow-right', 'actions', $color-black, 1, true); - &.icon-white { - @include icon-color('arrow-right', 'actions', $color-white, 1, true); - } -} - - -.icon-view-previous { - @include icon-color('arrow-left', 'actions', $color-black, 1, true); - &.icon-white { - @include icon-color('arrow-left', 'actions', $color-white, 1, true); - } -} - - -@include icon-black-white('disabled-user', 'actions', 1, true); -@include icon-black-white('disabled-users', 'actions', 1, true); -@include icon-black-white('user-admin', 'actions', 1, true); - -@include icon-black-white('alert-outline', 'actions', 1, true); - -/* PLACES ------------------------------------------------------------------- */ -.icon-calendar { - @include icon-color('calendar', 'places', $color-white, 1, true); -} - -.icon-calendar-dark { - @include icon-color('calendar', 'places', $color-black, 1, true); -} - -.icon-contacts { - @include icon-color('contacts', 'places', $color-white, 1, true); -} - -.icon-contacts-dark { - @include icon-color('contacts', 'places', $color-black, 1, true); -} - -.icon-files { - @include icon-color('files', 'places', $color-white, 1, true); -} - -.icon-files-dark { - @include icon-color('files', 'places', $color-black, 1, true); -} - -.icon-file, -.icon-filetype-text { - @include icon-color('text', 'filetypes', #969696, 1, true); -} - -.icon-filetype-file { - @include icon-color('file', 'filetypes', #969696, 1, true); -} - -@include icon-black-white('folder', 'filetypes', 1, true); -.icon-filetype-folder { - @include icon-color('folder', 'filetypes', $color-primary, 1, true); -} - -.icon-filetype-folder-drag-accept { - @include icon-color('folder-drag-accept', 'filetypes', $color-primary, 1, true); -} - - -@include icon-black-white('home', 'places', 1, true); -@include icon-black-white('link', 'places', 1, true); -@include icon-black-white('music', 'places', 1, true); -@include icon-black-white('picture', 'places', 1, true); - - -/* CLIENTS ------------------------------------------------------------------- */ - -@include icon-black-white('desktop', 'clients', 1, true); -@include icon-black-white('phone', 'clients', 1, true); -@include icon-black-white('tablet', 'clients', 1, true); - -/* APP CATEGORIES ------------------------------------------------------------------- */ -.icon-category-installed { - @include icon-color('user', 'actions', $color-black, 1, true); -} - -.icon-category-enabled { - @include icon-color('checkmark', 'actions', $color-black, 1, true); -} - -.icon-category-disabled { - @include icon-color('close', 'actions', $color-black, 1, true); -} - -.icon-category-app-bundles { - @include icon-color('bundles', 'categories', $color-black, 1, true); -} - -.icon-category-updates { - @include icon-color('download', 'actions', $color-black, 1, true); -} - -.icon-category-files { - @include icon-color('files', 'categories', $color-black, 1, true); -} - -.icon-category-social { - @include icon-color('social', 'categories', $color-black, 1, true); -} - -.icon-category-office { - @include icon-color('office', 'categories', $color-black, 1, true); -} - -.icon-category-auth { - @include icon-color('auth', 'categories', $color-black, 1, true); -} - -.icon-category-monitoring { - @include icon-color('monitoring', 'categories', $color-black, 1, true); -} - -.icon-category-multimedia { - @include icon-color('multimedia', 'categories', $color-black, 1, true); -} - -.icon-category-organization { - @include icon-color('organization', 'categories', $color-black, 1, true); -} - -.icon-category-customization { - @include icon-color('customization', 'categories', $color-black, 1, true); -} - -.icon-category-integration { - @include icon-color('integration', 'categories', $color-black, 1, true); -} - -.icon-category-tools { - @include icon-color('settings-dark', 'actions', $color-black, 1, true); -} - -.icon-category-games { - @include icon-color('games', 'categories', $color-black, 1, true); -} - -.icon-category-security { - @include icon-color('password', 'actions', $color-black, 1, true); -} - -.icon-category-search { - @include icon-color('search', 'actions', $color-black, 1, true); -} - -.icon-category-workflow { - @include icon-color('workflow', 'categories', $color-black, 1, true); -} - -.icon-category-dashboard { - @include icon-color('dashboard', 'categories', $color-black, 1, true); -} - -.icon-talk { - @include icon-color('app-dark', 'spreed', $color-black, 1); -} +/* ICONS ------------------------------------------------------------------- + * These icon classes are generated automatically with the following pattern + * .icon-close (black icon) + * .icon-close-white (white icon) + * .icon-close.icon-white (white icon) + * + * Some class definitions are kept as before, since they don't follow the pattern + * or have some additional styling like drop shadows + */ -.nav-icon-systemtagsfilter { - @include icon-color('tag', 'actions', $color-black, 1, true); -} +@import url('../../dist/icons.css'); diff --git a/core/css/styles.scss b/core/css/styles.scss index f0c33a2037d..bd7e747169b 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -975,6 +975,8 @@ span.ui-icon { background-size: 20px 20px; padding: 14px; cursor: pointer; + // Force white + background-image: var(--original-icon-contacts-white); filter: var(--primary-invert-if-bright); &:hover, diff --git a/core/img/actions/change.svg b/core/img/actions/change.svg new file mode 100644 index 00000000000..12071422b7f --- /dev/null +++ b/core/img/actions/change.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" version="1.1" height="16"><path d="m8 2c-2.142 0-4.125 1.145-5.196 3l1.948 1.125c0.671-1.162 1.906-1.875 3.2476-1.875 1.1906 0 2.297 0.56157 3 1.5l-1.5 1.5h4.5v-4.5l-1.406 1.406c-1.129-1.348-2.802-2.1563-4.594-2.1563z"/><path d="m2 8.75v4.5l1.408-1.41c1.116 1.334 2.817 2.145 4.592 2.16 2.16 0.01827 4.116-1.132 5.196-3.002l-1.948-1.125c-0.677 1.171-1.9005 1.886-3.248 1.875-1.18-0.01-2.3047-0.572-3-1.5l1.5-1.5z"/></svg> diff --git a/core/img/actions/recent.svg b/core/img/actions/recent.svg new file mode 100644 index 00000000000..8021bc4bb71 --- /dev/null +++ b/core/img/actions/recent.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" height="16" width="16" version="1.1"><circle stroke-width="2" stroke="#000" cy="8" cx="8" r="7" fill="none"/><path stroke-linejoin="round" d="m8 3.5-1 5 3.5 2-2-2z" stroke="#000" stroke-linecap="round" stroke-width="1.5"/></svg> diff --git a/core/img/actions/unshare.svg b/core/img/actions/unshare.svg new file mode 100644 index 00000000000..0c22ca64057 --- /dev/null +++ b/core/img/actions/unshare.svg @@ -0,0 +1 @@ +<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m12.5 1a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 0.003906 0.12891l-4.9023 2.4512a2.5 2.5 0 0 0-1.6016-0.58008 2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 0.30469-0.021484l3.4395-1.7246-1.25-0.625a2.5 2.5 0 0 0 0.0058594-0.12891 2.5 2.5 0 0 0-0.0039062-0.12891l4.9023-2.4512a2.5 2.5 0 0 0 1.6016 0.58008 2.5 2.5 0 0 0 0.26562-0.013672l1.5625-0.7832a2.5 2.5 0 0 0 0.67188-1.7031 2.5 2.5 0 0 0-2.5-2.5zm0.25391 9.0156-3.7246 1.8672 0.97656 0.48828a2.5 2.5 0 0 0-0.005859 0.12891 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.2461-2.4844z"/><rect transform="rotate(-26.63)" x="-1.0586" y="11.891" width="11.687" height="2.0029" ry="0" style="paint-order:normal"/></svg> diff --git a/core/img/apps/circles.svg b/core/img/apps/circles.svg new file mode 100644 index 00000000000..6264e74626c --- /dev/null +++ b/core/img/apps/circles.svg @@ -0,0 +1 @@ +<svg height="16" viewBox="0 0 21.33 21.33" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M10.67 1.33a9.34 9.34 0 100 18.68 9.34 9.34 0 000-18.68zM6.93 15.8a2.33 2.33 0 110-4.67 2.33 2.33 0 010 4.67zm1.4-8.87a2.33 2.33 0 114.67 0 2.33 2.33 0 01-4.67 0zm6.07 8.87a2.33 2.33 0 110-4.67 2.33 2.33 0 010 4.67z"/></svg>
\ No newline at end of file diff --git a/core/src/icons.js b/core/src/icons.js new file mode 100644 index 00000000000..cb0b374131b --- /dev/null +++ b/core/src/icons.js @@ -0,0 +1,335 @@ +/* eslint-disable quote-props */ +/* eslint-disable node/no-unpublished-import */ +import path from 'path' +import fs from 'fs' +import sass from 'sass' + +const colors = { + dark: '000', + white: 'fff', + yellow: 'FC0', + red: 'e9322d', + orange: 'eca700', + green: '46ba61', + grey: '969696', +} + +const variables = {} +const icons = { + 'add': path.join(__dirname, '../img', 'actions', 'add.svg'), + 'address': path.join(__dirname, '../img', 'actions', 'address.svg'), + 'alert-outline': path.join(__dirname, '../img', 'actions', 'alert-outline.svg'), + 'audio-off': path.join(__dirname, '../img', 'actions', 'audio-off.svg'), + 'audio': path.join(__dirname, '../img', 'actions', 'audio.svg'), + 'calendar': path.join(__dirname, '../img', 'places', 'calendar.svg'), + 'caret': path.join(__dirname, '../img', 'actions', 'caret.svg'), + 'category-app-bundles': path.join(__dirname, '../img', 'categories', 'bundles.svg'), + 'category-auth': path.join(__dirname, '../img', 'categories', 'auth.svg'), + 'category-customization': path.join(__dirname, '../img', 'categories', 'customization.svg'), + 'category-dashboard': path.join(__dirname, '../img', 'categories', 'dashboard.svg'), + 'category-files': path.join(__dirname, '../img', 'categories', 'files.svg'), + 'category-games': path.join(__dirname, '../img', 'categories', 'games.svg'), + 'category-integration': path.join(__dirname, '../img', 'categories', 'integration.svg'), + 'category-monitoring': path.join(__dirname, '../img', 'categories', 'monitoring.svg'), + 'category-multimedia': path.join(__dirname, '../img', 'categories', 'multimedia.svg'), + 'category-office': path.join(__dirname, '../img', 'categories', 'office.svg'), + 'category-organization': path.join(__dirname, '../img', 'categories', 'organization.svg'), + 'category-social': path.join(__dirname, '../img', 'categories', 'social.svg'), + 'category-workflow': path.join(__dirname, '../img', 'categories', 'workflow.svg'), + 'change': path.join(__dirname, '../img', 'actions', 'change.svg'), + 'checkmark': path.join(__dirname, '../img', 'actions', 'checkmark.svg'), + 'circles': path.join(__dirname, '../img', 'apps', 'circles.svg'), + 'clippy': path.join(__dirname, '../img', 'actions', 'clippy.svg'), + 'close': path.join(__dirname, '../img', 'actions', 'close.svg'), + 'comment': path.join(__dirname, '../img', 'actions', 'comment.svg'), + 'confirm-fade': path.join(__dirname, '../img', 'actions', 'confirm-fade.svg'), + 'confirm': path.join(__dirname, '../img', 'actions', 'confirm.svg'), + 'contacts': path.join(__dirname, '../img', 'places', 'contacts.svg'), + 'delete': path.join(__dirname, '../img', 'actions', 'delete.svg'), + 'desktop': path.join(__dirname, '../img', 'clients', 'desktop.svg'), + 'details': path.join(__dirname, '../img', 'actions', 'details.svg'), + 'disabled-user': path.join(__dirname, '../img', 'actions', 'disabled-user.svg'), + 'disabled-users': path.join(__dirname, '../img', 'actions', 'disabled-users.svg'), + 'download': path.join(__dirname, '../img', 'actions', 'download.svg'), + 'edit': path.join(__dirname, '../img', 'actions', 'edit.svg'), + 'encryption': path.join(__dirname, '../../', 'apps/files_external/img', 'app.svg'), + 'error': path.join(__dirname, '../img', 'actions', 'error.svg'), + 'external': path.join(__dirname, '../img', 'actions', 'external.svg'), + 'favorite': path.join(__dirname, '../img', 'actions', 'star-dark.svg'), + 'files': path.join(__dirname, '../img', 'places', 'files.svg'), + 'filter': path.join(__dirname, '../img', 'actions', 'filter.svg'), + 'folder': path.join(__dirname, '../img', 'filetypes', 'folder.svg'), + 'fullscreen': path.join(__dirname, '../img', 'actions', 'fullscreen.svg'), + 'group': path.join(__dirname, '../img', 'actions', 'group.svg'), + 'history': path.join(__dirname, '../img', 'actions', 'history.svg'), + 'home': path.join(__dirname, '../img', 'places', 'home.svg'), + 'info': path.join(__dirname, '../img', 'actions', 'info.svg'), + 'link': path.join(__dirname, '../img', 'places', 'link.svg'), + 'logout': path.join(__dirname, '../img', 'actions', 'logout.svg'), + 'mail': path.join(__dirname, '../img', 'actions', 'mail.svg'), + 'menu-sidebar': path.join(__dirname, '../img', 'actions', 'menu-sidebar.svg'), + 'menu': path.join(__dirname, '../img', 'actions', 'menu.svg'), + 'more': path.join(__dirname, '../img', 'actions', 'more.svg'), + 'music': path.join(__dirname, '../img', 'places', 'music.svg'), + 'password': path.join(__dirname, '../img', 'actions', 'password.svg'), + 'pause': path.join(__dirname, '../img', 'actions', 'pause.svg'), + 'phone': path.join(__dirname, '../img', 'clients', 'phone.svg'), + 'picture': path.join(__dirname, '../img', 'places', 'picture.svg'), + 'play-add': path.join(__dirname, '../img', 'actions', 'play-add.svg'), + 'play-next': path.join(__dirname, '../img', 'actions', 'play-next.svg'), + 'play-previous': path.join(__dirname, '../img', 'actions', 'play-previous.svg'), + 'play': path.join(__dirname, '../img', 'actions', 'play.svg'), + 'projects': path.join(__dirname, '../img', 'actions', 'projects.svg'), + 'public': path.join(__dirname, '../img', 'actions', 'public.svg'), + 'quota': path.join(__dirname, '../img', 'actions', 'quota.svg'), + 'recent': path.join(__dirname, '../img', 'actions', 'recent.svg'), + 'rename': path.join(__dirname, '../img', 'actions', 'rename.svg'), + 'screen-off': path.join(__dirname, '../img', 'actions', 'screen-off.svg'), + 'screen': path.join(__dirname, '../img', 'actions', 'screen.svg'), + 'search': path.join(__dirname, '../img', 'actions', 'search.svg'), + 'settings': path.join(__dirname, '../img', 'actions', 'settings-dark.svg'), + 'share': path.join(__dirname, '../img', 'actions', 'share.svg'), + 'shared': path.join(__dirname, '../img', 'actions', 'share.svg'), + 'sound-off': path.join(__dirname, '../img', 'actions', 'sound-off.svg'), + 'sound': path.join(__dirname, '../img', 'actions', 'sound.svg'), + 'star': path.join(__dirname, '../img', 'actions', 'star.svg'), + 'starred': path.join(__dirname, '../img', 'actions', 'star-dark.svg'), + 'tablet': path.join(__dirname, '../img', 'clients', 'tablet.svg'), + 'tag': path.join(__dirname, '../img', 'actions', 'tag.svg'), + 'talk': path.join(__dirname, '../img', 'apps', 'spreed.svg'), + 'template-add': path.join(__dirname, '../img', 'actions', 'template-add.svg'), + 'timezone': path.join(__dirname, '../img', 'actions', 'timezone.svg'), + 'toggle-background': path.join(__dirname, '../img', 'actions', 'toggle-background.svg'), + 'toggle-filelist': path.join(__dirname, '../img', 'actions', 'toggle-filelist.svg'), + 'toggle-pictures': path.join(__dirname, '../img', 'actions', 'toggle-pictures.svg'), + 'toggle': path.join(__dirname, '../img', 'actions', 'toggle.svg'), + 'triangle-e': path.join(__dirname, '../img', 'actions', 'triangle-e.svg'), + 'triangle-n': path.join(__dirname, '../img', 'actions', 'triangle-n.svg'), + 'triangle-s': path.join(__dirname, '../img', 'actions', 'triangle-s.svg'), + 'unshare': path.join(__dirname, '../img', 'actions', 'unshare.svg'), + 'upload': path.join(__dirname, '../img', 'actions', 'upload.svg'), + 'user-admin': path.join(__dirname, '../img', 'actions', 'user-admin.svg'), + 'user': path.join(__dirname, '../img', 'actions', 'user.svg'), + 'video-off': path.join(__dirname, '../img', 'actions', 'video-off.svg'), + 'video-switch': path.join(__dirname, '../img', 'actions', 'video-switch.svg'), + 'video': path.join(__dirname, '../img', 'actions', 'video.svg'), + 'view-close': path.join(__dirname, '../img', 'actions', 'view-close.svg'), + 'view-download': path.join(__dirname, '../img', 'actions', 'view-download.svg'), + 'view-next': path.join(__dirname, '../img', 'actions', 'arrow-right.svg'), + 'view-pause': path.join(__dirname, '../img', 'actions', 'view-pause.svg'), + 'view-play': path.join(__dirname, '../img', 'actions', 'view-play.svg'), + 'view-previous': path.join(__dirname, '../img', 'actions', 'arrow-left.svg'), +} + +const iconsColor = { + 'settings': { + path: path.join(__dirname, '../img', 'actions', 'settings.svg'), + color: 'black', + }, + 'error-color': { + path: path.join(__dirname, '../img', 'actions', 'error.svg'), + color: 'red', + }, + 'checkmark-color': { + path: path.join(__dirname, '../img', 'actions', 'checkmark.svg'), + color: 'green', + }, + 'starred': { + path: path.join(__dirname, '../img', 'actions', 'star-dark.svg'), + color: 'yellow', + }, + 'delete-color': { + path: path.join(__dirname, '../img', 'actions', 'delete.svg'), + color: 'red', + }, + 'file': { + path: path.join(__dirname, '../img', 'filetypes', 'text.svg'), + color: 'grey', + }, + 'filetype-file': { + path: path.join(__dirname, '../img', 'filetypes', 'file.svg'), + color: 'grey', + }, + 'filetype-folder': { + path: path.join(__dirname, '../img', 'filetypes', 'folder.svg'), + // TODO: replace primary ? + color: 'primary', + }, + 'filetype-folder-drag-accept': { + path: path.join(__dirname, '../img', 'filetypes', 'folder-drag-accept.svg'), + // TODO: replace primary ? + color: 'primary', + }, +} + +// use this to define aliases to existing icons +// key is the css selector, value is the variable +const iconsAliases = { + 'icon-caret': 'icon-caret-white', + // starring action + 'icon-star:hover': 'icon-starred', + 'icon-star:focus': 'icon-starred', + // Un-starring action + 'icon-starred:hover': 'icon-star', + 'icon-starred:focus': 'icon-star', + // Delete normal + 'icon-delete.no-permission:hover': 'icon-delete-dark', + 'icon-delete.no-permission:focus': 'icon-delete-dark', + 'icon-delete.no-hover:hover': 'icon-delete-dark', + 'icon-delete.no-hover:focus': 'icon-delete-dark', + 'icon-delete:hover': 'icon-delete-color-red', + 'icon-delete:focus': 'icon-delete-color-red', + // Delete white + 'icon-delete-white.no-permission:hover': 'icon-delete-white', + 'icon-delete-white.no-permission:focus': 'icon-delete-white', + 'icon-delete-white.no-hover:hover': 'icon-delete-white', + 'icon-delete-white.no-hover:focus': 'icon-delete-white', + 'icon-delete-white:hover': 'icon-delete-color-red', + 'icon-delete-white:focus': 'icon-delete-color-red', + // Default to white + 'icon-view-close': 'icon-view-close-white', + 'icon-view-download': 'icon-view-download-white', + 'icon-view-pause': 'icon-view-pause-white', + 'icon-view-play': 'icon-view-play-white', + // Default app place to white + 'icon-calendar': 'icon-calendar-white', + 'icon-contacts': 'icon-contacts-white', + 'icon-files': 'icon-files-white', + // Re-using existing icons + 'icon-category-installed': 'icon-user-dark', + 'icon-category-enabled': 'icon-checkmark-dark', + 'icon-category-disabled': 'icon-close-dark', + 'icon-category-updates': 'icon-download-dark', + 'icon-category-security': 'icon-password-dark', + 'icon-category-search': 'icon-search-dark', + 'icon-category-tools': 'icon-settings-dark', + 'icon-filetype-text': 'icon-file-grey', +} + +const colorSvg = function(svg = '', color = '000') { + if (!color.match(/^[0-9a-f]{3,6}$/i)) { + // Prevent not-sane colors from being written into the SVG + console.warn(color, 'does not match the required format') + color = '000' + } + + // add fill (fill is not present on black elements) + const fillRe = /<((circle|rect|path)((?!fill)[a-z0-9 =".\-#():;,])+)\/>/gmi + svg = svg.replace(fillRe, '<$1 fill="#' + color + '"/>') + + // replace any fill or stroke colors + svg = svg.replace(/stroke="#([a-z0-9]{3,6})"/gmi, 'stroke="#' + color + '"') + svg = svg.replace(/fill="#([a-z0-9]{3,6})"/gmi, 'fill="#' + color + '"') + + return svg +} + +const generateVariablesAliases = function(invert = false) { + let css = '' + Object.keys(variables).forEach(variable => { + if (variable.indexOf('original-') !== -1) { + let finalVariable = variable.replace('original-', '') + if (invert) { + finalVariable = finalVariable.replace('white', 'tempwhite') + .replace('dark', 'white') + .replace('tempwhite', 'dark') + } + css += `${finalVariable}: var(${variable});` + } + }) + return css +} + +const formatIcon = function(icon, invert = false) { + const color1 = invert ? 'white' : 'dark' + const color2 = invert ? 'dark' : 'white' + return ` + .icon-${icon}, + .icon-${icon}-dark { + background-image: var(--icon-${icon}-${color1}); + } + .icon-${icon}-white, + .icon-${icon}.icon-white { + background-image: var(--icon-${icon}-${color2}); + }` +} +const formatIconColor = function(icon) { + const { color } = iconsColor[icon] + return ` + .icon-${icon} { + background-image: var(--icon-${icon}-${color}); + }` +} +const formatAlias = function(alias, invert = false) { + let icon = iconsAliases[alias] + if (invert) { + icon = icon.replace('white', 'tempwhite') + .replace('dark', 'white') + .replace('tempwhite', 'dark') + } + return ` + .${alias} { + background-image: var(--${icon}) + }` +} + +let css = '' +Object.keys(icons).forEach(icon => { + const path = icons[icon] + + const svg = fs.readFileSync(path, 'utf8') + const darkSvg = colorSvg(svg, '000000') + const whiteSvg = colorSvg(svg, 'ffffff') + + variables[`--original-icon-${icon}-dark`] = Buffer.from(darkSvg, 'utf-8').toString('base64') + variables[`--original-icon-${icon}-white`] = Buffer.from(whiteSvg, 'utf-8').toString('base64') +}) + +Object.keys(iconsColor).forEach(icon => { + const { path, color } = iconsColor[icon] + + const svg = fs.readFileSync(path, 'utf8') + const coloredSvg = colorSvg(svg, colors[color]) + variables[`--icon-${icon}-${color}`] = Buffer.from(coloredSvg, 'utf-8').toString('base64') +}) + + +// ICONS VARIABLES LIST +css += ':root {' +Object.keys(variables).forEach(variable => { + const data = variables[variable] + css += `${variable}: url(data:image/svg+xml;base64,${data});` +}) +css += '}' + +// DEFAULT THEME +css += 'body {' +css += generateVariablesAliases() +Object.keys(icons).forEach(icon => { + css += formatIcon(icon) +}) +Object.keys(iconsColor).forEach(icon => { + css += formatIconColor(icon) +}) +Object.keys(iconsAliases).forEach(alias => { + css += formatAlias(alias) +}) +css += '}' + +// DARK THEME MEDIA QUERY +css += '@media (prefers-color-scheme: dark) { body {' +css += generateVariablesAliases(true) +css += '}}' + +// DARK THEME +css += 'body[data-themes*=light] {' +css += generateVariablesAliases() +css += '}' + +// DARK THEME +css += 'body[data-themes*=dark] {' +css += generateVariablesAliases(true) +css += '}' + +// WRITE CSS +fs.writeFileSync(path.join(__dirname, '../../dist', 'icons.css'), sass.compileString(css).css) diff --git a/core/src/jquery/css/jquery.ocdialog.scss b/core/src/jquery/css/jquery.ocdialog.scss index 280e9ac5f35..c5b6a0dcc64 100644 --- a/core/src/jquery/css/jquery.ocdialog.scss +++ b/core/src/jquery/css/jquery.ocdialog.scss @@ -53,7 +53,7 @@ top: 0; right: 0; padding: 25px; - background: var(--icon-close-000) no-repeat center; + background: var(--icon-close-dark) no-repeat center; opacity: .5; &:hover, diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 40fd13a1000..0b06dff087e 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -42,7 +42,7 @@ $getUserAvatar = static function (int $size) use ($_): string { </head> <body id="<?php p($_['bodyid']);?>" <?php foreach ($_['enabledThemes'] as $themeId) { p("data-theme-$themeId "); - }?>> + }?> data-themes=<?php p(join(',', $_['enabledThemes'])) ?>> <?php include 'layout.noscript.warning.php'; ?> <?php foreach ($_['initialStates'] as $app => $initialState) { ?> |