Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Edit and add styles v.4

Browse source
This commit is contained in:
SergeyEzhin 2021-11-19 01:09:53 +04:00
parent 8ed2d0d652
commit 66840d642d
12 changed files with 269 additions and 208 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/common/mobile/resources/less/common-ios.less
View file

@ -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;
}
}

6
apps/common/mobile/resources/less/common-material.less
View file

@ -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;
}

16
apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx
View file

@ -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}
/>
)
}

10
apps/spreadsheeteditor/mobile/src/less/app-material.less
View file

@ -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%;
}
}

22
apps/spreadsheeteditor/mobile/src/less/app.less
View file

@ -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';

26
apps/spreadsheeteditor/mobile/src/less/celleditor.less
View file

@ -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);
}
}

178
apps/spreadsheeteditor/mobile/src/less/icons-ios.less
View file

File diff suppressed because one or more lines are too long

184
apps/spreadsheeteditor/mobile/src/less/icons-material.less
View file

File diff suppressed because one or more lines are too long

13
apps/spreadsheeteditor/mobile/src/less/statusbar.less
View file

@ -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>')
}
}
}

2
apps/spreadsheeteditor/mobile/src/page/app.jsx
View file

@ -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 />

8
apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
View file

@ -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 && */}