1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-04-28 03:10:45 +00:00

change Wiki style (#6143)

This commit is contained in:
Michael An 2024-05-30 17:39:25 +08:00 committed by GitHub
parent 7d512ea230
commit 1eb4cbf4ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 111 additions and 97 deletions

View File

@ -13,5 +13,5 @@
}
.dialog-operation .file-internal-link:hover {
color: #333;
color: #212529;
}

View File

@ -1,22 +1,22 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { gettext, username } from '../../utils/constants';
import WikiCardItem from './wiki-card-item';
const propTypes = {
wikis: PropTypes.array.isRequired,
deleteWiki: PropTypes.func.isRequired,
owner: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
isDepartment: PropTypes.bool.isRequired,
};
class WikiCardGroup extends Component {
render() {
let { wikis, owner } = this.props;
let { wikis, title, isDepartment } = this.props;
return (
<div className='wiki-card-group'>
<h4 className="sf-heading my-4">
<span className={`sf3-font nav-icon sf3-font-${username === owner ? 'mine' : 'department'}`} aria-hidden="true"></span>
{username === owner ? gettext('My Wikis') : wikis[0].owner_nickname}
<div className='wiki-card-group mb-4'>
<h4 className="sf-heading">
<span className={`sf3-font nav-icon sf3-font-${isDepartment ? 'department' : 'mine'}`} aria-hidden="true"></span>
{title}
</h4>
<div className='wiki-card-group-items'>
{wikis.map((wiki, index) => {
@ -25,7 +25,6 @@ class WikiCardGroup extends Component {
key={index}
wiki={wiki}
deleteWiki={this.props.deleteWiki}
owner={owner}
/>
);
})}

View File

@ -7,7 +7,6 @@ import ModalPortal from '../modal-portal';
import WikiDeleteDialog from '../dialog/wiki-delete-dialog';
const propTypes = {
owner: PropTypes.string.isRequired,
wiki: PropTypes.object.isRequired,
deleteWiki: PropTypes.func.isRequired,
};
@ -57,11 +56,10 @@ class WikiCardItem extends Component {
renderAvatar = () => {
const { wiki } = this.props;
// const userProfileURL = `${siteRoot}profile/${encodeURIComponent(wiki.owner)}/`;
return (
<div className="wiki-card-item-avatar-container">
<img src={appAvatarURL} className="avatar mr-1" alt={gettext('Avatar')} />
<span title={wiki.owner_nickname}>{wiki.owner_nickname}</span>
<img className="wiki-card-item-avatar" src={appAvatarURL} alt={wiki.owner_nickname}/>
<span className="wiki-card-item-owner text-truncate" title={wiki.owner_nickname}>{wiki.owner_nickname}</span>
</div>
);
};
@ -70,14 +68,14 @@ class WikiCardItem extends Component {
const { wiki } = this.props;
return (
<div className="wiki-card-item-avatar-container">
<span className='sf3-font-department sf3-font nav-icon mr-1'></span>
<span title={wiki.owner_nickname}>{wiki.owner_nickname}</span>
<span className='sf3-font-department sf3-font nav-icon'></span>
<span className="wiki-card-item-owner text-truncate" title={wiki.owner_nickname}>{wiki.owner_nickname}</span>
</div>
);
};
render() {
const { owner, wiki } = this.props;
const { wiki } = this.props;
let isOldVersion = wiki.version !== 'v2';
let publishedUrl = `${siteRoot}published/${encodeURIComponent(wiki.slug)}/`;
let editUrl = `${siteRoot}wikis/${wiki.id}/`;
@ -86,7 +84,7 @@ class WikiCardItem extends Component {
<>
<div className="wiki-card-item" onClick={this.clickWikiCard.bind(this, isOldVersion ? publishedUrl : editUrl )}>
<div className="wiki-card-item-top">
<div className="d-flex align-items-center">
<div className="d-flex align-items-center" style={{width: 'calc(100% - 46px)'}}>
<span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
<span className="wiki-card-item-name ml-2 text-truncate" title={wikiName} aria-label={wikiName}>{wikiName}</span>
</div>
@ -110,7 +108,7 @@ class WikiCardItem extends Component {
</Dropdown>
</div>
<div className="wiki-card-item-bottom">
{owner === username ? this.renderAvatar() : this.renderDept()}
{wiki.owner === username ? this.renderAvatar() : this.renderDept()}
<span className="wiki-item-updated-time">{moment(wiki.updated_at).fromNow()}</span>
</div>
</div>

View File

@ -1,3 +1,7 @@
.wiki-card-group .sf-heading {
margin: 16px 0 10px;
}
.wiki-card-group-items {
display: grid;
grid-template-columns: 32.5% 32.5% 32.5%;
@ -7,8 +11,8 @@
.wiki-card-item {
height: 120px;
width: 100%;
border: 1px solid #EEEEEE;
padding: 20px;
border: 1px solid #eee;
padding: 16px;
border-radius: 6px;
display: flex;
flex-direction: column;
@ -37,12 +41,13 @@
}
.wiki-card-item .wiki-card-item-top .sf3-font-wiki.sf3-font {
color: #FF8900;
color: #FF9800;
font-size: 24px;
height: 24px;
line-height: 24px;
}
.wiki-card-item .wiki-card-item-top .wiki-card-item-name {
max-width: 220px;
font-size: 16px;
}
@ -52,6 +57,7 @@
border-radius: 3px;
opacity: 0;
color: #444;
margin-left: 20px;
}
.wiki-card-item:hover .wiki-card-item-top .dropdown .sf-dropdown-toggle {
@ -63,26 +69,30 @@
}
.wiki-card-item .wiki-card-item-avatar-container {
height: 20px;
display: flex;
display: inline-flex;
align-items: center;
border: 1px solid #EEEEEE;
border: 1px solid #eee;
border-radius: 10px;
padding: 2px;
height: 20px;
max-width: 50%;
padding: 0 8px 0 2px;
}
.wiki-card-item .wiki-card-item-avatar-container .avatar {
width: 16px;
.wiki-card-item .wiki-card-item-avatar-container .wiki-card-item-avatar {
border-radius: 50%;
height: 16px;
width: 16px;
}
.wiki-card-item .wiki-card-item-avatar-container span {
.wiki-card-item .wiki-card-item-avatar-container .wiki-card-item-owner {
display: inline-block;
font-size: 13px;
line-height: 20px;
margin-left: 5px;
}
.wiki-card-item .wiki-card-item-avatar-container .sf3-font-department {
font-size: 1rem;
line-height: 1;
font-size: 14px;
color: #999;
}

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { username } from '../../utils/constants';
import { gettext, username } from '../../utils/constants';
import WikiCardGroup from './wiki-card-group';
import './wiki-card-view.css';
@ -12,19 +12,22 @@ const propTypes = {
class WikiCardView extends Component {
classifyWikis = (wikis) => {
let v1Wikis = [];
let myWikis = [];
let department2WikisMap = {};
for (let i = 0; i < wikis.length; i++) {
if (wikis[i].owner === username) {
if (wikis[i].version === 'v1') {
v1Wikis.push(wikis[i]);
} else if (wikis[i].owner === username) {
myWikis.push(wikis[i]);
continue;
} else {
if (!department2WikisMap[wikis[i].owner]) {
department2WikisMap[wikis[i].owner] = [];
}
department2WikisMap[wikis[i].owner].push(wikis[i]);
}
if (!department2WikisMap[wikis[i].owner]) {
department2WikisMap[wikis[i].owner] = [];
}
department2WikisMap[wikis[i].owner].push(wikis[i]);
}
return { department2WikisMap, myWikis };
return { department2WikisMap, myWikis, v1Wikis };
};
render() {
@ -36,24 +39,37 @@ class WikiCardView extends Component {
if (errorMsg) {
return <p className="error text-center">{errorMsg}</p>;
}
const { myWikis, department2WikisMap } = this.classifyWikis(wikis);
const { v1Wikis, myWikis, department2WikisMap } = this.classifyWikis(wikis);
let wikiCardGroups = [];
wikiCardGroups.push(
<WikiCardGroup
key='my-Wikis'
deleteWiki={this.props.deleteWiki}
wikis={myWikis}
owner={username}
title={gettext('My Wikis')}
isDepartment={false}
/>
);
for (let key in department2WikisMap) {
wikiCardGroups.push(
<WikiCardGroup
key={'department-Wikis' + key}
deleteWiki={this.props.deleteWiki}
wikis={department2WikisMap[key]}
owner={key}
title={department2WikisMap[key][0].owner_nickname}
isDepartment={true}
/>
);
}
wikiCardGroups.push(
<WikiCardGroup
key='old-Wikis'
deleteWiki={this.props.deleteWiki}
wikis={v1Wikis}
title={gettext('Old Wikis')}
isDepartment={false}
/>
);
return wikiCardGroups;
}
}

View File

@ -40,7 +40,7 @@
line-height: 1.5rem;
vertical-align: middle;
font-size: 1rem;
color: #322;
color: #212529;
}
.detail-body {
@ -93,7 +93,7 @@
.dirent-table-container td {
font-size: 14px;
color: #333;
color: #212529;
word-break: break-all;
}
@ -136,7 +136,7 @@
.file-related-files ul li a,
.list-related-file-table tr td a {
color: #333;
color: #212529;
}
.list-related-file-body {

View File

@ -27,7 +27,7 @@
background-color: #f0f0f0;
padding: 0.625rem;
font-size: 1rem;
color: #322;
color: #212529;
display: flex;
justify-content: space-between;
min-height: 2.25rem;

View File

@ -3,7 +3,7 @@
cursor: pointer;
}
.activity-details:hover {
color: #333;
color: #212529;
}
.mobile-activity-time {
display: inline-block;

View File

@ -62,7 +62,7 @@
}
.grid-file-name-link {
color: #333;
color: #212529;
font-size: 0.875rem;
}

View File

@ -41,5 +41,5 @@
}
#img-prev:hover,
#img-next:hover {
color:#333;
color:#212529;
}

View File

@ -53,14 +53,14 @@
display: flex;
flex-shrink: 0;
background: #fff;
border-bottom: 1px solid #e8e8e8;
border-bottom: 1px solid #eee;
box-shadow: 0 2px 4px rgba(0,0,0, 10%);
z-index: 100;
}
@media (max-width: 767px) {
.side-panel-north {
border-right: 1px solid #eee;
border-right: 1px solid #eee;
}
.main-panel-north {
@ -92,7 +92,6 @@
}
.cur-view-path {
position: relative; /* for the ':after' */
padding: 8px 16px;
max-height: 48px;
background: #fff;
@ -100,15 +99,7 @@
align-items: center;
flex-shrink: 0;
justify-content: space-between;
}
.cur-view-path:after {
position: absolute;
left: 16px;
right: 16px;
bottom: 0;
content: '';
border-bottom: 1px solid #e8e8e8;
border-bottom: 1px solid #eee;
}
.cur-view-content {

View File

@ -17,7 +17,7 @@
#notifications .title {
line-height: 1.5;
font-size: 1rem;
color: #322;
color: #212529;
font-weight: normal;
}

View File

@ -44,7 +44,7 @@
}
.file-info a {
color: #333;
color: #212529;
}
.info-icon {

View File

@ -19,7 +19,7 @@
.account-dialog .nav-pills .nav-item .nav-link {
padding: .3125rem 1rem .3125rem 8px;
color: #333;
color: #212529;
}
.account-dialog .nav-pills .nav-item .nav-link:hover {
@ -59,7 +59,7 @@
.account-dialog table td {
padding: 3px 0.1875rem;
color: #333;
color: #212529;
font-size: 14px;
word-break: break-all;
}

View File

@ -52,7 +52,7 @@
}
.search-icon-right:hover {
color: #333;
color: #212529;
text-decoration: none;
}

View File

@ -2,7 +2,7 @@
padding: 8px 16px;
background: #f9f9f9;
font-size: 1rem;
color: #322;
color: #212529;
font-weight: normal;
line-height: 1.5;
margin: 0;

View File

@ -8,7 +8,7 @@
.sys-stat-tool {
display: flex;
font-size: 13px;
color: #333;
color: #212529;
}
.system-statistic-item {
@ -43,7 +43,7 @@
.statistic-traffic-tab {
display: flex;
font-size: 13px;
color: #333;
color: #212529;
margin-top: 10px;
}

View File

@ -98,7 +98,7 @@
.notification-dialog-body table td {
padding: 0.5rem 0.1875rem;
border-bottom: 1px solid #eee;
color: #333;
color: #212529;
font-size: 14px;
word-break: break-all;
}

View File

@ -23,7 +23,7 @@ body {
padding: 8px 16px;
background: #f9f9f9;
font-size: 1rem;
color: #322;
color: #212529;
font-weight: normal;
line-height: 1.5;
margin:0;
@ -74,7 +74,7 @@ body {
margin: 0;
padding-left: 1em;
border-left: 2px solid transparent;
color: #333;
color: #212529;
}
.user-setting-nav .nav-item.active .nav-link {
color: #ff9800;

View File

@ -17,7 +17,7 @@
.dirent-table-container td {
font-size: 14px;
color: #333;
color: #212529;
word-break: break-all;
}
@ -54,7 +54,7 @@
.file-related-files ul li a,
.list-related-file-table tr td a {
color: #333;
color: #212529;
}
.list-related-file-body {

View File

@ -254,7 +254,7 @@
}
.sdoc-file-history-versions .history-list-item .history-operation:hover a.fas {
color: #333;
color: #212529;
}
.sdoc-file-history-versions .history-list-item.item-active {
@ -343,7 +343,7 @@
}
.sdoc-file-history-versions .daily-history-detail-toggle .dropdown-toggle:hover {
color: #333;
color: #212529;
cursor: pointer;
}

View File

@ -217,7 +217,7 @@ form,input,textarea,select,button,img {
body, input, textarea, button, select {
font-size: 13px;
line-height: 1.5;
color: #333;
color: #212529;
word-wrap:break-word;
}
input, button, select { line-height:19px;/*for ff*/ }
@ -226,7 +226,7 @@ h1, h2, h3, h4, h5, h6 {
}
h1 { font-size:1.9em; }
h2 { font-size:1.5em; color:#222; font-weight:bold; }
h3 { font-size:16px; color:#322; font-weight:normal; }
h3 { font-size:16px; color:#212529; font-weight:normal; }
h4 { font-size:1.1em; color:#222; font-weight:normal; }
h5, h6 { font-size:1em; }
ul { list-style:none; }
@ -279,7 +279,7 @@ select {
}
.sf-btn-link {
display:inline-block;
color:#333;
color:#212529;
line-height:19px;
text-decoration:none;
font-weight:normal;
@ -291,7 +291,7 @@ select {
border-radius:3px;
}
.sf-btn-link:hover {
color:#333;
color:#212529;
text-decoration:none;
}
input[type=radio] {
@ -368,7 +368,7 @@ th, td {
border-bottom:1px solid #eee;
}
td {
color: #333;
color: #212529;
font-size:14px;
word-break:break-all; /* mainly for lib/folder/file name */
}
@ -429,7 +429,7 @@ table img { vertical-align:middle; }
.hl { background-color: #f8f8f8; } /* highlight */
.tip { color:#808080; font-size:12px; }
.tick-green { color:green; }
.label { color:#333; font-size:12px; font-style:normal; }
.label { color:#212529; font-size:12px; font-style:normal; }
.italic { font-style:italic; }
.alc { text-align: center;}
.cspt { cursor:pointer; }
@ -831,7 +831,7 @@ textarea:-moz-placeholder {/* for FF */
display:block;
font-size:15px;
padding:4px 4px 4px 0;
color:#333;
color:#212529;
font-weight:normal;
}
.side-tabnav-tabs .tab a:focus {
@ -1135,7 +1135,7 @@ textarea:-moz-placeholder {/* for FF */
padding:40px 200px 40px 60px;
font-size:14px;
line-height:1.6;
color:#333;
color:#212529;
}
.article h2,
.article h3,
@ -1143,7 +1143,7 @@ textarea:-moz-placeholder {/* for FF */
.article h5,
.article h6 {
margin: 1.2em 0 0.4em;
color:#333;
color:#212529;
font-weight:bold;
}
.article h1 + p, .article h2 + p, .article h3 + p, .article h4 + p, .article h5 + p, .article h6 + p,
@ -1312,7 +1312,7 @@ a.sf-popover-item {
.wiki-nav .link {
display:inline-block;
font-size:15px;
color:#333;
color:#212529;
line-height:1.5;
font-weight:normal;
padding: 4px 10px 9px;
@ -1419,7 +1419,7 @@ a.sf-popover-item {
border-bottom:1px solid #ddd;
}
.account-popup a.item {
color:#333;
color:#212529;
font-weight:normal;
}
.account-popup a.item:hover {
@ -1606,7 +1606,7 @@ a.sf-popover-item {
color:#888;
}
#traffic-stat {
color: #333;
color: #212529;
font-weight: normal;
}
#notices-loading,
@ -1653,7 +1653,7 @@ a.sf-popover-item {
margin-left:5px;
}
.commit-time {
color:#333;
color:#212529;
font-size:13px;
font-weight:normal;
margin-top: 0em;
@ -1673,7 +1673,7 @@ a.sf-popover-item {
}
.fileinput-button .icon-plus {
font-size:13px;
color:#333;
color:#212529;
}
.fileinput-button input {
position: absolute;

View File

@ -143,7 +143,7 @@ a, a:hover { color: #ec8000; }
}
.sf-heading {
font-size: 1rem;
color: #322;
color: #212529;
font-weight: normal;
line-height: 1.5;
}
@ -200,7 +200,7 @@ a, a:hover { color: #ec8000; }
.sf-dropdown-toggle:focus,
.sf-dropdown-toggle:hover {
color: #333;
color: #212529;
}
.user-select-none {
@ -366,7 +366,7 @@ a, a:hover { color: #ec8000; }
.op-icon:focus,
.op-icon:hover {
color: #333;
color: #212529;
text-decoration: none;
}
@ -379,7 +379,7 @@ a, a:hover { color: #ec8000; }
.action-icon:hover,
.attr-action-icon:focus,
.attr-action-icon:hover {
color: #333 !important;
color: #212529 !important;
text-decoration: none;
}
@ -464,7 +464,7 @@ a, a:hover { color: #ec8000; }
}
.account-popup a.item {
color:#333;
color:#212529;
font-weight:normal;
}
@ -557,7 +557,7 @@ a, a:hover { color: #ec8000; }
.nav-pills .nav-item .nav-link {
padding: 0.25rem;
color: #333;
color: #212529;
}
.nav-pills .nav-item .nav-link:hover {
@ -919,7 +919,7 @@ table th {
table td {
padding: 0.5rem 0.1875rem;
border-bottom: 1px solid #e8e8e8;
color: #333;
color: #212529;
font-size: 0.875rem;
word-break: break-all;
}