From 317d2611ba36b167763118abed1eba11ddbfb0d8 Mon Sep 17 00:00:00 2001 From: diminator Date: Wed, 14 Oct 2015 16:17:10 +0200 Subject: [PATCH] spinners part2 scrollbar uploader styles property blur --- js/components/ascribe_forms/form_loan.js | 2 +- js/components/ascribe_forms/property.js | 20 +++--- .../file_drag_and_drop_preview_image.js | 8 ++- .../file_drag_and_drop_preview_other.js | 8 ++- js/components/piece_list.js | 1 - .../ascribe_detail/prize_piece_container.js | 4 +- .../components/prize_settings_container.js | 8 +-- .../ascribe_detail/wallet_piece_container.js | 4 +- .../ascribe_detail/cyland_piece_container.js | 4 +- .../cyland_additional_data_form.js | 8 ++- .../ascribe_detail/ikonotv_piece_container.js | 4 +- .../ikonotv_artist_details_form.js | 8 ++- .../ikonotv_artwork_details_form.js | 8 ++- js/utils/general_utils.js | 15 ---- sass/ascribe_custom_style.scss | 24 ++++++- sass/ascribe_scrollbar.scss | 22 ++++++ sass/ascribe_uploader.scss | 70 ++++++++++--------- sass/main.scss | 13 +--- 18 files changed, 127 insertions(+), 104 deletions(-) create mode 100644 sass/ascribe_scrollbar.scss diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js index fcec0ebd..1ffb572c 100644 --- a/js/components/ascribe_forms/form_loan.js +++ b/js/components/ascribe_forms/form_loan.js @@ -141,7 +141,7 @@ let LoanForm = React.createClass({ return ( -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({
; + actionSymbol = ( +
+ +
+ ); } return ( diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js index 0716b72f..12e52b0a 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js +++ b/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 = ; + actionSymbol = ( +
+ +
+ ); } return ( diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 45d17f74..b0123a8f 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -151,7 +151,6 @@ let PieceList = React.createClass({ }, render() { - //let loadingElement = (); let loadingElement = ; let AccordionListItemType = this.props.accordionListItemType; diff --git a/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js index 73cfa83a..53b479ab 100644 --- a/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js +++ b/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 (
- +
); } diff --git a/js/components/whitelabel/prize/components/prize_settings_container.js b/js/components/whitelabel/prize/components/prize_settings_container.js index 3e274b57..008b5cc2 100644 --- a/js/components/whitelabel/prize/components/prize_settings_container.js +++ b/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 = ; if (this.state.members.length > -1) { content = (
diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js index 8c0efece..58c3eb61 100644 --- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js +++ b/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 (
- +
); } diff --git a/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js index 1be98cfc..59ebe54f 100644 --- a/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js +++ b/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 (
- +
); } diff --git a/js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js b/js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js index c9a928e5..0ddbeb56 100644 --- a/js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js +++ b/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 = (
- +

+ +

); @@ -146,7 +148,7 @@ let CylandAdditionalDataForm = React.createClass({ } else { return (
- +
); } diff --git a/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js b/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js index 1194b14a..d8d58ebe 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js +++ b/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 (
- +
); } diff --git a/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js index eac8eda2..81e0ea5e 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js +++ b/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 = (
- +

+ +

); @@ -141,7 +143,7 @@ let IkonotvArtistDetailsForm = React.createClass({ } else { return (
- +
); } diff --git a/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js index 289fb606..bfd8a5ae 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js +++ b/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 = (
- +

+ +

); @@ -157,7 +159,7 @@ let IkonotvArtworkDetailsForm = React.createClass({ } else { return (
- +
); } diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js index e3dbe03f..390ee749 100644 --- a/js/utils/general_utils.js +++ b/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; -} \ No newline at end of file diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss index e170d498..2d799397 100644 --- a/sass/ascribe_custom_style.scss +++ b/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%); + } } diff --git a/sass/ascribe_scrollbar.scss b/sass/ascribe_scrollbar.scss new file mode 100644 index 00000000..cdb630f5 --- /dev/null +++ b/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; +} diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss index f6c5ab9c..45bda62e 100644 --- a/sass/ascribe_uploader.scss +++ b/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 { - 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; +} + diff --git a/sass/main.scss b/sass/main.scss index 72a97ad0..ab37d699 100644 --- a/sass/main.scss +++ b/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;