From db29cbd3f22932fbecd1c521ee9ea87f351750ec Mon Sep 17 00:00:00 2001 From: Konstantin Kireyev Date: Tue, 14 Jan 2025 23:30:01 +0500 Subject: [PATCH] feat: pe, se --- apps/common/mobile/lib/view/Draw.jsx | 60 ++++++++++++------- apps/common/mobile/resources/less/draw.less | 39 ++++++++---- .../mobile/resources/less/material/icons.less | 2 +- apps/presentationeditor/mobile/locale/en.json | 8 +++ .../mobile/src/controller/Toolbar.jsx | 1 + .../mobile/src/index_dev.html | 2 +- .../mobile/src/less/app.less | 1 + .../mobile/src/less/icons-common.less | 5 ++ .../mobile/src/page/main.jsx | 4 ++ .../mobile/src/store/appOptions.js | 8 +++ .../mobile/src/view/Toolbar.jsx | 11 ++-- .../mobile/src/view/add/AddOther.jsx | 10 ++++ apps/spreadsheeteditor/mobile/locale/en.json | 8 +++ .../mobile/src/controller/Toolbar.jsx | 1 + .../mobile/src/index_dev.html | 2 +- .../mobile/src/less/app.less | 1 + .../mobile/src/less/icons-common.less | 4 ++ .../mobile/src/page/main.jsx | 4 ++ .../mobile/src/store/appOptions.js | 8 +++ .../mobile/src/view/Statusbar.jsx | 2 +- .../mobile/src/view/Toolbar.jsx | 7 ++- .../mobile/src/view/add/AddOther.jsx | 11 ++++ 22 files changed, 152 insertions(+), 47 deletions(-) diff --git a/apps/common/mobile/lib/view/Draw.jsx b/apps/common/mobile/lib/view/Draw.jsx index bc9f7dd301..5fc6dfd133 100644 --- a/apps/common/mobile/lib/view/Draw.jsx +++ b/apps/common/mobile/lib/view/Draw.jsx @@ -68,28 +68,44 @@ export const DrawView = ({ currentTool, setTool, settings, setSettings, colors,
- - - -
- - -
- +
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
) diff --git a/apps/common/mobile/resources/less/draw.less b/apps/common/mobile/resources/less/draw.less index 44af314721..72f36334c2 100644 --- a/apps/common/mobile/resources/less/draw.less +++ b/apps/common/mobile/resources/less/draw.less @@ -107,24 +107,37 @@ } .draw-toolbar { - padding-inline: 10px; display: flex; justify-content: space-between; align-items: center; + padding-inline: 10px; width: 100%; - button { - display: flex; - padding: 0; - width: 36px; - height: 36px; - min-width: 36px; - border-radius: 7px; - border: none; - - &.button-fill { - color: @brandColor; - background-color: @button-active-opacity; + @media (min-width: 550px) { + display: grid; + grid-template-columns: repeat(8, 1fr); + } + + &-item { + @media (min-width: 550px) { + display: flex; + align-items: center; + justify-content: center; + } + + button { + display: flex; + padding: 0; + width: 36px; + height: 36px; + min-width: 36px; + border-radius: 7px; + border: none; + + &.button-fill { + color: @brandColor; + background-color: @button-active-opacity; + } } } diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index 9a3457b4a4..ceb149e7fa 100644 --- a/apps/common/mobile/resources/less/material/icons.less +++ b/apps/common/mobile/resources/less/material/icons.less @@ -65,7 +65,7 @@ &.icon-close { width: 24px; height: 24px; - .encoded-svg-mask('', @text-normal); + .encoded-svg-mask('', @toolbar-icons); } &.icon-done-disabled { width: 24px; diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index d1e4732ad0..be6f12d48c 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -270,6 +270,7 @@ "waitText": "Please, wait..." }, "Toolbar": { + "textOk": "OK", "dlgLeaveMsgText": "You have unsaved changes in this document. Click 'Stay on this Page' to wait for autosave. Click 'Leave this Page' to discard all the unsaved changes.", "dlgLeaveTitleText": "You leave the application", "leaveButtonText": "Leave this page", @@ -281,6 +282,7 @@ "View": { "Add": { "notcriticalErrorTitle": "Warning", + "textDrawing": "Drawing", "textAddLink": "Add Link", "textAddress": "Address", "textBack": "Back", @@ -554,5 +556,11 @@ "textVersion": "Version", "textVersionHistory": "Version History" } + }, + "Draw": { + "textOpacity": "Opacity", + "textLineSize": "Line size", + "textColor": "Color", + "textCustomColor": "Custom color" } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/Toolbar.jsx b/apps/presentationeditor/mobile/src/controller/Toolbar.jsx index 1d4f83f86c..a24588def2 100644 --- a/apps/presentationeditor/mobile/src/controller/Toolbar.jsx +++ b/apps/presentationeditor/mobile/src/controller/Toolbar.jsx @@ -259,6 +259,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeFocusObjects' - + diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 91f908ee05..949c014661 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -2,6 +2,7 @@ @import '../../../../common/mobile/resources/less/_mixins.less'; @import '../../../../common/mobile/resources/less/colors-table.less'; @import '../../../../common/mobile/resources/less/colors-table-dark.less'; +@import '../../../../common/mobile/resources/less/draw.less'; @import './app-rtl.less'; @brandColor: var(--brand-slide); diff --git a/apps/presentationeditor/mobile/src/less/icons-common.less b/apps/presentationeditor/mobile/src/less/icons-common.less index adefa2a14b..04c6c4251d 100644 --- a/apps/presentationeditor/mobile/src/less/icons-common.less +++ b/apps/presentationeditor/mobile/src/less/icons-common.less @@ -1,3 +1,8 @@ +.icon-svg { + fill: @brand-slide; + color: @brand-slide; +} + i.icon { &.icon-format-pptx { width: 22px; diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx index 572b730de3..8a2a43f0ac 100644 --- a/apps/presentationeditor/mobile/src/page/main.jsx +++ b/apps/presentationeditor/mobile/src/page/main.jsx @@ -14,6 +14,7 @@ import SettingsController from '../controller/settings/Settings'; import AddView from '../view/add/Add'; import EditView from '../view/edit/Edit'; import VersionHistoryController from '../../../../common/mobile/lib/controller/VersionHistory'; +import { DrawController } from "../../../../common/mobile/lib/controller/Draw"; export const MainContext = createContext(); @@ -212,6 +213,9 @@ class MainPage extends Component { {/* Page content */} + + + {isShowPlaceholder ?
diff --git a/apps/presentationeditor/mobile/src/store/appOptions.js b/apps/presentationeditor/mobile/src/store/appOptions.js index 606fb9486e..d7db96ab84 100644 --- a/apps/presentationeditor/mobile/src/store/appOptions.js +++ b/apps/presentationeditor/mobile/src/store/appOptions.js @@ -9,6 +9,9 @@ export class storeAppOptions { setConfigOptions: action, setPermissionOptions: action, + isDrawMode: observable, + changeDrawMode: action, + lostEditingRights: observable, changeEditingRights: action, canBrandingExt: observable, @@ -28,6 +31,11 @@ export class storeAppOptions { config = {}; customization; + isDrawMode = false; + changeDrawMode(value) { + this.isDrawMode = value; + } + lostEditingRights = false; changeEditingRights (value) { this.lostEditingRights = value; diff --git a/apps/presentationeditor/mobile/src/view/Toolbar.jsx b/apps/presentationeditor/mobile/src/view/Toolbar.jsx index 16178c95b9..c96da604d3 100644 --- a/apps/presentationeditor/mobile/src/view/Toolbar.jsx +++ b/apps/presentationeditor/mobile/src/view/Toolbar.jsx @@ -23,7 +23,8 @@ const ToolbarView = props => { return ( - {(props.isShowBack && !isVersionHistoryMode) && Common.Notifications.trigger('goback')}>} + {props.isDrawMode && Common.Notifications.trigger('draw:stop')}/>} + {(props.isShowBack && !props.isDrawMode && !isVersionHistoryMode) && Common.Notifications.trigger('goback')}>} {isVersionHistoryMode ? { e.preventDefault(); props.closeHistory(); @@ -47,21 +48,21 @@ const ToolbarView = props => { onUndoClick: props.onUndo, onRedoClick: props.onRedo })} - {!isVersionHistoryMode && + {(!isVersionHistoryMode && !props.isDrawMode) && {props.openOptions('preview')}}> } {(props.showEditDocument && !isVersionHistoryMode) && } - {(props.isEdit && EditorUIController.getToolbarOptions && !isVersionHistoryMode) && EditorUIController.getToolbarOptions({ + {(props.isEdit && EditorUIController.getToolbarOptions && !props.isDrawMode && !isVersionHistoryMode) && EditorUIController.getToolbarOptions({ disabledEdit: props.disabledEdit || props.disabledControls || isDisconnected || props.disabledPreview || isOpenModal, disabledAdd: props.disabledControls || isDisconnected || isOpenModal, onEditClick: () => props.openOptions('edit'), onAddClick: () => props.openOptions('add') })} {Device.phone ? null : } - {props.displayCollaboration && window.matchMedia("(min-width: 375px)").matches && !isVersionHistoryMode ? props.openOptions('coauth')}> : null} - {isVersionHistoryMode ? props.openOptions('history')}> : null} + {props.displayCollaboration && window.matchMedia("(min-width: 375px)").matches && !props.isDrawMode && !isVersionHistoryMode ? props.openOptions('coauth')}> : null} + {(isVersionHistoryMode && !props.isDrawMode) ? props.openOptions('history')}> : null} props.openOptions('settings')}> diff --git a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx index 3d60a6b09d..590e77131d 100644 --- a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx +++ b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx @@ -3,6 +3,8 @@ import {observer, inject} from "mobx-react"; import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, SkeletonBlock, Segmented, Button} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; +import SvgIcon from "../../../../../common/mobile/lib/component/SvgIcon"; +import IconDraw from "../../../../../common/mobile/resources/icons/draw.svg"; const PageTable = props => { const { t } = useTranslation(); @@ -71,6 +73,14 @@ const AddOther = props => { } + {!Device.ios && ( + { + props.closeModal(); + Common.Notifications.trigger('draw:start'); + }}> + + + )} ) }; diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 46bd0d932d..8e2d58279d 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -443,6 +443,7 @@ "textWarnDeleteSheet": "The sheet maybe has data. Proceed operation?" }, "Toolbar": { + "textOk": "OK", "dlgLeaveMsgText": "You have unsaved changes in this document. Click 'Stay on this Page' to wait for autosave. Click 'Leave this Page' to discard all the unsaved changes.", "dlgLeaveTitleText": "You leave the application", "leaveButtonText": "Leave this Page", @@ -453,6 +454,7 @@ }, "View": { "Add": { + "textDrawing": "Drawing", "errorMaxRows": "ERROR! The maximum number of data series per chart is 255.", "errorStockChart": "Incorrect row order. To build a stock chart, place the data on the sheet in the following order:
opening price, max price, min price, closing price.", "notcriticalErrorTitle": "Warning", @@ -862,5 +864,11 @@ "txtZh": "Chinese", "warnDownloadAs": "If you continue saving in this format all features except the text will be lost.
Are you sure you want to continue?" } + }, + "Draw": { + "textOpacity": "Opacity", + "textLineSize": "Line size", + "textColor": "Color", + "textCustomColor": "Custom color" } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx index b188fb9466..e6900aa26d 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx @@ -277,6 +277,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn - + diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 1268761530..4627a3f3eb 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -3,6 +3,7 @@ @import '../../../../common/mobile/resources/less/_mixins.less'; @import '../../../../common/mobile/resources/less/colors-table.less'; @import '../../../../common/mobile/resources/less/colors-table-dark.less'; +@import '../../../../common/mobile/resources/less/draw.less'; @import './app-rtl.less'; // @themeColor: #40865c; diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-common.less b/apps/spreadsheeteditor/mobile/src/less/icons-common.less index d524a54265..20f5a09ace 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-common.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-common.less @@ -1,3 +1,7 @@ +.icon-svg { + fill: @brand-cell; + color: @brand-cell; +} .chart-types .thumb { //@relativepath: '../../resources/img'; diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx index 55e3c17825..abb8f51434 100644 --- a/apps/spreadsheeteditor/mobile/src/page/main.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx @@ -17,6 +17,7 @@ import SettingsController from '../controller/settings/Settings'; import AddingController from '../controller/add/Add'; import EditView from '../view/edit/Edit'; import VersionHistoryController from '../../../../common/mobile/lib/controller/VersionHistory'; +import { DrawController } from "../../../../common/mobile/lib/controller/Draw"; export const MainContext = createContext(); @@ -208,6 +209,9 @@ class MainPage extends Component { this.handleClickToOpenOptions('add', {panels: panels, button: button})} /> {/* Page content */} + + + {isShowPlaceholder ?
diff --git a/apps/spreadsheeteditor/mobile/src/store/appOptions.js b/apps/spreadsheeteditor/mobile/src/store/appOptions.js index 3d2a229ea0..be4ea3d9fc 100644 --- a/apps/spreadsheeteditor/mobile/src/store/appOptions.js +++ b/apps/spreadsheeteditor/mobile/src/store/appOptions.js @@ -9,6 +9,9 @@ export class storeAppOptions { setConfigOptions: action, setPermissionOptions: action, + isDrawMode: observable, + changeDrawMode: action, + lostEditingRights: observable, changeEditingRights: action, @@ -25,6 +28,11 @@ export class storeAppOptions { isEdit = false; config = {}; customization; + + isDrawMode = false; + changeDrawMode(value) { + this.isDrawMode = value; + } canViewComments = false; changeCanViewComments(value) { diff --git a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx index 10846ec1a8..97603a2c34 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx @@ -218,7 +218,7 @@ const StatusbarView = inject('storeAppOptions', 'storeWorksheets', 'users')(obse return ( - + {isEdit &&
diff --git a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx index 67ad89bd36..f8311e5b52 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx @@ -32,7 +32,8 @@ const ToolbarView = props => { return ( - {(props.isShowBack && !isVersionHistoryMode) && Common.Notifications.trigger('goback')}>} + {props.isDrawMode && Common.Notifications.trigger('draw:stop')}/>} + {(!props.isDrawMode && props.isShowBack && !isVersionHistoryMode) && Common.Notifications.trigger('goback')}>} {isVersionHistoryMode ? { e.preventDefault(); props.closeHistory(); @@ -49,7 +50,7 @@ const ToolbarView = props => { {(props.showEditDocument && !isVersionHistoryMode) && } - {(props.isEdit && EditorUIController.toolbarOptions && !isVersionHistoryMode) && EditorUIController.toolbarOptions.getEditOptions({ + {(!props.isDrawMode && props.isEdit && EditorUIController.toolbarOptions && !isVersionHistoryMode) && EditorUIController.toolbarOptions.getEditOptions({ disabled: props.disabledEditControls || props.disabledControls || isDisconnected || isOpenModal, wsProps, focusOn, @@ -58,7 +59,7 @@ const ToolbarView = props => { onAddClick: () => props.openOptions('add') })} {Device.phone ? null : } - {props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches && !isVersionHistoryMode ? props.openOptions('coauth')}> : null} + {!props.isDrawMode && props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches && !isVersionHistoryMode ? props.openOptions('coauth')}> : null} {isVersionHistoryMode ? props.openOptions('history')}> : null} props.openOptions('settings')}> diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx index 972dcd2b47..f35bf029ee 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx @@ -3,6 +3,9 @@ import { inject, observer } from 'mobx-react'; import {List, ListItem, Icon} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import { MainContext } from '../../page/main'; +import { Device } from "../../../../../common/mobile/utils/device"; +import SvgIcon from "../../../../../common/mobile/lib/component/SvgIcon"; +import IconDraw from "../../../../../common/mobile/resources/icons/draw.svg"; const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props => { const { t } = useTranslation(); @@ -34,6 +37,14 @@ const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props = }}> + {!Device.ios && ( + { + props.closeModal(); + Common.Notifications.trigger('draw:start'); + }}> + + + )} ) }));