diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 9550df5c4..3d15b16eb 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -39,6 +39,7 @@ --f7-list-chevron-icon-color: @text-tertiary; --f7-toggle-inactive-color: @background-menu-divider; + --f7-toggle-border-color: @background-menu-divider; --f7-actions-button-border-color: @background-menu-divider; --f7-popover-bg-color: @background-primary; --f7-dialog-bg-color-rgb: @background-secondary; @@ -46,6 +47,9 @@ --f7-dialog-text-color: @text-normal; --f7-dialog-border-divider-color: @background-menu-divider; + --f7-subnavbar-border-color: @background-menu-divider; + --f7-list-border-color: @background-menu-divider; + // Main Toolbar #editor-navbar.navbar .right a + a, #editor-navbar.navbar .left a + a { @@ -623,6 +627,12 @@ padding-left: 0; } } + + // Toggle Icon + + .toggle-icon { + background: transparent; + } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 674595847..b4c6812ad 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -85,8 +85,11 @@ --f7-list-item-border-color: @background-menu-divider; --f7-list-chevron-icon-color: @text-tertiary; --f7-toggle-inactive-color: @background-menu-divider; + --f7-toggle-border-color: @background-menu-divider; --f7-actions-button-text-color: @text-normal; --f7-input-text-color: @text-normal; + --f7-subnavbar-border-color: @background-menu-divider; + --f7-list-border-color: @background-menu-divider; } .add-popup { @@ -247,6 +250,9 @@ } // List .list { + li { + color: @text-normal; + } .item-inner { color: @text-normal; } diff --git a/apps/presentationeditor/mobile/src/page/app.jsx b/apps/presentationeditor/mobile/src/page/app.jsx index c8c5d62d1..699cdcc8f 100644 --- a/apps/presentationeditor/mobile/src/page/app.jsx +++ b/apps/presentationeditor/mobile/src/page/app.jsx @@ -31,7 +31,7 @@ export default class extends React.Component { render() { return ( - + {/* Your main view, should have "view-main" class */} diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx index 8d85d8e71..24c9068bb 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -87,6 +87,20 @@ class ApplicationSettingsController extends Component { if (regCode!==null) api.asc_setLocale(+regCode); } + switchDarkTheme(value) { + const theme = value ? {id:'theme-dark', type:'dark'} : {id:'theme-light', type:'light'}; + LocalStorage.setItem("ui-theme", JSON.stringify(theme)); + + const $body = $$('body'); + $body.attr('class') && $body.attr('class', $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, '')); + $body.addClass(`theme-type-${theme.type}`); + } + + isThemeDark() { + const obj = LocalStorage.getItem("ui-theme"); + return !!obj ? JSON.parse(obj).type === 'dark' : false; + } + render() { return ( ) } diff --git a/apps/spreadsheeteditor/mobile/src/less/app-material.less b/apps/spreadsheeteditor/mobile/src/less/app-material.less index cbb0da4ce..2995a0049 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app-material.less +++ b/apps/spreadsheeteditor/mobile/src/less/app-material.less @@ -6,9 +6,9 @@ .device-android { - --f7-navbar-bg-color: @themeColor; - --f7-navbar-link-color: @navBarIconColor; - --f7-navbar-text-color: @navBarIconColor; + --f7-navbar-bg-color: @brandColor; + --f7-navbar-link-color: @text-link; + --f7-navbar-text-color: @text-normal; --f7-list-button-border-color: @listButtonBorderColor; // Main Toolbar @@ -33,7 +33,7 @@ border: 2px solid var(--f7-checkbox-inactive-color); } label.item-checkbox input[type='checkbox']:checked ~ .icon-checkbox { - border-color: @themeColor; + border-color: @brandColor; background-color: transparent; } label.item-content i.icon.icon-checkbox:after { @@ -45,7 +45,7 @@ top: 50%; margin-left: -5px; margin-top: -5px; - background-color: @themeColor; + background-color: @brandColor; border-radius: 100%; } } diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 6be8afc19..55a047b15 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -1,12 +1,26 @@ - -@themeColor: #40865c; - @import '../../../../common/mobile/resources/less/variables.less'; @import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less'; - @import '../../../../common/mobile/resources/less/_mixins.less'; @import '../../../../common/mobile/resources/less/colors-table.less'; @import '../../../../common/mobile/resources/less/colors-table-dark.less'; + +// @themeColor: #40865c; +@brandColor: var(--brand-cell); + +.device-ios { + --toolbar-background: var(--background-primary, #fff); + --toolbar-icons: var(--brand-cell, #40865C); +} +.device-android { + --toolbar-background: var(--brand-cell, #40865C); + + .theme-type-dark { + --toolbar-icons: var(--brand-cell, #40865C); + } +} + +@toolbar-background: var(--toolbar-background); + @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less'; @import '../../../../common/mobile/resources/less/common-ios.less'; diff --git a/apps/spreadsheeteditor/mobile/src/less/celleditor.less b/apps/spreadsheeteditor/mobile/src/less/celleditor.less index 53be7192a..f59c51d7d 100644 --- a/apps/spreadsheeteditor/mobile/src/less/celleditor.less +++ b/apps/spreadsheeteditor/mobile/src/less/celleditor.less @@ -28,7 +28,8 @@ &:after { content: ''; position: absolute; - background-color: @border-regular-control; + // background-color: @border-regular-control; + background-color: @background-menu-divider; display: block; z-index: 15; top: auto; @@ -43,11 +44,12 @@ #box-cell-name { display: inline-flex; - background-color: var(--f7-navbar-bg-color); + // background-color: var(--f7-navbar-bg-color); + // background-color: @fill-white; - .md & { - background-color: @gray-light; - } + // .md & { + // background-color: @gray-light; + // } } #idx-cell-name { @@ -80,9 +82,10 @@ #idx-cell-content { padding: 3px 3px; line-height: 1.428571429; - color: #000; + // color: #000; + color: @text-normal; vertical-align: middle; - background-color: @contentBackColor; + // background-color: @contentBackColor; min-height: @cellEditorHeight; height: 100%; width: 100%; @@ -97,7 +100,8 @@ width: 8px; height: 8px; background-color: transparent; - border: solid 1px black; + // border: solid 1px black; + border: solid 1px @brandColor; border-bottom: none; border-right: none; @@ -117,8 +121,12 @@ } } + .ce-group { + background-color: @background-secondary; + } + .group--content { position: relative; - .hairline(left, @statusBarBorderColor); + .hairline(left, @background-menu-divider); } } diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less index 875a0c8e6..094955979 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less @@ -5,172 +5,172 @@ &.icon-search { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-undo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-redo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-download { width: 22px; - height: 28px; - .encoded-svg-background(''); + height: 22px; + .encoded-svg-mask(''); } &.icon-print { width: 22px; - height: 28px; - .encoded-svg-background(''); + height: 22px; + .encoded-svg-mask(''); } &.icon-info { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-versions { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-color { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-fill-color { width: 22px; height: 22px; background-size: 130%; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-align-center { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-jast { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-left { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-right { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-top { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-middle { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-bottom { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-link { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-insimage { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-sort { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-image-library { width: 22px; height: 22px; - .encoded-svg-background('icons_for_svg'); + .encoded-svg-mask('icons_for_svg'); } &.icon-cell-wrap { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-function { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @text-normal); } // Reorder &.icon-move-backward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-forward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-background { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-foreground { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Presets of table borders @@ -178,62 +178,62 @@ &.icon-table-borders-all { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-none { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-inner { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-outer { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-left { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-center { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-right { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-top { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-middle { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-bottom { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-dup { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-ddown { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Cell formats @@ -241,52 +241,52 @@ &.icon-format-general { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-number { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-integer { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-scientific { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-accounting { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-currency { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-date { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-time { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-percentage { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-text { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Filter sort @@ -294,12 +294,12 @@ &.sortdown { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.sortup { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Formats @@ -307,131 +307,131 @@ &.icon-format-pdf { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-pdfa { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-xlsx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-xltx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-ods { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-ots { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-csv { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-settings { width: 24px; height: 24px; - .encoded-svg-background(' '); + .encoded-svg-mask(' '); } //Comments &.icon-menu-comment { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-resolve-comment { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-resolve-comment.check { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } //Insert &.icon-add-chart { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-formula { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Text orientation &.icon-text-orientation-horizontal { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-anglecount { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-angleclock { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-vertical { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-rotateup { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-rotatedown { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } @@ -440,27 +440,27 @@ &.icon-add-chart { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-formula { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-link { background: #fff; diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less index 082c7f232..3278e324d 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less @@ -5,132 +5,132 @@ &.icon-expand-up { width: 17px; height: 17px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-expand-down { width: 17px; height: 17px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-edit { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-download { width: 22px; - height: 28px; - .encoded-svg-background(''); + height: 22px; + .encoded-svg-mask(''); } &.icon-print { width: 22px; - height: 28px; - .encoded-svg-background(''); + height: 22px; + .encoded-svg-mask(''); } &.icon-info { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-versions { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-color { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-align-center { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-jast { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-left { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-right { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-top { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-middle { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-bottom { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-link { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-insimage, &.icon-image-library { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-sort { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-function { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @text-normal); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-settings { width: 24px; height: 24px; - .encoded-svg-background(' '); + .encoded-svg-mask(' '); } @@ -139,22 +139,22 @@ &.icon-move-backward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-forward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-background { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-foreground { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Presets of table borders @@ -162,62 +162,62 @@ &.icon-table-borders-all { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-none { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-inner { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-outer { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-left { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-center { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-right { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-top { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-middle { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-bottom { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-dup { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-ddown { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Cell formats @@ -225,52 +225,52 @@ &.icon-format-general { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-number { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-integer { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-scientific { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-accounting { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-currency { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-date { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-time { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-percentage { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-text { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Filter sort @@ -278,12 +278,12 @@ &.sortdown { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.sortup { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Formats @@ -291,110 +291,110 @@ &.icon-format-pdf { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-pdfa { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-xlsx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-xltx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-ods { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-ots { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-csv { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } //Comments &.icon-menu-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-resolve-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-resolve-comment.check { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-done-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-done-comment-white { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Text orientation &.icon-text-orientation-horizontal { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-anglecount { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-angleclock { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-vertical { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-rotateup { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-rotatedown { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } @@ -419,77 +419,77 @@ &.icon-undo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-redo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-burger { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-prev { width: 20px; height: 20px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-next { width: 20px; height: 20px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-chart { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-formula { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-close-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } } } diff --git a/apps/spreadsheeteditor/mobile/src/less/statusbar.less b/apps/spreadsheeteditor/mobile/src/less/statusbar.less index 40fe15ce9..2daf9242a 100644 --- a/apps/spreadsheeteditor/mobile/src/less/statusbar.less +++ b/apps/spreadsheeteditor/mobile/src/less/statusbar.less @@ -2,10 +2,10 @@ @fontColor: #000; .statusbar { - .hairline(top, @border-regular-control); + .hairline(top, @background-menu-divider); height: @statusbar-height; min-height: @statusbar-height; - background-color: @background-normal; + background-color: @background-tertiary; display: flex; .tab { @@ -21,7 +21,7 @@ height: 100%; position: relative; - .hairline(right, @border-regular-control); + .hairline(right, @background-menu-divider); } .statusbar--box-tabs { @@ -65,9 +65,10 @@ width: 22px; height: 22px; &.icon-plus { - @source: ''; - .encoded-svg-mask(@source, @fontColor); - background-image: none; + // @source: ''; + // .encoded-svg-mask(@source, @fontColor); + // background-image: none; + .encoded-svg-mask('') } } } diff --git a/apps/spreadsheeteditor/mobile/src/page/app.jsx b/apps/spreadsheeteditor/mobile/src/page/app.jsx index 2bf443815..44da854e1 100644 --- a/apps/spreadsheeteditor/mobile/src/page/app.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/app.jsx @@ -35,7 +35,7 @@ export default class extends React.Component { render() { return ( - + {/* Your main view, should have "view-main" class */} diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx index 207607719..7ddb7b230 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -1,4 +1,4 @@ -import React, {Fragment} from "react"; +import React, {Fragment, useState} from "react"; import { observer, inject } from "mobx-react"; import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon } from "framework7-react"; import { useTranslation } from "react-i18next"; @@ -20,6 +20,7 @@ const PageApplicationSettings = props => { const isRefStyle = storeApplicationSettings.isRefStyle; const isComments = storeApplicationSettings.isComments; const isResolvedComments = storeApplicationSettings.isResolvedComments; + const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark); const changeMeasureSettings = value => { storeApplicationSettings.changeUnitMeasurement(value); @@ -92,6 +93,11 @@ const PageApplicationSettings = props => { }} /> + + {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> + + {/* } */} {/* {_isShowMacros && */}