mirror of
https://github.com/ascribe/onion.git
synced 2025-01-03 10:25:08 +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 {
|
} else {
|
||||||
actionSymbol = (
|
actionSymbol = (
|
||||||
<span
|
<span className='ascribe-icon icon-ascribe-ok action-file'/>
|
||||||
className="glyphicon glyphicon-ok action-file" />
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -31,11 +31,9 @@ let FileDragAndDropPreviewIterator = React.createClass({
|
|||||||
} = this.props;
|
} = this.props;
|
||||||
files = files.filter(displayValidFilesFilter);
|
files = files.filter(displayValidFilesFilter);
|
||||||
|
|
||||||
const style = files && files.length > 1 ? {marginTop: '2.5em'} : null;
|
|
||||||
|
|
||||||
if(files && files.length > 0) {
|
if(files && files.length > 0) {
|
||||||
return (
|
return (
|
||||||
<div style={style}>
|
<div>
|
||||||
{files.map((file, i) => {
|
{files.map((file, i) => {
|
||||||
return (
|
return (
|
||||||
<FileDragAndDropPreview
|
<FileDragAndDropPreview
|
||||||
|
@ -66,8 +66,7 @@ const FileDragAndDropPreviewOther = React.createClass({
|
|||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
actionSymbol = (
|
actionSymbol = (
|
||||||
<span
|
<span className='ascribe-icon icon-ascribe-ok action-file'/>
|
||||||
className="glyphicon glyphicon-ok action-file" />
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,10 +5,9 @@ import React from 'react';
|
|||||||
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
|
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
|
||||||
|
|
||||||
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
|
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
|
||||||
import { getLangText } from '../../../utils/lang_utils';
|
|
||||||
|
|
||||||
|
|
||||||
let FileDragAndDropPreviewProgress = React.createClass({
|
const FileDragAndDropPreviewProgress = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
files: React.PropTypes.array
|
files: React.PropTypes.array
|
||||||
},
|
},
|
||||||
@ -45,7 +44,7 @@ let FileDragAndDropPreviewProgress = React.createClass({
|
|||||||
let overallProgress = this.calcOverallProgress();
|
let overallProgress = this.calcOverallProgress();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{marginTop: '2em'}}>
|
<div style={{marginTop: '1.3em'}}>
|
||||||
<ProgressBar
|
<ProgressBar
|
||||||
now={Math.ceil(overallProgress)}
|
now={Math.ceil(overallProgress)}
|
||||||
label={'%(percent)s%'}
|
label={'%(percent)s%'}
|
||||||
|
@ -93,8 +93,9 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
|
|||||||
if(uploadedFile) {
|
if(uploadedFile) {
|
||||||
return (
|
return (
|
||||||
<span>
|
<span>
|
||||||
<Glyphicon glyph="ok" />
|
<span className='ascribe-icon icon-ascribe-ok'/>
|
||||||
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40)}
|
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40)}
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
|
@ -8,6 +8,7 @@ import PieceSubmitToPrizeForm from '../../../../../ascribe_forms/form_submit_to_
|
|||||||
|
|
||||||
import { getLangText } from '../../../../../../utils/lang_utils';
|
import { getLangText } from '../../../../../../utils/lang_utils';
|
||||||
|
|
||||||
|
|
||||||
let SubmitToPrizeButton = React.createClass({
|
let SubmitToPrizeButton = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
@ -21,8 +22,8 @@ let SubmitToPrizeButton = React.createClass({
|
|||||||
<button
|
<button
|
||||||
disabled
|
disabled
|
||||||
className="btn btn-default btn-xs pull-right">
|
className="btn btn-default btn-xs pull-right">
|
||||||
{getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok"
|
{getLangText('Submitted to prize') + ' '}
|
||||||
aria-hidden="true"></span>
|
<span className='ascribe-icon icon-ascribe-ok'/>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -76,8 +76,8 @@ let CylandAccordionListItem = React.createClass({
|
|||||||
<button
|
<button
|
||||||
disabled
|
disabled
|
||||||
className="btn btn-default btn-xs pull-right">
|
className="btn btn-default btn-xs pull-right">
|
||||||
{getLangText('Submitted to Cyland')} <span className="glyphicon glyphicon-ok"
|
{getLangText('Submitted to Cyland') + ' '}
|
||||||
aria-hidden="true"></span>
|
<span className='ascribe-icon icon-ascribe-ok'/>
|
||||||
</button>
|
</button>
|
||||||
</AclProxy>
|
</AclProxy>
|
||||||
<AclProxy
|
<AclProxy
|
||||||
@ -86,8 +86,8 @@ let CylandAccordionListItem = React.createClass({
|
|||||||
<button
|
<button
|
||||||
disabled
|
disabled
|
||||||
className="btn btn-default btn-xs pull-right">
|
className="btn btn-default btn-xs pull-right">
|
||||||
{getLangText('Loaned to Cyland')} <span className="glyphicon glyphicon-ok"
|
{getLangText('Loaned to Cyland') + ' '}
|
||||||
aria-hidden="true"></span>
|
<span className='ascribe-icon icon-ascribe-ok'/>
|
||||||
</button>
|
</button>
|
||||||
</AclProxy>
|
</AclProxy>
|
||||||
</div>
|
</div>
|
||||||
|
@ -81,8 +81,8 @@ let IkonotvAccordionListItem = React.createClass({
|
|||||||
<button
|
<button
|
||||||
disabled
|
disabled
|
||||||
className="btn btn-default btn-xs pull-right">
|
className="btn btn-default btn-xs pull-right">
|
||||||
{getLangText('Submitted to IkonoTV')} <span className="glyphicon glyphicon-ok"
|
{getLangText('Submitted to IkonoTV') + ' '}
|
||||||
aria-hidden="true"></span>
|
<span className='ascribe-icon icon-ascribe-ok'/>
|
||||||
</button>
|
</button>
|
||||||
</AclProxy>
|
</AclProxy>
|
||||||
<AclProxy
|
<AclProxy
|
||||||
@ -91,8 +91,8 @@ let IkonotvAccordionListItem = React.createClass({
|
|||||||
<button
|
<button
|
||||||
disabled
|
disabled
|
||||||
className="btn btn-default btn-xs pull-right">
|
className="btn btn-default btn-xs pull-right">
|
||||||
{getLangText('Loaned to IkonoTV')} <span className="glyphicon glyphicon-ok"
|
{getLangText('Loaned to IkonoTV') + ' '}
|
||||||
aria-hidden="true"></span>
|
<span className='ascribe-icon icon-ascribe-ok'/>
|
||||||
</button>
|
</button>
|
||||||
</AclProxy>
|
</AclProxy>
|
||||||
</div>
|
</div>
|
||||||
|
@ -83,6 +83,7 @@
|
|||||||
|
|
||||||
.icon-ascribe-ok:before {
|
.icon-ascribe-ok:before {
|
||||||
content: "\e809";
|
content: "\e809";
|
||||||
|
font-size: .7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-glyph-ascribe {
|
.btn-glyph-ascribe {
|
||||||
|
@ -118,9 +118,10 @@
|
|||||||
color: #d9534f;
|
color: #d9534f;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.glyphicon-ok, &.glyphicon-ok:hover {
|
&.icon-ascribe-ok, &.icon-ascribe-ok:hover {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
color: lighten($ascribe--button-default-color, 20%);
|
color: lighten($ascribe--button-default-color, 20%);
|
||||||
|
font-size: 5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -145,7 +146,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.file-drag-and-drop-preview-other {
|
.file-drag-and-drop-preview-other {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -155,7 +155,7 @@
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-file, .spinner-file {
|
.action-file:not(.icon-ascribe-ok), .spinner-file {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: .3em;
|
top: .3em;
|
||||||
|
Loading…
Reference in New Issue
Block a user