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:
parent
62d7a5863a
commit
943d62dd8c
@ -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'/>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
|
@ -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'/>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -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%'}
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -83,6 +83,7 @@
|
||||
|
||||
.icon-ascribe-ok:before {
|
||||
content: "\e809";
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
.btn-glyph-ascribe {
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user