spinners part2

scrollbar

uploader styles

property blur

js/components/ascribe_forms/form_loan.js

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

js/components/ascribe_forms/property.js

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

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js

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

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js

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

js/components/piece_list.js

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

js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js

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

js/components/whitelabel/prize/components/prize_settings_container.js

@@ -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 = (
+        let content = <AscribeSpinner color='dark-blue' size='md' />;
-            <div style={{textAlign: 'center'}}>
-                <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
-            </div>);
-
         if (this.state.members.length > -1) {
             content = (
                 <div>

js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js

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

js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js

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

js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js

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

js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js

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

js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js

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

js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js

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

js/utils/general_utils.js

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

sass/ascribe_custom_style.scss

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

sass/ascribe_scrollbar.scss

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

sass/ascribe_uploader.scss

@@ -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 {
+    .action-file, .spinner-file {
-        color: white;
-        cursor: pointer;
-        font-size: 2.5em;
         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 {
+    .action-file, .spinner-file {
-        color: white;
-        cursor: pointer;
-        font-size: 2.5em;
         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;
+}
+

sass/main.scss

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