1
0
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:
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 { } else {
actionSymbol = ( actionSymbol = (
<span <span className='ascribe-icon icon-ascribe-ok action-file'/>
className="glyphicon glyphicon-ok action-file" />
); );
} }

View 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

View File

@ -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" />
); );
} }

View 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%'}

View File

@ -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 {

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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 {

View File

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