From 7273650a1534dc5fae100b29d2f176a28c3ec8a2 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 13 Feb 2024 17:57:10 +0100 Subject: [PATCH] [DE PE SSE mobile] Corrected cropping of text in document title --- .../mobile/resources/less/common-ios.less | 10 +++--- .../resources/less/common-material.less | 2 ++ apps/common/mobile/resources/less/common.less | 5 +-- .../mobile/src/view/Toolbar.jsx | 29 +-------------- .../mobile/src/view/Toolbar.jsx | 36 ++----------------- .../mobile/src/view/Toolbar.jsx | 33 ++--------------- 6 files changed, 16 insertions(+), 99 deletions(-) diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 4c93330499..f589131e4f 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -70,16 +70,16 @@ } .navbar, .navbar-bg, .subnavbar { + background-color: var(--f7-navbar-bg-color); + a.btn-doc-back { width: 22px; } - background-color: var(--f7-navbar-bg-color); + .title { - font-weight: 600; + font-weight: normal; color: @text-normal; - //line-height: 17px; - //max-height: 34px; - //overflow: hidden; + font-size: 15px; } .navbar-inner, .subnavbar-inner { z-index: auto; diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index dc04b451c3..ad3a21dafe 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -431,6 +431,8 @@ .title { margin-left: var(--f7-navbar-title-margin-left); margin-right: var(--f7-navbar-title-margin-left); + font-size: 14px; + font-weight: normal; } } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 2af77d5005..20e3a1046b 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -52,13 +52,14 @@ .subnavbar { .subnavbar-inner { padding: 0; + .title { - //white-space: nowrap; + white-space: nowrap; overflow: hidden; - text-overflow: initial; margin: 0; padding: 0; flex-shrink: initial; + text-overflow: ellipsis; } } .icon-back { diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx index cd254e247a..28097950b6 100644 --- a/apps/documenteditor/mobile/src/view/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx @@ -1,4 +1,4 @@ -import React, { Fragment, useEffect } from 'react'; +import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; import { NavLeft, NavRight, Link } from 'framework7-react'; import { Device } from '../../../../common/mobile/utils/device'; @@ -17,34 +17,7 @@ const ToolbarView = props => { const isViewer = props.isViewer; const isMobileView = props.isMobileView; const docTitle = props.docTitle; - const docTitleLength = docTitle.length; const isOpenModal = props.isOpenModal; - - const correctOverflowedText = el => { - if(el) { - el.innerText = docTitle; - - if(el.scrollWidth > el.clientWidth) { - const arrDocTitle = docTitle.split('.'); - const ext = arrDocTitle[1]; - const name = arrDocTitle[0]; - const diff = Math.floor(docTitleLength * el.clientWidth / el.scrollWidth - ext.length - 6); - const shortName = name.substring(0, diff).trim(); - - return `${shortName}...${ext}`; - } - - return docTitle; - } - }; - - useEffect(() => { - const elemTitle = document.querySelector('.subnavbar .title'); - - if (elemTitle) { - elemTitle.innerText = correctOverflowedText(elemTitle); - } - }, [docTitle, isViewer]); return ( diff --git a/apps/presentationeditor/mobile/src/view/Toolbar.jsx b/apps/presentationeditor/mobile/src/view/Toolbar.jsx index 62359eeb11..fa6619a48f 100644 --- a/apps/presentationeditor/mobile/src/view/Toolbar.jsx +++ b/apps/presentationeditor/mobile/src/view/Toolbar.jsx @@ -1,5 +1,5 @@ -import React, {Fragment, useEffect} from 'react'; -import {NavLeft, NavRight, NavTitle, Link} from 'framework7-react'; +import React, {Fragment} from 'react'; +import {NavLeft, NavRight, Link} from 'framework7-react'; import { Device } from '../../../../common/mobile/utils/device'; import EditorUIController from '../lib/patch' import { useTranslation } from 'react-i18next'; @@ -8,38 +8,9 @@ const ToolbarView = props => { const { t } = useTranslation(); const isDisconnected = props.isDisconnected; const docTitle = props.docTitle; - const docTitleLength = docTitle.length; const isVersionHistoryMode = props.isVersionHistoryMode; const isOpenModal = props.isOpenModal; - const correctOverflowedText = el => { - if(el) { - el.innerText = docTitle; - - if(el.scrollWidth > el.clientWidth) { - const arrDocTitle = docTitle.split('.'); - const ext = arrDocTitle[1]; - const name = arrDocTitle[0]; - const diff = Math.floor(docTitleLength * el.clientWidth / el.scrollWidth - ext.length - 6); - const shortName = name.substring(0, diff).trim(); - - return `${shortName}...${ext}`; - } - - return docTitle; - } - }; - - useEffect(() => { - if(!Device.phone) { - const elemTitle = document.querySelector('.subnavbar .title'); - - if (elemTitle) { - elemTitle.innerText = correctOverflowedText(elemTitle); - } - } - }, [docTitle]); - return ( @@ -57,10 +28,9 @@ const ToolbarView = props => { {(!Device.phone && !isVersionHistoryMode) &&
props.changeTitleHandler()} style={{width: '71%'}}> - {props.docTitle} + {docTitle}
} - {/* props.changeTitleHandler()} style={{width: '71%'}}>{props.docTitle}} */} {(Device.android && props.isEdit && EditorUIController.getUndoRedo && !isVersionHistoryMode) && EditorUIController.getUndoRedo({ disabledUndo: !props.isCanUndo || isDisconnected, diff --git a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx index 9adece850f..cb9c59bb56 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx @@ -1,4 +1,4 @@ -import React, {Fragment, useEffect} from 'react'; +import React, {Fragment} from 'react'; import {NavLeft, NavRight, Link} from 'framework7-react'; import { Device } from '../../../../common/mobile/utils/device'; import EditorUIController from '../lib/patch' @@ -17,37 +17,8 @@ const ToolbarView = props => { onRedoClick: props.onRedo }) : null; const docTitle = props.docTitle; - const docTitleLength = docTitle.length; const isVersionHistoryMode = props.isVersionHistoryMode; const isOpenModal = props.isOpenModal; - - const correctOverflowedText = el => { - if(el) { - el.innerText = docTitle; - - if(el.scrollWidth > el.clientWidth) { - const arrDocTitle = docTitle.split('.'); - const ext = arrDocTitle[1]; - const name = arrDocTitle[0]; - const diff = Math.floor(docTitleLength * el.clientWidth / el.scrollWidth - ext.length - 6); - const shortName = name.substring(0, diff).trim(); - - return `${shortName}...${ext}`; - } - - return docTitle; - } - }; - - useEffect(() => { - if(!Device.phone) { - const elemTitle = document.querySelector('.subnavbar .title'); - - if (elemTitle) { - elemTitle.innerText = correctOverflowedText(elemTitle); - } - } - }, [docTitle]); return ( @@ -61,7 +32,7 @@ const ToolbarView = props => { {(!Device.phone && !isVersionHistoryMode) &&
props.changeTitleHandler()} style={{width: '71%'}}> - {props.docTitle} + {docTitle}
}