ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

spinners part2 

scrollbar

uploader styles

property blur
This commit is contained in:
diminator 2015-10-14 16:17:10 +02:00
parent a457439347
commit 317d2611ba
18 changed files with 127 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_forms/form_loan.js
View File

@ -141,7 +141,7 @@ let LoanForm = React.createClass({
return (
<Property
name="terms"
className="ascribe-sproperty-collapsible-toggle"
className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}>
<InputCheckbox
key="terms_explicitly"

20
js/components/ascribe_forms/property.js
View File

@ -8,7 +8,7 @@ import Tooltip from 'react-bootstrap/lib/Tooltip';
import AppConstants from '../../constants/application_constants';
import { mergeOptions, isDescendantOfDOMNode } from '../../utils/general_utils';
import { mergeOptions } from '../../utils/general_utils';
let Property = React.createClass({
@ -146,7 +146,12 @@ let Property = React.createClass({
if(typeof this.props.onClick === 'function') {
this.props.onClick();
}
// skip the focus of non-input elements
let nonInputHTMLElements = ['pre', 'div'];
if (this.refs.input &&
nonInputHTMLElements.indexOf(this.refs.input.getDOMNode().nodeName.toLowerCase()) > -1 ) {
return;
}
this.refs.input.getDOMNode().focus();
this.setState({
isFocused: true
@ -154,13 +159,6 @@ let Property = React.createClass({
},
handleBlur(event) {
let e = event.toElement || event.relatedTarget;
if (isDescendantOfDOMNode(this.getDOMNode(), e)){
return;
}
if (this.refs.input.getDOMNode() === document.activeElement) {
return;
}
this.setState({
isFocused: false
});
@ -215,7 +213,7 @@ let Property = React.createClass({
style,
onChange: this.handleChange,
onFocus: this.handleFocus,
onClick: this.handleClick,
onBlur: this.handleBlur,
disabled: !this.props.editable,
ref: 'input'
});
@ -249,8 +247,6 @@ let Property = React.createClass({
<div
className={'ascribe-property-wrapper ' + this.getClassName()}
onClick={this.handleFocus}
onMouseOut={this.handleBlur}
onMouseOver={this.handleBlur}
style={style}>
<OverlayTrigger
delay={500}

8
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
View File

@ -3,7 +3,7 @@
import React from 'react';
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
import AppConstants from '../../../constants/application_constants';
import AscribeSpinner from '../../ascribe_spinner';
import { getLangText } from '../../../utils/lang_utils';
let FileDragAndDropPreviewImage = React.createClass({
@ -53,7 +53,11 @@ let FileDragAndDropPreviewImage = React.createClass({
}
} else {
actionSymbol = <img height={35} className="action-file" src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
actionSymbol = (
<div className="spinner-file">
<AscribeSpinner color='dark-blue' size='md' />
</div>
);
}
return (

8
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
View File

@ -3,7 +3,7 @@
import React from 'react';
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
import AppConstants from '../../../constants/application_constants';
import AscribeSpinner from '../../ascribe_spinner';
import { getLangText } from '../../../utils/lang_utils';
let FileDragAndDropPreviewOther = React.createClass({
@ -49,7 +49,11 @@ let FileDragAndDropPreviewOther = React.createClass({
}
} else {
actionSymbol = <img height={35} src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
actionSymbol = (
<div className="spinner-file">
<AscribeSpinner color='dark-blue' size='md' />
</div>
);
}
return (

1
js/components/piece_list.js
View File

@ -151,7 +151,6 @@ let PieceList = React.createClass({
},
render() {
//let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />);
let loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
let AccordionListItemType = this.props.accordionListItemType;

4
js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
View File

@ -20,7 +20,7 @@ import UserStore from '../../../../../stores/user_store';
import Piece from '../../../../../components/ascribe_detail/piece';
import Note from '../../../../../components/ascribe_detail/note';
import AppConstants from '../../../../../constants/application_constants';
import AscribeSpinner from '../../../../ascribe_spinner';
import Form from '../../../../../components/ascribe_forms/form';
import Property from '../../../../../components/ascribe_forms/property';
@ -149,7 +149,7 @@ let PieceContainer = React.createClass({
} else {
return (
<div className="fullpage-spinner">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
<AscribeSpinner color='dark-blue' size='lg' />
</div>
);
}

8
js/components/whitelabel/prize/components/prize_settings_container.js
View File

@ -20,7 +20,7 @@ import ActionPanel from '../../../ascribe_panel/action_panel';
import GlobalNotificationModel from '../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../actions/global_notification_actions';
import AppConstants from '../../../../constants/application_constants';
import AscribeSpinner from '../../../ascribe_spinner';
import ApiUrls from '../../../../constants/api_urls';
import { getLangText } from '../../../../utils/lang_utils';
@ -257,11 +257,7 @@ let PrizeJurySettings = React.createClass({
},
getMembers() {
let content = (
<div style={{textAlign: 'center'}}>
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
</div>);
let content = <AscribeSpinner color='dark-blue' size='md' />;
if (this.state.members.length > -1) {
content = (
<div>

4
js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
View File

@ -13,7 +13,7 @@ import Note from '../../../../ascribe_detail/note';
import DetailProperty from '../../../../ascribe_detail/detail_property';
import ApiUrls from '../../../../../constants/api_urls';
import AppConstants from '../../../../../constants/application_constants';
import AscribeSpinner from '../../../../ascribe_spinner';
import { getLangText } from '../../../../../utils/lang_utils';
@ -81,7 +81,7 @@ let WalletPieceContainer = React.createClass({
else {
return (
<div className="fullpage-spinner">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
<AscribeSpinner color='dark-blue' size='lg' />
</div>
);
}

4
js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js
View File

@ -15,7 +15,7 @@ import CylandAdditionalDataForm from '../ascribe_forms/cyland_additional_data_fo
import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container';
import AppConstants from '../../../../../../constants/application_constants';
import AscribeSpinner from '../../../../../ascribe_spinner';
import { getLangText } from '../../../../../../utils/lang_utils';
import { mergeOptions } from '../../../../../../utils/general_utils';
@ -76,7 +76,7 @@ let CylandPieceContainer = React.createClass({
else {
return (
<div className="fullpage-spinner">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
<AscribeSpinner color='dark-blue' size='lg' />
</div>
);
}

8
js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js
View File

@ -13,7 +13,7 @@ import GlobalNotificationModel from '../../../../../../models/global_notificatio
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import ApiUrls from '../../../../../../constants/api_urls';
import AppConstants from '../../../../../../constants/application_constants';
import AscribeSpinner from '../../../../../ascribe_spinner';
import requests from '../../../../../../utils/requests';
@ -92,7 +92,9 @@ let CylandAdditionalDataForm = React.createClass({
spinner = (
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
<p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>
);
@ -146,7 +148,7 @@ let CylandAdditionalDataForm = React.createClass({
} else {
return (
<div className="ascribe-loading-position">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
<AscribeSpinner color='dark-blue' size='md'/>
</div>
);
}

4
js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js
View File

@ -17,7 +17,7 @@ import IkonotvArtworkDetailsForm from '../ascribe_forms/ikonotv_artwork_details_
import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container';
import AppConstants from '../../../../../../constants/application_constants';
import AscribeSpinner from '../../../../../ascribe_spinner';
import { getLangText } from '../../../../../../utils/lang_utils';
import { mergeOptions } from '../../../../../../utils/general_utils';
@ -104,7 +104,7 @@ let IkonotvPieceContainer = React.createClass({
else {
return (
<div className="fullpage-spinner">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
<AscribeSpinner color='dark-blue' size='lg' />
</div>
);
}

8
js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js
View File

@ -11,7 +11,7 @@ import GlobalNotificationModel from '../../../../../../models/global_notificatio
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import ApiUrls from '../../../../../../constants/api_urls';
import AppConstants from '../../../../../../constants/application_constants';
import AscribeSpinner from '../../../../../ascribe_spinner';
import requests from '../../../../../../utils/requests';
@ -74,7 +74,9 @@ let IkonotvArtistDetailsForm = React.createClass({
spinner = (
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
<p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>
);
@ -141,7 +143,7 @@ let IkonotvArtistDetailsForm = React.createClass({
} else {
return (
<div className="ascribe-loading-position">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
<AscribeSpinner color='dark-blue' size='lg' />
</div>
);
}

8
js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js
View File

@ -11,7 +11,7 @@ import GlobalNotificationModel from '../../../../../../models/global_notificatio
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import ApiUrls from '../../../../../../constants/api_urls';
import AppConstants from '../../../../../../constants/application_constants';
import AscribeSpinner from '../../../../../ascribe_spinner';
import requests from '../../../../../../utils/requests';
@ -73,7 +73,9 @@ let IkonotvArtworkDetailsForm = React.createClass({
spinner = (
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
<p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>
);
@ -157,7 +159,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
} else {
return (
<div className="ascribe-loading-position">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
<AscribeSpinner color='dark-blue' size='lg' />
</div>
);
}

15
js/utils/general_utils.js
View File

@ -234,18 +234,3 @@ export function getSubdomain() {
return tokens.length > 2 ? tokens[0] : 'www';
}
/**
* Checks if the child DOM node is a descendant of the parent DOM node
* @return {boolean}
*/
export function isDescendantOfDOMNode(parent, child) {
let node = child.parentNode;
while (node != null) {
if (node === parent) {
return true;
}
node = node.parentNode;
}
return false;
}

24
sass/ascribe_custom_style.scss
View File

@ -157,6 +157,10 @@ hr {
color: $ascribe--button-default-color;
}
.ascribe-piece-list-toolbar .btn-ascribe-add{
display: none;
}
.ascribe-accordion-list {
margin-bottom: 1em;
}
@ -494,6 +498,9 @@ fieldset[disabled] .btn-secondary.active {
.ascribe-input-glyph > .form-group > .input-group > .input-group-addon > .filter-glyph {
color: $ascribe--button-default-color;
}
.search-bar > .form-group {
margin: 0;
}
.search-bar > .form-group > .input-group {
border: 1px solid rgba(0, 0, 0, 0);
@ -634,10 +641,21 @@ fieldset[disabled] .btn-secondary.active {
// notifications
.ascribe-global-notification-success {
background-color: $ascribe--button-default-color;
background-color: lighten($ascribe--button-default-color, 20%);
}
// progress bar
// uploader
.ascribe-progress-bar > .progress-bar {
background-color: $ascribe--button-default-color;
background-color: lighten($ascribe--button-default-color, 20%);
}
.action-file {
text-shadow: -1px 0 black,
0 1px black,
1px 0 black,
0 -1px black;
&:hover {
color: lighten($ascribe--button-default-color, 20%);
}
}

22
sass/ascribe_scrollbar.scss Normal file
View File

@ -0,0 +1,22 @@
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-button {
width: 8px;
height:5px;
}
::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0 0 3px #dfdfdf inset;
border-radius:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
background:#7d7d7d;
}

70
sass/ascribe_uploader.scss
View File

@ -8,7 +8,6 @@
overflow: auto;
text-align: center;
vertical-align: middle;
cursor: default !important;
padding: 1.5em 0 1.5em 0;
.file-drag-and-drop-dialog > p:first-child {
@ -108,6 +107,29 @@
cursor: default;
overflow: hidden;
}
.action-file {
color: white;
cursor: pointer;
font-size: 2.5em;
text-shadow: -1px 0 black,
0 1px black,
1px 0 black,
0 -1px black;
&:link,
&:visited,
&:hover,
&:active {
text-decoration: none;
}
&:hover {
color: #d9534f;
}
}
.spinner-file {
font-size: 2.5em;
}
.file-drag-and-drop-preview-image {
border: 1px solid #616161;
@ -117,23 +139,8 @@
text-align: center;
width: 104px;
.action-file {
color: white;
cursor: pointer;
font-size: 2.5em;
.action-file, .spinner-file {
margin-top: .6em;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
&:link,
&:visited,
&:hover,
&:active {
text-decoration: none;
}
&:hover {
color: #d9534f;
}
}
}
@ -147,29 +154,26 @@
margin-top: 5px;
}
.action-file {
color: white;
cursor: pointer;
font-size: 2.5em;
.action-file, .spinner-file {
margin-top: 0;
position: relative;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
top: .3em;
&:link,
&:visited,
&:hover,
&:active {
text-decoration: none;
}
&:hover {
color: #d9534f;
}
span:not(:first-child) {
display: block;
margin-top: .5em;
}
}
}
.ascribe-progress-bar {
margin-bottom: 0;
> .progress-bar {
background-color: $ascribe-color-green;
}
}
.ascribe-progress-bar-xs {
height: 12px;
}

13
sass/main.scss
View File

@ -37,6 +37,7 @@ $BASE_URL: '<%= BASE_URL %>';
@import 'ascribe_collapsible';
@import 'ascribe_custom_style';
@import 'ascribe_spinner';
@import 'ascribe_scrollbar';
@import 'whitelabel/index';
@ -345,18 +346,6 @@ hr {
text-align: center;
}
.ascribe-progress-bar {
margin-bottom: 0;
> .progress-bar {
background-color: $ascribe-color-green;
}
}
.ascribe-progress-bar-xs {
height: 12px;
}
.ascribe-piece-list-filter-display {
padding-left: 10px;
padding-right: 10px;