1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00

Fix vertical centering of FileDragAndDrop previews and replace glyphicon checkmark

This commit is contained in:
Tim Daubenschütz 2015-11-20 17:59:26 +01:00
parent 62d7a5863a
commit 943d62dd8c
10 changed files with 22 additions and 24 deletions

View File

@ -62,8 +62,7 @@ const FileDragAndDropPreviewImage = React.createClass({
);
} else {
actionSymbol = (
<span
className="glyphicon glyphicon-ok action-file" />
<span className='ascribe-icon icon-ascribe-ok action-file'/>
);
}

View File

@ -31,11 +31,9 @@ let FileDragAndDropPreviewIterator = React.createClass({
} = this.props;
files = files.filter(displayValidFilesFilter);
const style = files && files.length > 1 ? {marginTop: '2.5em'} : null;
if(files && files.length > 0) {
return (
<div style={style}>
<div>
{files.map((file, i) => {
return (
<FileDragAndDropPreview

View File

@ -66,8 +66,7 @@ const FileDragAndDropPreviewOther = React.createClass({
);
} else {
actionSymbol = (
<span
className="glyphicon glyphicon-ok action-file" />
<span className='ascribe-icon icon-ascribe-ok action-file'/>
);
}

View File

@ -5,10 +5,9 @@ import React from 'react';
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
import { getLangText } from '../../../utils/lang_utils';
let FileDragAndDropPreviewProgress = React.createClass({
const FileDragAndDropPreviewProgress = React.createClass({
propTypes: {
files: React.PropTypes.array
},
@ -45,7 +44,7 @@ let FileDragAndDropPreviewProgress = React.createClass({
let overallProgress = this.calcOverallProgress();
return (
<div style={{marginTop: '2em'}}>
<div style={{marginTop: '1.3em'}}>
<ProgressBar
now={Math.ceil(overallProgress)}
label={'%(percent)s%'}

View File

@ -93,8 +93,9 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
if(uploadedFile) {
return (
<span>
<Glyphicon glyph="ok" />
<span className='ascribe-icon icon-ascribe-ok'/>
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40)}
</span>
);
} else {

View File

@ -8,6 +8,7 @@ import PieceSubmitToPrizeForm from '../../../../../ascribe_forms/form_submit_to_
import { getLangText } from '../../../../../../utils/lang_utils';
let SubmitToPrizeButton = React.createClass({
propTypes: {
className: React.PropTypes.string,
@ -21,8 +22,8 @@ let SubmitToPrizeButton = React.createClass({
<button
disabled
className="btn btn-default btn-xs pull-right">
{getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok"
aria-hidden="true"></span>
{getLangText('Submitted to prize') + ' '}
<span className='ascribe-icon icon-ascribe-ok'/>
</button>
);
}

View File

@ -76,8 +76,8 @@ let CylandAccordionListItem = React.createClass({
<button
disabled
className="btn btn-default btn-xs pull-right">
{getLangText('Submitted to Cyland')} <span className="glyphicon glyphicon-ok"
aria-hidden="true"></span>
{getLangText('Submitted to Cyland') + ' '}
<span className='ascribe-icon icon-ascribe-ok'/>
</button>
</AclProxy>
<AclProxy
@ -86,8 +86,8 @@ let CylandAccordionListItem = React.createClass({
<button
disabled
className="btn btn-default btn-xs pull-right">
{getLangText('Loaned to Cyland')} <span className="glyphicon glyphicon-ok"
aria-hidden="true"></span>
{getLangText('Loaned to Cyland') + ' '}
<span className='ascribe-icon icon-ascribe-ok'/>
</button>
</AclProxy>
</div>

View File

@ -81,8 +81,8 @@ let IkonotvAccordionListItem = React.createClass({
<button
disabled
className="btn btn-default btn-xs pull-right">
{getLangText('Submitted to IkonoTV')} <span className="glyphicon glyphicon-ok"
aria-hidden="true"></span>
{getLangText('Submitted to IkonoTV') + ' '}
<span className='ascribe-icon icon-ascribe-ok'/>
</button>
</AclProxy>
<AclProxy
@ -91,8 +91,8 @@ let IkonotvAccordionListItem = React.createClass({
<button
disabled
className="btn btn-default btn-xs pull-right">
{getLangText('Loaned to IkonoTV')} <span className="glyphicon glyphicon-ok"
aria-hidden="true"></span>
{getLangText('Loaned to IkonoTV') + ' '}
<span className='ascribe-icon icon-ascribe-ok'/>
</button>
</AclProxy>
</div>

View File

@ -83,6 +83,7 @@
.icon-ascribe-ok:before {
content: "\e809";
font-size: .7em;
}
.btn-glyph-ascribe {

View File

@ -118,9 +118,10 @@
color: #d9534f;
}
&.glyphicon-ok, &.glyphicon-ok:hover {
&.icon-ascribe-ok, &.icon-ascribe-ok:hover {
cursor: default;
color: lighten($ascribe--button-default-color, 20%);
font-size: 5em;
}
}
@ -145,7 +146,6 @@
}
}
.file-drag-and-drop-preview-other {
display: table-cell;
text-align: center;
@ -155,7 +155,7 @@
margin-top: 5px;
}
.action-file, .spinner-file {
.action-file:not(.icon-ascribe-ok), .spinner-file {
margin-top: 0;
position: relative;
top: .3em;