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

[DE] Added Themes controller and correct styles

Browse source
This commit is contained in:
ShimaginAndrey 2021-11-19 16:00:00 +03:00
parent 581b7f690f
commit 739cf52862
7 changed files with 17 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/common/mobile/resources/less/comments.less
View file

@ -83,12 +83,12 @@
.comment-date, .reply-date {
font-size: 12px;
line-height: 18px;
color: @comment-date;
color: @text-secondary;
margin: 0;
}
.comment-quote {
color: @brandColor;
border-left: 1px solid @brandColor;
color: @text-secondary;
border-left: 1px solid @text-secondary;
padding-left: 10px;
padding-right: 16px;
margin: 5px 0;

8
apps/common/mobile/resources/less/ios/_collaboration.less
View file

@ -162,7 +162,7 @@
.comment-date, .reply-date {
font-size: 13px;
line-height: 18px;
color: #6d6d72;
color: @text-secondary;
margin: 0;
margin-top: 0px;
}
@ -205,8 +205,8 @@
}
}
.comment-quote {
color: @brandColor;
border-left: 1px solid @brandColor;
color: @text-secondary;
border-left: 1px solid @text-secondary;
padding-left: 10px;
padding-right: 16px;
margin: 5px 0;
@ -396,7 +396,7 @@
}
.comment-date {
font-size: 13px;
color: #6d6d72;
color: @text-secondary;
padding-left: 5px;
}
.wrap-textarea {

8
apps/common/mobile/resources/less/material/_collaboration.less
View file

@ -158,7 +158,7 @@
.comment-date, .reply-date {
font-size: 12px;
line-height: 18px;
color: #6d6d72;
color: @text-secondary;
margin: 0;
margin-top: 0px;
}
@ -185,8 +185,8 @@
}
}
.comment-quote {
color: @brandColor;
border-left: 1px solid @brandColor;
color: @text-secondary;
border-left: 1px solid @text-secondary;
padding-left: 10px;
padding-right: 16px;
margin: 5px 0;
@ -419,7 +419,7 @@
}
.comment-date {
font-size: 13px;
color: #6d6d72;
color: @text-secondary;
}
.wrap-textarea {
margin-top: 16px;

17
apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
View file

@ -2,6 +2,7 @@ import React, { Component } from "react";
import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
import {observer, inject} from "mobx-react";
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
class ApplicationSettingsController extends Component {
constructor(props) {
@ -24,20 +25,6 @@ class ApplicationSettingsController extends Component {
Common.EditorApi.get().asc_setSpellCheck(value);
}
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;
}
switchNoCharacters(value) {
LocalStorage.setBool("de-mobile-no-characters", value);
Common.EditorApi.get().put_ShowParaMarks(value);
@ -81,13 +68,11 @@ class ApplicationSettingsController extends Component {
<ApplicationSettings
setUnitMeasurement={this.setUnitMeasurement}
switchSpellCheck={this.switchSpellCheck}
switchDarkTheme={this.switchDarkTheme}
switchNoCharacters={this.switchNoCharacters}
switchShowTableEmptyLine={this.switchShowTableEmptyLine}
switchDisplayComments={this.switchDisplayComments}
switchDisplayResolved={this.switchDisplayResolved}
setMacrosSettings={this.setMacrosSettings}
isThemeDark={this.isThemeDark}
/>
)
}

2
apps/documenteditor/mobile/src/less/icons-ios.less
View file

@ -485,7 +485,7 @@
&.icon-menu-comment {
width: 30px;
height: 30px;
.encoded-svg-mask('<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 15C10 16.6569 8.65685 18 7 18C5.34315 18 4 16.6569 4 15C4 13.3431 5.34315 12 7 12C8.65685 12 10 13.3431 10 15ZM7 16.7143C7.94677 16.7143 8.71429 15.9468 8.71429 15C8.71429 14.0532 7.94677 13.2857 7 13.2857C6.05323 13.2857 5.28571 14.0532 5.28571 15C5.28571 15.9468 6.05323 16.7143 7 16.7143Z" fill="#A3A3A3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15ZM15 16.7143C15.9468 16.7143 16.7143 15.9468 16.7143 15C16.7143 14.0532 15.9468 13.2857 15 13.2857C14.0532 13.2857 13.2857 14.0532 13.2857 15C13.2857 15.9468 14.0532 16.7143 15 16.7143Z" fill="#A3A3A3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M26 15C26 16.6569 24.6569 18 23 18C21.3431 18 20 16.6569 20 15C20 13.3431 21.3431 12 23 12C24.6569 12 26 13.3431 26 15ZM23 16.7143C23.9468 16.7143 24.7143 15.9468 24.7143 15C24.7143 14.0532 23.9468 13.2857 23 13.2857C22.0532 13.2857 21.2857 14.0532 21.2857 15C21.2857 15.9468 22.0532 16.7143 23 16.7143Z" fill="#A3A3A3"/></svg>');
.encoded-svg-mask('<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 15C10 16.6569 8.65685 18 7 18C5.34315 18 4 16.6569 4 15C4 13.3431 5.34315 12 7 12C8.65685 12 10 13.3431 10 15ZM7 16.7143C7.94677 16.7143 8.71429 15.9468 8.71429 15C8.71429 14.0532 7.94677 13.2857 7 13.2857C6.05323 13.2857 5.28571 14.0532 5.28571 15C5.28571 15.9468 6.05323 16.7143 7 16.7143Z" fill="#A3A3A3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15ZM15 16.7143C15.9468 16.7143 16.7143 15.9468 16.7143 15C16.7143 14.0532 15.9468 13.2857 15 13.2857C14.0532 13.2857 13.2857 14.0532 13.2857 15C13.2857 15.9468 14.0532 16.7143 15 16.7143Z" fill="#A3A3A3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M26 15C26 16.6569 24.6569 18 23 18C21.3431 18 20 16.6569 20 15C20 13.3431 21.3431 12 23 12C24.6569 12 26 13.3431 26 15ZM23 16.7143C23.9468 16.7143 24.7143 15.9468 24.7143 15C24.7143 14.0532 23.9468 13.2857 23 13.2857C22.0532 13.2857 21.2857 14.0532 21.2857 15C21.2857 15.9468 22.0532 16.7143 23 16.7143Z" fill="#A3A3A3"/></svg>', @text-tertiary);
}
&.icon-resolve-comment {
width: 30px;

2
apps/documenteditor/mobile/src/less/icons-material.less
View file

@ -443,7 +443,7 @@
&.icon-menu-comment {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.6047 16.5848C17.0078 16.1793 17.4729 15.9766 18 15.9766C18.5271 15.9766 18.9922 16.1793 19.3953 16.5848C19.7984 16.9903 20 17.4581 20 17.9883C20 18.5185 19.7984 18.9864 19.3953 19.3918C18.9922 19.7973 18.5271 20 18 20C17.4729 20 17.0078 19.7973 16.6047 19.3918C16.2016 18.9864 16 18.5185 16 17.9883C16 17.4581 16.2016 16.9903 16.6047 16.5848ZM16.6047 10.5965C17.0078 10.191 17.4729 9.9883 18 9.9883C18.5271 9.9883 18.9922 10.191 19.3953 10.5965C19.7984 11.0019 20 11.4698 20 12C20 12.5302 19.7984 12.9981 19.3953 13.4035C18.9922 13.809 18.5271 14.0117 18 14.0117C17.4729 14.0117 17.0078 13.809 16.6047 13.4035C16.2016 12.9981 16 12.5302 16 12C16 11.4698 16.2016 11.0019 16.6047 10.5965ZM19.3953 7.4152C18.9922 7.82066 18.5271 8.02339 18 8.02339C17.4729 8.02339 17.0078 7.82066 16.6047 7.4152C16.2016 7.00975 16 6.54191 16 6.0117C16 5.48148 16.2016 5.01365 16.6047 4.60819C17.0078 4.20273 17.4729 4 18 4C18.5271 4 18.9922 4.20273 19.3953 4.60819C19.7984 5.01365 20 5.48148 20 6.0117C20 6.54191 19.7984 7.00975 19.3953 7.4152Z" fill="@{brandColor}" fill-opacity="0.6"/></svg>');
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.6047 16.5848C17.0078 16.1793 17.4729 15.9766 18 15.9766C18.5271 15.9766 18.9922 16.1793 19.3953 16.5848C19.7984 16.9903 20 17.4581 20 17.9883C20 18.5185 19.7984 18.9864 19.3953 19.3918C18.9922 19.7973 18.5271 20 18 20C17.4729 20 17.0078 19.7973 16.6047 19.3918C16.2016 18.9864 16 18.5185 16 17.9883C16 17.4581 16.2016 16.9903 16.6047 16.5848ZM16.6047 10.5965C17.0078 10.191 17.4729 9.9883 18 9.9883C18.5271 9.9883 18.9922 10.191 19.3953 10.5965C19.7984 11.0019 20 11.4698 20 12C20 12.5302 19.7984 12.9981 19.3953 13.4035C18.9922 13.809 18.5271 14.0117 18 14.0117C17.4729 14.0117 17.0078 13.809 16.6047 13.4035C16.2016 12.9981 16 12.5302 16 12C16 11.4698 16.2016 11.0019 16.6047 10.5965ZM19.3953 7.4152C18.9922 7.82066 18.5271 8.02339 18 8.02339C17.4729 8.02339 17.0078 7.82066 16.6047 7.4152C16.2016 7.00975 16 6.54191 16 6.0117C16 5.48148 16.2016 5.01365 16.6047 4.60819C17.0078 4.20273 17.4729 4 18 4C18.5271 4 18.9922 4.20273 19.3953 4.60819C19.7984 5.01365 20 5.48148 20 6.0117C20 6.54191 19.7984 7.00975 19.3953 7.4152Z" fill="@{text-tertiary}" fill-opacity="0.6"/></svg>', @text-tertiary);
}
&.icon-resolve-comment {
width: 24px;

5
apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
View file

@ -2,6 +2,7 @@ import React, {Fragment, useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
import { useTranslation } from "react-i18next";
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
const PageApplicationSettings = props => {
const { t } = useTranslation();
@ -14,7 +15,7 @@ const PageApplicationSettings = props => {
const isHiddenTableBorders = store.isHiddenTableBorders;
const isComments = store.isComments;
const isResolvedComments = store.isResolvedComments;
const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark);
const [isThemeDark, setIsThemeDark] = useState(Themes.isCurrentDark);
const changeMeasureSettings = value => {
store.changeUnitMeasurement(value);
@ -51,7 +52,7 @@ const PageApplicationSettings = props => {
</ListItem>
<ListItem title={'Dark theme'}>
<Toggle checked={isThemeDark}
onToggleChange={toggle => {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
onToggleChange={toggle => {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
</Toggle>
</ListItem>
</List>