haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-03 07:55:36 +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

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