pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 04:45:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DE PE SSE mobile] Corrected cropping of text in document title

Browse Source
This commit is contained in:
SergeyEzhin
2024-02-13 17:57:10 +01:00
parent 5396a419a4
commit 7273650a15
6 changed files with 16 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
apps/common/mobile/resources/less/common-material.less
View File

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

5
apps/common/mobile/resources/less/common.less
View File

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

29
apps/documenteditor/mobile/src/view/Toolbar.jsx
View File

@ -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 (
<Fragment>

36
apps/presentationeditor/mobile/src/view/Toolbar.jsx
View File

@ -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 (
<Fragment>
<NavLeft>
@ -57,10 +28,9 @@ const ToolbarView = props => {
</NavLeft>
{(!Device.phone && !isVersionHistoryMode) &&
<div className='title' onClick={() => props.changeTitleHandler()} style={{width: '71%'}}>
{props.docTitle}
{docTitle}
</div>
}
{/* <NavTitle onClick={() => props.changeTitleHandler()} style={{width: '71%'}}>{props.docTitle}</NavTitle>} */}
<NavRight>
{(Device.android && props.isEdit && EditorUIController.getUndoRedo && !isVersionHistoryMode) && EditorUIController.getUndoRedo({
disabledUndo: !props.isCanUndo || isDisconnected,

33
apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
View File

@ -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 (
<Fragment>
@ -61,7 +32,7 @@ const ToolbarView = props => {
</NavLeft>
{(!Device.phone && !isVersionHistoryMode) &&
<div className='title' onClick={() => props.changeTitleHandler()} style={{width: '71%'}}>
{props.docTitle}
{docTitle}
</div>
}
<NavRight>