Merge pull request #404 from webpack/feature/vote-design

new design for the vote app

Author: sokra

components/vote/app-style.scss

@@ -3,9 +3,7 @@
 
 .vote-app {
   &__self-info {
-    border-left: 1px solid black;
-    border-right: 1px solid black;
-    border-bottom: 1px solid black;
+    margin-top: 10px;
   }
 
   &__update-button {
@@ -32,87 +30,45 @@
     }
   }
 
-  &__vote-list {
-    display: flex;
-
-    & > li {
-      display: block;
-      padding: 5px;
-      flex: 2;
-      text-align: center;
-    }
-
-    & > .vote-app__vote-score {
-      flex: 1;
-      width: auto;
-      font-size: 150%;
-    }
+  &__item-table td {
+    vertical-align: middle;
   }
 
+  &__item-score {
+    font-size: 150%;
+  }
 
   &__items-list {
     display: block;
 
     & > li {
       display: block;
       padding: 5px;
-      border: 1px solid black;
-      border-top: inherit;
-
-      &:first-child {
-        border-top: 1px solid black;
-      }
-    }
-  }
-
-  &__vote-buttons {
-    display: flex;
-  }
-
-  &__vote-positive {
-    text-align: left;
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    > * {
-      height: 20px;
-    }
-  }
-
-  &__vote-negative {
-    text-align: right;
-    flex: 1;
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    > * {
-      height: 20px;
     }
   }
 
-  &__currency-influence, &__vote-influence &__vote-value {
+  &__currency-influence, &__vote-influence {
     color: blue;
     &:before {
       content: "♦\2009";
     }
   }
 
-  &__currency-goldenInfluence, &__vote-golden &__vote-value {
+  &__currency-goldenInfluence, &__vote-golden {
     color: #bfa203;
     &:before {
       content: "♦\2009";
     }
   }
 
-  &__currency-support, &__vote-support &__vote-value {
+  &__currency-support, &__vote-support {
     color: green;
     &:before {
       content: "$\2009";
     }
   }
 
-  &__vote-thumb &__vote-value {
+  &__vote-thumb {
 
   }
 

components/vote/app.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import SidebarItem from '../sidebar-item/sidebar-item';
 import * as api from "./api";
 import './app-style';
-import VoteSlider from './slider/slider';
+import VoteButton from './button/button';
 
 function updateByProperty(array, property, propertyValue, update) {
   return array.map(item => {
@@ -65,14 +65,14 @@ export default class VoteApp extends React.Component {
       this.setState({
         isFetchingSelf: true
       });
-      api.getSelf(voteAppToken).then(result => {
+      api.getSelf(voteAppToken).catch(e => {
         this.setState({
-          selfInfo: result,
+          selfInfo: null,
           isFetchingSelf: false
         });
-      }).catch(e => {
+      }).then(result => {
         this.setState({
-          selfInfo: null,
+          selfInfo: result,
           isFetchingSelf: false
         });
       });
@@ -85,14 +85,14 @@ export default class VoteApp extends React.Component {
     this.setState({
       isFetchingList: true
     });
-    api.getList(voteAppToken, name).then(result => {
+    api.getList(voteAppToken, name).catch(e => {
       this.setState({
-        listInfo: result,
+        listInfo: null,
         isFetchingList: false
       });
-    }).catch(e => {
+    }).then(result => {
       this.setState({
-        listInfo: null,
+        listInfo: result,
         isFetchingList: false
       });
     });
@@ -186,44 +186,37 @@ export default class VoteApp extends React.Component {
           <div>{listInfo.description}</div>
           <ul className="vote-app__items-list">
             { listInfo.items.map(item => <li key={item.id}>
-              <span className="vote-app__item-title">{item.title}</span>
-              <span>{item.description}</span><br />
-              <ul className="vote-app__vote-list">
-                {listInfo.possibleVotes.map((voteSettings, idx) => {
-                  let vote = item.votes[idx];
-                  let userVote = item.userVotes && item.userVotes[idx];
-                  let currencyInfo = selfInfo && voteSettings.currency && this.findByName(selfInfo.currencies, voteSettings.currency);
-                  let maximum = voteSettings.maximum || 1000; // infinity
-                  let minimum = voteSettings.minimum || 0;
-                  let value = (userVote && userVote.votes) ? userVote.votes: 0;
-                  if(currencyInfo && currencyInfo.remaining + value < maximum) maximum = currencyInfo.remaining + value;
-                  let visibleMaxValue = voteSettings.maximum || (maxVoteInfo[idx] + currencyInfo.remaining);
-
-                  return <li className={"vote-app__vote-" + voteSettings.name} key={voteSettings.name} title={userVote ? "You voted " + userVote.votes + "." : "Login to see your votes."}>
-                    <div className="vote-app__vote-value">
-                      {vote.votes > 0 && voteSettings.minimum < 0 ? "+" + vote.votes : vote.votes}
-                      {userVote && userVote.votes ? " (You: " + (userVote.votes > 0 && voteSettings.minimum < 0 ? "+" + userVote.votes : userVote.votes) + ")" : ""}
-                    </div>
-                    { selfInfo &&
-                      <VoteSlider minValue={minimum} maxValue={maximum} visibleMaxValue={visibleMaxValue} 
-                                  value={value} step={this.getStep(visibleMaxValue)} color={this.getColor(voteSettings.name)}
-                                  valueChanged={(v) => {
-                                    let diff = v;
-
-                                    if((userVote && userVote.votes)) {
-                                      diff = v - userVote.votes;
-                                    }
-
-                                    this.vote(item.id, voteSettings.name, diff, voteSettings.currency, voteSettings.score * diff);
-                                  }}
-                      />
-                    }
-                  </li>;
-                })}
-                <li className="vote-app__vote-score" key="score">
-                  Score {item.score}
-                </li>
-              </ul>
+              <table className="vote-app__item-table">
+                <tbody>
+                  <tr>
+                    <td className="vote-app__item-score">
+                      {item.score}
+                    </td>
+                    {listInfo.possibleVotes.map((voteSettings, idx) => {
+                      let vote = item.votes[idx];
+                      let userVote = item.userVotes && item.userVotes[idx];
+                      let currencyInfo = selfInfo && voteSettings.currency && this.findByName(selfInfo.currencies, voteSettings.currency);
+                      let maximum = voteSettings.maximum || 1000; // infinity
+                      let minimum = voteSettings.minimum || 0;
+                      let value = (userVote && userVote.votes) ? userVote.votes: 0;
+                      if(currencyInfo && currencyInfo.remaining + value < maximum) maximum = currencyInfo.remaining + value;
+                      return <td>
+                        <VoteButton 
+                          className={"vote-app__vote-" + voteSettings.name}
+                          value={vote.votes} myValue={userVote.votes} 
+                          maxUp={maximum - userVote.votes} maxDown={userVote.votes - minimum} 
+                          color={this.getColor(voteSettings.name)} onVote={(diffValue) => {
+                            this.vote(item.id, voteSettings.name, diffValue, voteSettings.currency, voteSettings.score);
+                          }} />
+                      </td>;
+                    })}
+                    <td className="vote-app__item-content">
+                      <span className="vote-app__item-title">{item.title}</span>
+                      <span>{item.description}</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
             </li>)}
             { listInfo.isAdmin && <li className="vote-app__admin">
               <div><input type="text" value={this.state.newTitle} disabled={inProgress} onChange={e => this.setState({newTitle: e.target.value})} /></div>
@@ -258,7 +251,7 @@ export default class VoteApp extends React.Component {
   }
 
   renderSelf() {
-    let { selfInfo, isFetchingSelf } = this.state;
+    let { listInfo, selfInfo, isFetchingSelf } = this.state;
     if(!selfInfo) {
       if(isFetchingSelf) {
         return <div className="vote-app__self-info">Loading user info...</div>;
@@ -272,11 +265,13 @@ export default class VoteApp extends React.Component {
           delete window.localStorage.voteAppToken;
           window.location.reload();
         }}>Log out</button>
-        <ul className="vote-app__currency-list">
-          { selfInfo.currencies.map(currency => <li className={"vote-app__currency-" + currency.name} title={`${currency.description}\nYou used ${currency.used} of a total of ${currency.value} ${currency.displayName}.`}>
+        { listInfo && <ul className="vote-app__currency-list">
+          { selfInfo.currencies
+            .filter(currency => listInfo.possibleVotes.some(voteSettings => voteSettings.currency === currency.name))
+            .map(currency => <li className={"vote-app__currency-" + currency.name} title={`${currency.description}\nYou used ${currency.used} of a total of ${currency.value} ${currency.displayName}.`}>
             {currency.remaining} {currency.displayName}
           </li>) }
-        </ul>
+        </ul> }
       </div>;
     }
   }

components/vote/button/button-style.scss

@@ -0,0 +1,16 @@
+.vote-button {
+  text-align: center;
+  &__value {
+    font-size: 150%;
+  }
+
+  &__value, &__my-value, &__upMax, &__up10, &__up1, &__down1, &__down10, &__downMax {
+    display: block;
+  }
+
+  &__upMax, &__up10, &__up1, &__down1, &__down10, &__downMax {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+}

components/vote/button/button.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+require("./button-style.scss");
+
+export default (props) => {
+  let { value, myValue, maxDown, maxUp, color, onVote, className } = props;
+
+  let click = (n) => {
+    onVote(Math.min(maxUp, Math.max(n, -maxDown)));
+    return false;
+  };
+
+  let titleText = (n) => {
+    n = Math.min(maxUp, Math.max(n, -maxDown));
+    if(n === 0)
+      return "";
+    return n > 0 ? "+" + n : "" + n;
+  };
+
+  let makeTriangle = (n, fn, size, minForEnabled) => {
+    const enabled = n > 0 ? (maxUp >= minForEnabled) : (maxDown >= minForEnabled);
+    return <a href="#" 
+      title={titleText(n)} 
+      onClick={() => click(n)} 
+      className="vote-button__upMax">
+        {fn({size: size, color: enabled ? color : "transparent"})}
+    </a>;
+  };
+
+  return <div className="vote-button" style={{color: color}}>
+    {makeTriangle(Infinity, triangleUp, 30, 11)}
+    {makeTriangle(10, triangleUp, 20, 2)}
+    {makeTriangle(1, triangleUp, 15, 1)}
+    <div className="vote-button__value"><span className={className}>{value}</span></div>
+    <div className="vote-button__my-value">(<span className={className}>{myValue}</span>)</div>
+    {makeTriangle(-1, triangleDown, 15, 1)}
+    {makeTriangle(-10, triangleDown, 20, 2)}
+    {makeTriangle(-Infinity, triangleDown, 30, 11)}
+  </div>;
+};
+
+function triangleUp({color, size}) {
+  let path = `m ${size},0 -${size},${size / 3 * 2} ${size*2},0 z`;
+  return <svg width={size*2} height={size/3*2}>
+    <path d={path} style={{
+      fill: color
+    }}/>
+  </svg>;
+}
+
+function triangleDown({color, size}) {
+  let path = `m ${size},${size / 3 * 2} ${size},-${size / 3 * 2} -${size*2},0 z`;
+  return <svg width={size*2} height={size/3*2}>
+    <path d={path} style={{
+      fill: color
+    }}/>
+  </svg>;
+}