Merge pull request #150 from ascribe/refactor-piece-list-toolbar-widget-css

Refactor piece list toolbar widget css and remove btn-ascribe-add

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js

@@ -87,7 +87,7 @@ let PieceListToolbarFilterWidget = React.createClass({
                     id="ascribe-piece-list-toolbar-filter-widget-dropdown"
                     pullRight={true}
                     title={filterIcon}
-                    className="ascribe-piece-list-toolbar-filter-widget">
+                    className="ascribe-piece-list-toolbar-widget">
                     {/* We iterate over filterParams, to receive the label and then for each
                         label also iterate over its items, to get all filterable options */}
                     {this.props.filterParams.map(({ label, items }, i) => {
@@ -121,7 +121,7 @@ let PieceListToolbarFilterWidget = React.createClass({
                                         <li
                                             key={itemLabel}
                                             onClick={this.filterBy(param)}
-                                            className="filter-widget-item">
+                                            className="ascribe-piece-list-toolbar-widget-item">
                                             <div className="checkbox-line">
                                                 <span>
                                                     {getLangText(itemLabel)}

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js

@@ -57,7 +57,7 @@ let PieceListToolbarOrderWidget = React.createClass({
                 <DropdownButton
                     id="ascribe-piece-list-toolbar-order-widget-dropdown"
                     pullRight={true}
-                    className="ascribe-piece-list-toolbar-filter-widget"
+                    className="ascribe-piece-list-toolbar-widget"
                     title={orderIcon}>
                     <li style={{'textAlign': 'center'}}>
                         <em>{getLangText('Sort by')}:</em>
@@ -67,7 +67,7 @@ let PieceListToolbarOrderWidget = React.createClass({
                             <li
                                 key={param}
                                 onClick={this.orderBy(param)}
-                                className="filter-widget-item">
+                                className="ascribe-piece-list-toolbar-widget-item">
                                 <div className="checkbox-line">
                                     <span>
                                         {getLangText(param.replace('_', ' '))}

js/components/piece_list.js

@@ -306,12 +306,7 @@ let PieceList = React.createClass({
                     orderBy={this.state.orderBy}
                     applyFilterBy={this.applyFilterBy}
                     applyOrderBy={this.applyOrderBy}>
-                    {customSubmitButton ?
+                    {customSubmitButton}
-                        customSubmitButton :
-                        <button className="btn btn-default btn-ascribe-add">
-                            <span className="icon-ascribe icon-ascribe-add" />
-                        </button>
-                    }
                 </PieceListToolbar>
                 <PieceListBulkModal
                     availableAcls={availableAcls}

sass/ascribe_custom_style.scss

@@ -148,14 +148,10 @@ hr {
     font-weight: $ascribe--font-weight-light;
 }
 
-.icon-ascribe-search{
+.icon-ascribe-search {
     color: $ascribe--button-default-color;
 }
 
-.ascribe-piece-list-toolbar .btn-ascribe-add{
-    display: none;
-}
-
 .ascribe-accordion-list {
     margin-bottom: 1em;
 }
@@ -210,7 +206,6 @@ hr {
 
 .route--login,
 .route--signup {
-
     .btn-spinner {
         background-color: $ascribe--button-default-color;
     }
@@ -233,31 +228,6 @@ hr {
     }
 }
 
-.btn-ascribe-add {
-    width: 30px;
-    height: 30px;
-    background-color: transparent !important;
-    border: 1px solid $ascribe-dark-blue;
-    border-radius: 50%;
-
-    &:hover {
-        border-color: white!important;
-        background-color: $ascribe-dark-blue!important;
-    }
-
-    > span {
-        position: absolute;
-        left: 0;
-        top: 2px;
-        width: 30px;
-        height: 30px;
-        color: $ascribe-dark-blue;
-        padding: 0.4em;
-        &:hover {
-            color: white;
-        }
-    }
-}
 // buttons!
 // thought of the day:
 // "every great atrocity is the result of people just following orders"
@@ -374,19 +344,6 @@ fieldset[disabled] .btn-secondary.active {
     }
 }
 
-.ascribe-piece-list-toolbar-filter-widget button {
-    background-color: transparent;
-    border: 1px solid transparent;
-    color: $ascribe--button-default-color;
-
-    &:hover,
-    &:active {
-        background-color: $ascribe--button-default-color !important;
-        border-color: $ascribe--button-default-color !important;
-        color: white;
-    }
-}
-
 .btn-wide {
     font-weight: $ascribe--font-weight-light;
 }

sass/ascribe_piece_list_toolbar.scss

@@ -1,4 +1,3 @@
-
 .ascribe-piece-list-toolbar {
     padding-left: 15px;
     padding-right: 15px;
@@ -30,17 +29,17 @@
     }
 }
 
-.ascribe-piece-list-toolbar-filter-widget {
+.ascribe-piece-list-toolbar-widget {
-
     button {
-        background-color: rgba(0, 0, 0, 0);
+        background-color: transparent;
-        border: 1px solid rgba(0, 0, 0, 0);
+        border: 1px solid transparent;
-        color: #02b6a3;
+        color: $ascribe--button-default-color;
         padding: 6px 4px 6px 8px;
 
         &:hover,
         &:active {
-            background-color: #02b6a3 !important;
+            background-color: $ascribe--button-default-color !important;
+            border-color: $ascribe--button-default-color !important;
             color: white;
         }
         .caret {
@@ -48,7 +47,7 @@
         }
     }
 
-    .filter-widget-item {
+    .ascribe-piece-list-toolbar-widget-item {
         a {
             padding-left: 0;
             padding-right: 0;

sass/whitelabel/prize/sluice/sluice_custom_style.scss

@@ -60,10 +60,6 @@
     color: $simple-prize--button-color;
 }
 
-.client--sluice .ascribe-piece-list-toolbar .btn-ascribe-add{
-    display: none;
-}
-
 // disabled buttons
 .client--sluice {
     .btn-default.disabled,

sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss

@@ -248,10 +248,6 @@ $vivi23--highlight-color: #2882fa;
     }
 
     /** Other components **/
-    .ascribe-piece-list-toolbar .btn-ascribe-add {
-        display: none;
-    }
-
     .ascribe-accordion-list-table-toggle:hover {
         color: $vivi23--fg-color;
     }

sass/whitelabel/wallet/cc/cc_custom_style.scss

@@ -59,10 +59,6 @@ $cc--button-color: $cc--nav-fg-prim-color;
     color: $cc--button-color;
 }
 
-.client--cc .ascribe-piece-list-toolbar .btn-ascribe-add {
-    display: none;
-}
-
 // disabled buttons
 .client--cc {
     // disabled buttons

sass/whitelabel/wallet/cyland/cyland_custom_style.scss

@@ -60,10 +60,6 @@ $cyland--button-sec-color: #515151;
     color: $cyland--button-color;
 }
 
-.client--cyland .ascribe-piece-list-toolbar .btn-ascribe-add {
-    display: none;
-}
-
 // buttons!
 // thought of the day:
 // "every great atrocity is the result of people just following orders"

sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss

@@ -225,10 +225,6 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
     color: $ikono--button-color;
 }
 
-.client--ikonotv .ascribe-piece-list-toolbar .btn-ascribe-add {
-    display: none;
-}
-
 // spinner!
 .client--ikonotv {