haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-06 09:21:54 +00:00
Code Issues Releases Wiki Activity

12.0 optimize wiki nav style (#6398)

Browse Source 
* delete useless classnames

* change icon style

* fix click trigger area
This commit is contained in:
Michael An
2024-07-23 10:49:42 +08:00
committed by GitHub
parent 22f41631fa
commit c64bb90669
9 changed files with 65 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/components/main-side-nav-folded.js
View File

@@ -39,47 +39,45 @@ class MainSideNavFolded extends React.Component {
<div className={'side-nav-con d-flex flex-column'}>
<ul className="nav nav-pills flex-column nav-container">
<li id="main-side-nav-folded-files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
<li className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
<Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
<span className="sf3-font-files sf3-font" aria-hidden="true"></span>
</Link>
</li>
<span className="sf3-font-files sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-files"></span>
<Tip target="main-side-nav-folded-files" text={gettext('Files')} />
<li className={`nav-item ${this.getActiveClass('starred')}`} id="main-side-nav-folded-starred">
<Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}>
<span className="sf3-font-starred sf3-font" aria-hidden="true"></span>
</Link>
</li>
<li className={`nav-item ${this.getActiveClass('starred')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}>
<span className="sf3-font-starred sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-starred"></span>
<Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} />
</Link>
</li>
{showActivity &&
<>
<li className={`nav-item ${this.getActiveClass('dashboard')}`} id="main-side-nav-folded-dashboard">
<li className={`nav-item ${this.getActiveClass('dashboard')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
<span className="sf3-font-activities sf3-font" aria-hidden="true"></span>
<span className="sf3-font-activities sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-dashboard"></span>
<Tip target="main-side-nav-folded-dashboard" text={gettext('Activities')} />
</Link>
</li>
<Tip target="main-side-nav-folded-dashboard" text={gettext('Activities')} />
</>
}
<li className={`nav-item ${this.getActiveClass('published')}`} id="main-side-nav-folded-wikis">
<li className={`nav-item ${this.getActiveClass('published')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} onClick={(e) => this.tabItemClick(e, 'published')}>
<span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
<span className="sf3-font-wiki sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-wikis"></span>
<Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
</Link>
</li>
<Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
{canInvitePeople &&
<>
<li className={`nav-item ${this.getActiveClass('invitations')}`} id="main-side-nav-folded-invitations">
<li className={`nav-item ${this.getActiveClass('invitations')}`}>
<Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} onClick={(e) => this.tabItemClick(e, 'invitations')}>
<span className="sf3-font-invite-visitors sf3-font" aria-hidden="true"></span>
<span className="sf3-font-invite-visitors sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-invitations"></span>
<Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
</Link>
</li>
<Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
</>
}
{customNavItems &&
@@ -99,20 +97,20 @@ class MainSideNavFolded extends React.Component {
<div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
:
<ul className="nav nav-pills flex-column nav-container">
<li className='nav-item' id="main-side-nav-folded-help">
<li className='nav-item'>
<a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
<span className="sf3-font-help sf3-font" aria-hidden="true"></span>
<span className="sf3-font-help sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-help"></span>
<Tip target="main-side-nav-folded-help" text={gettext('Help')} />
</a>
</li>
<Tip target="main-side-nav-folded-help" text={gettext('Help')} />
{enableTC &&
<>
<li className='nav-item' id="main-side-nav-folded-terms">
<li className='nav-item'>
<a href={`${siteRoot}terms/`} className="nav-link">
<span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
<span className="sf3-font-terms sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-terms"></span>
<Tip target="main-side-nav-folded-terms" text={gettext('Terms')} />
</a>
</li>
<Tip target="main-side-nav-folded-terms" text={gettext('Terms')} />
</>
}
{additionalAppBottomLinks && (
@@ -120,18 +118,18 @@ class MainSideNavFolded extends React.Component {
{Object.keys(additionalAppBottomLinks).map((key, index) => {
return (
<a className="nav-link" href={additionalAppBottomLinks[key]}>
<span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
<span className="sf3-font-terms sf3-font mr-0" aria-hidden="true"></span>
</a>
);
})}
</>
)}
<li className='nav-item' id="main-side-nav-folded-clients">
<li className='nav-item'>
<a href={siteRoot + 'download_client_program/'} className="nav-link">
<span className="sf3-font-devices sf3-font" aria-hidden="true"></span>
<span className="sf3-font-devices sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-clients"></span>
<Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
</a>
</li>
<Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
</ul>
}
<div

4
frontend/src/css/main-side-nav-folded.css
View File

@@ -6,6 +6,10 @@
overflow: visible;
}
.side-panel .side-nav-folded .nav-item {
cursor: default;
}
.side-panel .side-nav-folded .nav-item .nav-link:hover {
transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
}

2
frontend/src/css/side-nav-icon-tip.css
View File

@@ -1,5 +1,7 @@
.side-nav-icon-tip-popover {
cursor: pointer;
padding-left: 0 !important;
left: 20px !important;
}
.side-nav-icon-tip {

3
frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item.js
View File

@@ -1,6 +1,5 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { UncontrolledTooltip } from 'reactstrap';
import { CustomizeSelect, IconBtn, SearchInput, Icon } from '@seafile/sf-metadata-ui-component';
import {
@@ -250,7 +249,7 @@ class FilterItem extends React.Component {
value={filterTerm}
onChange={this.onFilterTermTextChanged}
autoFocus={false}
className={classnames('text-truncate')}
className='text-truncate'
/>
);
} else if (type === 'checkbox') {

3
frontend/src/metadata/metadata-view/components/view-toolbar/index.js
View File

@@ -1,6 +1,5 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { FilterSetter, GroupbySetter, SortSetter, HideColumnSetter } from '../data-process-setter';
import { EVENT_BUS_TYPE } from '../../constants';
@@ -60,7 +59,7 @@ const ViewToolBar = ({ metadataViewId }) => {
return (
<div
className={classnames('sf-metadata-tool')}
className='sf-metadata-tool'
// style={{ zIndex: Z_INDEX.TABLE_HEADER, transform: 'translateZ(1000px)' }}
onClick={onHeaderClick}
>

5
frontend/src/pages/sdoc-revision/index.js
View File

@@ -1,6 +1,5 @@
import React from 'react';
import ReactDom from 'react-dom';
import classnames from 'classnames';
import { Button } from 'reactstrap';
import { DiffViewer } from '@seafile/sdoc-editor';
import { gettext } from '../../utils/constants';
@@ -8,10 +7,10 @@ import Loading from '../../components/loading';
import GoBack from '../../components/common/go-back';
import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api';
import toaster from '../../components/toast';
import '../../css/layout.css';
import '../../css/sdoc-revision.css';
import toaster from '../../components/toast';
const { serviceURL, avatarURL, siteRoot } = window.app.config;
const { username, name } = window.app.pageOptions;
@@ -112,7 +111,7 @@ class SdocRevision extends React.Component {
<div className="sdoc-revision d-flex h-100 w-100 o-hidden">
<div className="sdoc-revision-container d-flex flex-column">
<div className="sdoc-revision-header pl-4 pr-4 d-flex justify-content-between w-100 o-hidden">
<div className={classnames('sdoc-revision-header-left h-100 d-flex align-items-center o-hidden')}>
<div className='sdoc-revision-header-left h-100 d-flex align-items-center o-hidden'>
<GoBack />
<div className="file-name text-truncate">{fileName}</div>
</div>

11
frontend/src/pages/wiki2/css/nav-item-icon.css
View File

@@ -9,6 +9,17 @@
margin-right: 8px;
}
.nav-item-icon .sf3-font {
color: #666666;
line-height: 16px;
}
.nav-item-icon .seafile-multicolor-icon {
color: #666666;
height: 16px;
width: 16px;
}
.nav-item-icon:hover:not(.nav-item-icon-disable) {
background-color: #DFDFDD;
}

25
frontend/src/pages/wiki2/css/wiki-nav.css
View File

@@ -54,10 +54,9 @@
position: relative;
display: flex;
width: 100%;
height: 40px;
height: 32px;
padding: 0 8px 0 0;
font-size: 14px;
font-weight: 500;
align-items: center;
justify-content: center;
border-radius: 3px;
@@ -66,6 +65,7 @@
.wiki-nav .wiki-page-item.selected-page {
background-color: #EDEDEA;
font-weight: 500;
}
.wiki-nav .wiki-page-item:hover {
@@ -94,10 +94,6 @@
overflow: hidden;
}
.wiki-nav .wiki-page-content {
padding-left: calc(12 * 0.8px + 0.5rem);
}
.wiki-nav .wiki-page-content:hover {
cursor: pointer;
}
@@ -108,19 +104,27 @@
}
.wiki-nav .wiki-page-content .wiki-page-title {
height: 40px;
line-height: 40px;
height: 32px;
line-height: 32px;
flex: 1;
}
.wiki-nav .more-wiki-page-operation {
width: 24px;
height: 24px;
width: 20px;
height: 20px;
padding: 0 2px;
display: flex;
align-items: center;
justify-content: center;
}
.wiki-nav .wiki-add-page-btn {
height: 20px;
line-height: 20px;
padding: 0 3px;
margin-left: 4px;
}
.wiki-nav .wiki-add-page-btn:hover,
.wiki-nav .more-wiki-page-operation:hover {
border-radius: 3px;
@@ -129,6 +133,7 @@
.wiki-nav .wiki-page-item .sf3-font.sf3-font-enlarge,
.wiki-nav .wiki-page-item .more-wiki-page-operation .seafile-multicolor-icon-more-level {
font-size: 14px;
cursor: pointer;
opacity: 0;
}

2
frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
View File

@@ -231,7 +231,7 @@ class PageItem extends Component {
/>
}
</div>
<div className="wiki-add-page-btn ml-1 px-1" onClick={this.toggleInsertPage}>
<div className="wiki-add-page-btn" onClick={this.toggleInsertPage}>
<span className='sf3-font sf3-font-enlarge'></span>
</div>
</>