Edit and add styles v.4
This commit is contained in:
parent
8ed2d0d652
commit
66840d642d
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -31,7 +31,7 @@ export default class extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<App { ...f7params } className={'app-layout'} >
|
||||
<App { ...f7params } className={'app-layout'}>
|
||||
{/* Your main view, should have "view-main" class */}
|
||||
<View main className="safe-areas" url="/" />
|
||||
<MainController />
|
||||
|
|
|
@ -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 (
|
||||
<ApplicationSettings
|
||||
|
@ -99,6 +113,8 @@ class ApplicationSettingsController extends Component {
|
|||
onChangeMacrosSettings={this.onChangeMacrosSettings}
|
||||
onFormulaLangChange={this.onFormulaLangChange}
|
||||
onRegSettings={this.onRegSettings}
|
||||
isThemeDark={this.isThemeDark}
|
||||
switchDarkTheme={this.switchDarkTheme}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>';
|
||||
.encoded-svg-mask(@source, @fontColor);
|
||||
background-image: none;
|
||||
// @source: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>';
|
||||
// .encoded-svg-mask(@source, @fontColor);
|
||||
// background-image: none;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -35,7 +35,7 @@ export default class extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<App { ...f7params } >
|
||||
<App { ...f7params } className={'app-layout'}>
|
||||
{/* Your main view, should have "view-main" class */}
|
||||
<View main className="safe-areas" url="/" />
|
||||
<MainController />
|
||||
|
|
|
@ -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 => {
|
|||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem title={'Dark theme'}>
|
||||
<Toggle checked={isThemeDark}
|
||||
onToggleChange={toggle => {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
|
||||
</Toggle>
|
||||
</ListItem>
|
||||
</List>
|
||||
{/* } */}
|
||||
{/* {_isShowMacros && */}
|
||||
|
|
Loading…
Reference in a new issue