haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 16:31:13 +00:00
Code Issues Releases Wiki Activity

modify repo tag color (#3006)

Browse Source 
* modify repo tag color

* add getDrakColor function
This commit is contained in:
王健辉
2019-02-27 14:14:28 +08:00
committed by Daniel Pan
parent 344eca259a
commit abd5718931
13 changed files with 63 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/cur-dir-path/dir-tool.js
View File

@@ -14,6 +14,7 @@ const propTypes = {
repoName: PropTypes.string.isRequired,
permission: PropTypes.bool.isRequired,
currentPath: PropTypes.string.isRequired,
updateUsedRepoTags: PropTypes.func.isRequired,
};
class DirTool extends React.Component {
@@ -129,6 +130,7 @@ class DirTool extends React.Component {
currentTag={this.state.currentTag}
onClose={this.onCloseRepoTagDialog}
toggleCancel={this.onListTaggedFileToggle}
updateUsedRepoTags={this.props.updateUsedRepoTags}
/>
)}
</Modal>

2
frontend/src/components/cur-dir-path/index.js
View File

@@ -12,6 +12,7 @@ const propTypes = {
onTabNavClick: PropTypes.func,
pathPrefix: PropTypes.array,
isViewFile: PropTypes.bool,
updateUsedRepoTags: PropTypes.func.isRequired,
};
class CurDirPath extends React.Component {
@@ -33,6 +34,7 @@ class CurDirPath extends React.Component {
repoName={this.props.repoName}
permission={this.props.permission}
currentPath={this.props.currentPath}
updateUsedRepoTags={this.props.updateUsedRepoTags}
/>
</Fragment>
);

5
frontend/src/components/dialog/create-tag-dialog.js
View File

@@ -17,7 +17,7 @@ class CreateTagDialog extends React.Component {
tagName: '',
tagColor: '',
newTag: {},
colorList: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'gray']
colorList: ['#FFA8A8', '#FFA94D', '#FFD43B', '#A0EC50', '#A9E34B', '#63E6BE', '#4FD2C9', '#72C3FC', '#91A7FF', '#E599F7', '#B197FC', '#F783AC', '#CED4DA'],
};
this.newInput = React.createRef();
}
@@ -75,14 +75,13 @@ class CreateTagDialog extends React.Component {
<label className="form-label">{gettext('Select a color')}</label>
<div className="row gutters-xs">
{colorList.map((item, index)=>{
var className = 'colorinput-color bg-' + item;
return (
<div key={index} className="col-auto" onChange={this.selectTagcolor}>
<label className="colorinput">
{index===0 ?
<input name="color" type="radio" value={item} className="colorinput-input" defaultChecked onClick={this.selectTagcolor}></input> :
<input name="color" type="radio" value={item} className="colorinput-input" onClick={this.selectTagcolor}></input>}
<span className={className}></span>
<span className="colorinput-color" style={{backgroundColor:item}}></span>
</label>
</div>
);

6
frontend/src/components/dialog/edit-filetag-dialog.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import RepoTag from '../../models/repo-tag';
require('../../css/repo-tag.css');
@@ -72,10 +73,11 @@ class TagItem extends React.Component {
render() {
let repoTag = this.props.repoTag;
let repoTagIdList = this.getRepoTagIdList();
let drakColor = Utils.getDarkColor(repoTag.color);
return (
<li key={repoTag.id} className="tag-list-item" onClick={this.onEditFileTag} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<div className={`tag-demo bg-${repoTag.color}`}>
<span className={`bg-${repoTag.color}-dark ${this.state.showSelectedTag ? 'show-tag-selected': ''}`}></span>
<div className="tag-demo" style={{backgroundColor:repoTag.color}}>
<span className={`${this.state.showSelectedTag ? 'show-tag-selected': ''}`} style={{backgroundColor: drakColor}}></span>
<span className="tag-name">{repoTag.name}</span>
{repoTagIdList.indexOf(repoTag.id) > -1 &&
<i className="fas fa-check tag-operation"></i>

6
frontend/src/components/dialog/list-tag-dialog.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Button, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import RepoTag from '../../models/repo-tag';
import '../../css/repo-tag.css';
@@ -44,10 +45,11 @@ class TagListItem extends React.Component {
render() {
let color = this.props.item.color;
let drakColor = Utils.getDarkColor(color);
return (
<li className="tag-list-item">
<div className={`tag-demo bg-${color}`} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
<span className={`bg-${color}-dark ${this.state.showSelectedTag ? 'show-tag-selected': ''}`}></span>
<div className="tag-demo" style={{backgroundColor:color}} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
<span className={`${this.state.showSelectedTag ? 'show-tag-selected': ''}`} style={{backgroundColor: drakColor}}></span>
<span className="tag-name">{this.props.item.name}</span>
<span className="tag-files" onClick={this.onListTaggedFiles}>
{/* todo 0 file 2 files */}

8
frontend/src/components/dialog/update-tag-dialog.js
View File

@@ -18,7 +18,7 @@ class UpdateTagDialog extends React.Component {
deleteRepoTag: false,
newName: this.props.currentTag.name,
newColor: this.props.currentTag.color,
colorList: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'gray']
colorList: ['#FFA8A8', '#FFA94D', '#FFD43B', '#A0EC50', '#A9E34B', '#63E6BE', '#4FD2C9', '#72C3FC', '#91A7FF', '#E599F7', '#B197FC', '#F783AC', '#CED4DA'],
};
this.newInput = React.createRef();
}
@@ -72,6 +72,9 @@ class UpdateTagDialog extends React.Component {
render() {
let colorList = this.state.colorList;
if (colorList.indexOf(this.props.currentTag.color)===-1) {
colorList.push(this.props.currentTag.color);
}
return (
<Fragment>
<ModalHeader toggle={this.props.onClose}>
@@ -88,14 +91,13 @@ class UpdateTagDialog extends React.Component {
<label className="form-label">{gettext('Select a color')}</label>
<div className="row gutters-xs">
{colorList.map((item, index)=>{
var className = 'colorinput-color bg-' + item;
return (
<div key={index} className="col-auto" onChange={this.selectNewcolor}>
<label className="colorinput">
{item===this.props.currentTag.color ?
<input name="color" type="radio" value={item} className="colorinput-input" defaultChecked onChange={this.selectNewcolor}></input> :
<input name="color" type="radio" value={item} className="colorinput-input" onChange={this.selectNewcolor}></input>}
<span className={className}></span>
<span className="colorinput-color" style={{backgroundColor:item}}></span>
</label>
</div>
);

2
frontend/src/components/dirent-detail/detail-list-view.js
View File

@@ -106,7 +106,7 @@ class DetailListView extends React.Component {
{fileTagList.map((fileTag) => {
return (
<li key={fileTag.id} className="file-tag-item">
<span className={`file-tag bg-${fileTag.color}`}></span>
<span className="file-tag" style={{backgroundColor:fileTag.color}}></span>
<span className="tag-name" title={fileTag.name}>{fileTag.name}</span>
</li>
);

2
frontend/src/components/dirent-list-view/dirent-list-item.js
View File

@@ -377,7 +377,7 @@ class DirentListItem extends React.Component {
{dirent.file_tags.map((fileTag, index) => {
let length = dirent.file_tags.length;
return (
<span className={`file-tag bg-${fileTag.color}`} key={fileTag.id} style={{zIndex: length - index }}></span>
<span className="file-tag" key={fileTag.id} style={{zIndex:length - index, backgroundColor:fileTag.color}}></span>
);
})}
</div>

1
frontend/src/components/file-content-view.js
View File

@@ -102,6 +102,7 @@ class FileContentView extends React.Component {
onPathClick={this.props.onMainNavBarClick}
onTabNavClick={this.props.onTabNavClick}
isViewFile={true}
updateUsedRepoTags={this.props.updateUsedRepoTags}
/>
)}
</div>

2
frontend/src/components/repo-info-bar.js
View File

@@ -75,7 +75,7 @@ class RepoInfoBar extends React.Component {
{usedRepoTags.map((usedRepoTag) => {
return (
<li key={usedRepoTag.id} className="used-tag-item">
<span className={`used-tag bg-${usedRepoTag.color}`}></span>
<span className="used-tag" style={{backgroundColor:usedRepoTag.color}}></span>
<span className="used-tag-name" title={usedRepoTag.name}>{usedRepoTag.name}</span>
<span className="used-tag-files" onClick={this.onListTaggedFiles.bind(this, usedRepoTag)}>
{usedRepoTag.fileCount > 1 ? usedRepoTag.fileCount + ' files' : usedRepoTag.fileCount + ' file'}