haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-06 01:12:03 +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'}> <div className={'side-nav-con d-flex flex-column'}>
<ul className="nav nav-pills flex-column nav-container"> <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')}> <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> <span className="sf3-font-files sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-files"></span>
</Link>
</li>
<Tip target="main-side-nav-folded-files" text={gettext('Files')} /> <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> </Link>
</li> </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')} /> <Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} />
</Link>
</li>
{showActivity && {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')}> <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> </Link>
</li> </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')}> <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> </Link>
</li> </li>
<Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
{canInvitePeople && {canInvitePeople &&
<> <li className={`nav-item ${this.getActiveClass('invitations')}`}>
<li className={`nav-item ${this.getActiveClass('invitations')}`} id="main-side-nav-folded-invitations">
<Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} onClick={(e) => this.tabItemClick(e, '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> </Link>
</li> </li>
<Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
</>
} }
{customNavItems && {customNavItems &&
@@ -99,20 +97,20 @@ class MainSideNavFolded extends React.Component {
<div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div> <div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
: :
<ul className="nav nav-pills flex-column nav-container"> <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')}> <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> </a>
</li> </li>
<Tip target="main-side-nav-folded-help" text={gettext('Help')} />
{enableTC && {enableTC &&
<> <>
<li className='nav-item' id="main-side-nav-folded-terms"> <li className='nav-item'>
<a href={`${siteRoot}terms/`} className="nav-link"> <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> </a>
</li> </li>
<Tip target="main-side-nav-folded-terms" text={gettext('Terms')} />
</> </>
} }
{additionalAppBottomLinks && ( {additionalAppBottomLinks && (
@@ -120,18 +118,18 @@ class MainSideNavFolded extends React.Component {
{Object.keys(additionalAppBottomLinks).map((key, index) => { {Object.keys(additionalAppBottomLinks).map((key, index) => {
return ( return (
<a className="nav-link" href={additionalAppBottomLinks[key]}> <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> </a>
); );
})} })}
</> </>
)} )}
<li className='nav-item' id="main-side-nav-folded-clients"> <li className='nav-item'>
<a href={siteRoot + 'download_client_program/'} className="nav-link"> <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> </a>
</li> </li>
<Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
</ul> </ul>
} }
<div <div

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

@@ -6,6 +6,10 @@
overflow: visible; overflow: visible;
} }
.side-panel .side-nav-folded .nav-item {
cursor: default;
}
.side-panel .side-nav-folded .nav-item .nav-link:hover { .side-panel .side-nav-folded .nav-item .nav-link:hover {
transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1); 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 { .side-nav-icon-tip-popover {
cursor: pointer; cursor: pointer;
padding-left: 0 !important;
left: 20px !important;
} }
.side-nav-icon-tip { .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 React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames';
import { UncontrolledTooltip } from 'reactstrap'; import { UncontrolledTooltip } from 'reactstrap';
import { CustomizeSelect, IconBtn, SearchInput, Icon } from '@seafile/sf-metadata-ui-component'; import { CustomizeSelect, IconBtn, SearchInput, Icon } from '@seafile/sf-metadata-ui-component';
import { import {
@@ -250,7 +249,7 @@ class FilterItem extends React.Component {
value={filterTerm} value={filterTerm}
onChange={this.onFilterTermTextChanged} onChange={this.onFilterTermTextChanged}
autoFocus={false} autoFocus={false}
className={classnames('text-truncate')} className='text-truncate'
/> />
); );
} else if (type === 'checkbox') { } 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 React, { useCallback, useEffect, useMemo, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames';
import { FilterSetter, GroupbySetter, SortSetter, HideColumnSetter } from '../data-process-setter'; import { FilterSetter, GroupbySetter, SortSetter, HideColumnSetter } from '../data-process-setter';
import { EVENT_BUS_TYPE } from '../../constants'; import { EVENT_BUS_TYPE } from '../../constants';
@@ -60,7 +59,7 @@ const ViewToolBar = ({ metadataViewId }) => {
return ( return (
<div <div
className={classnames('sf-metadata-tool')} className='sf-metadata-tool'
// style={{ zIndex: Z_INDEX.TABLE_HEADER, transform: 'translateZ(1000px)' }} // style={{ zIndex: Z_INDEX.TABLE_HEADER, transform: 'translateZ(1000px)' }}
onClick={onHeaderClick} onClick={onHeaderClick}
> >

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

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import ReactDom from 'react-dom'; import ReactDom from 'react-dom';
import classnames from 'classnames';
import { Button } from 'reactstrap'; import { Button } from 'reactstrap';
import { DiffViewer } from '@seafile/sdoc-editor'; import { DiffViewer } from '@seafile/sdoc-editor';
import { gettext } from '../../utils/constants'; import { gettext } from '../../utils/constants';
@@ -8,10 +7,10 @@ import Loading from '../../components/loading';
import GoBack from '../../components/common/go-back'; import GoBack from '../../components/common/go-back';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import toaster from '../../components/toast';
import '../../css/layout.css'; import '../../css/layout.css';
import '../../css/sdoc-revision.css'; import '../../css/sdoc-revision.css';
import toaster from '../../components/toast';
const { serviceURL, avatarURL, siteRoot } = window.app.config; const { serviceURL, avatarURL, siteRoot } = window.app.config;
const { username, name } = window.app.pageOptions; 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 d-flex h-100 w-100 o-hidden">
<div className="sdoc-revision-container d-flex flex-column"> <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="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 /> <GoBack />
<div className="file-name text-truncate">{fileName}</div> <div className="file-name text-truncate">{fileName}</div>
</div> </div>

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

@@ -9,6 +9,17 @@
margin-right: 8px; 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) { .nav-item-icon:hover:not(.nav-item-icon-disable) {
background-color: #DFDFDD; background-color: #DFDFDD;
} }

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

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