ItemActionbar cleanup and adding cursor when hovering to indicate tha…

…t the portion of the bar is clickable.
wevote · Feb 23, 2016 · 959ba64 · 959ba64
1 parent abd452c
commit 959ba64
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 35 deletions.
diff --git a/src/js/components/ItemActionbar.jsx b/src/js/components/ItemActionbar.jsx
@@ -23,7 +23,7 @@ export default class ItemActionbar extends Component {
     BallotStore.addChangeListener(this.changeListener);
   }
 
-  componentWillUnmount() {
+  componentWillUnmount () {
     BallotStore.removeChangeListener(this.changeListener);
   }
 
@@ -51,50 +51,42 @@ export default class ItemActionbar extends Component {
   }
 
   render () {
-    return (
+    const bold = { fontWeight: "bold" };
+    const { is_support, is_oppose } = this.state;
+
+    // support toggle functions
+    const supportOn = this.supportItem.bind(this);
+    const supportOff = this.stopSupportingItem.bind(this);
+
+    // oppose toggle functions
+    const opposeOn = this.opposeItem.bind(this);
+    const opposeOff = this.stopOpposingItem.bind(this);
+
+    const itemActionBar =
       <div className="item-actionbar row">
-        {this.state.is_support ?
-          <span className="col-xs-4" onClick={ this.stopSupportingItem.bind(this) }>
-            <span className="inline-phone">
-              <span className="glyphicon glyphicon-small glyphicon-arrow-up">
-              </span>
-              <strong> Support</strong>
-            </span>
-          </span>
-         :
-          <span className="col-xs-4" onClick={ this.supportItem.bind(this) }>
-            <span className="inline-phone">
-              <span className="glyphicon glyphicon-small glyphicon-arrow-up">
-              </span>
-              Support
-            </span>
-          </span>
-        }
-        {this.state.is_oppose ?
-          <span className="col-xs-4" onClick={ this.stopOpposingItem.bind(this) }>
-            <span className="inline-phone">
-              <span className="glyphicon glyphicon-small glyphicon-arrow-down">
-              </span>
-              <strong> Oppose</strong>
+        <span className="col-xs-4" onClick={ is_support ? supportOff : supportOn }>
+          <span className="inline-phone">
+            <span className="glyphicon glyphicon-small glyphicon-arrow-up">
             </span>
+            <span style={ is_support ? bold : {} }> Support</span>
           </span>
-          :
-          <span className="col-xs-4" onClick={ this.opposeItem.bind(this) }>
-            <span className="inline-phone">
-              <span className="glyphicon glyphicon-small glyphicon-arrow-down">
-              </span>
-              Oppose
+        </span>
+        <span className="col-xs-4" onClick={ is_oppose ? opposeOff : opposeOn }>
+          <span className="inline-phone">
+            <span className="glyphicon glyphicon-small glyphicon-arrow-down">
             </span>
+            <span style={ is_oppose ? bold : {} }> Oppose</span>
           </span>
-        }
+        </span>
         <span className="col-xs-4" >
           <span className="inline-phone">
             <span className="glyphicon glyphicon-small glyphicon-share-alt">
             </span>
             &nbsp;Share
           </span>
         </span>
-      </div>
-    );
+      </div>;
+
+    return itemActionBar;
   }
 }
diff --git a/src/sass/components/_itemActionbar.scss b/src/sass/components/_itemActionbar.scss
@@ -1,3 +1,6 @@
+.item-actionbar .inline-phone:hover {
+  cursor: pointer;
+}
 .item-actionbar, .item-actionbar2 {
   border-top: 1px solid #DDD;
   padding:10px 5px;

diff --git a/src/sass/main.scss b/src/sass/main.scss
@@ -31,7 +31,7 @@
   './components/_badges',
   './components/_ballotList',
   './components/_itemActionbar',
-  './components/_candidate.scss';
+  './components/_candidate';
 
 // 6. Page-specific styles
 @import