feat: interactive row

icpc-scu-community · Feb 9, 2020 · e9cf31d · e9cf31d
1 parent 1dd4fb1
commit e9cf31d
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 46 deletions.
diff --git a/src/Components/Board/Board.js b/src/Components/Board/Board.js
@@ -7,8 +7,14 @@ import Sheet from '../Sheet';
 import styles from './styles';
 
 class Board extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hoveredTraineeIndex: -1 };
+  }
+
   render() {
     const { sheets, trainees, submissions } = this.props;
+    const { hoveredTraineeIndex } = this.state;
     const problemsCount = sheets.reduce(
       (acc, { problems }) => acc + problems.length,
       0
@@ -18,7 +24,13 @@ class Board extends React.Component {
       <>
         <div className="board">
           <div className="trainees-section">
-            <TraineeList trainees={trainees} problemsCount={problemsCount} />
+            <TraineeList
+              trainees={trainees}
+              problemsCount={problemsCount}
+              onTraineeHover={index =>
+                this.setState({ hoveredTraineeIndex: index })
+              }
+            />
           </div>
           <div className="sheets-section">
             <div className="sheets">
@@ -38,7 +50,11 @@ class Board extends React.Component {
               {trainees.map(({ handle }, index) => (
                 <div
                   key={index}
-                  className="trainee-problems-row"
+                  className={cn('trainee-problems-row', {
+                    ignore:
+                      hoveredTraineeIndex !== -1 &&
+                      hoveredTraineeIndex !== index
+                  })}
                   style={{
                     paddingTop: paddingBetweenRows,
                     paddingBottom: paddingBetweenRows

diff --git a/src/Components/Board/styles.js b/src/Components/Board/styles.js
@@ -18,24 +18,33 @@ export default css`
   }
 
   /* sheets */
-  .board .sheets-section .sheets {
+  .sheets-section .sheets {
     display: flex;
     flex-direction: row;
     position: sticky;
     top: 0;
   }
 
-  .board .sheets-section .trainee-problems-status {
+  .sheets-section .trainee-problems-status {
     display: flex;
     flex-direction: column;
   }
 
-  .board .sheets-section .trainee-problems-status .trainee-problems-row {
+  .trainee-problems-status .trainee-problems-row {
     display: flex;
     flex-direction: row;
+    transition: all 00ms;
   }
 
-  .board .sheets-section .trainee-problems-status .trainee-problems-cell {
+  .trainee-problems-status .trainee-problems-row.ignore {
+    opacity: 0.5;
+  }
+
+  .trainee-problems-status .trainee-problems-row.focus {
+    background-color: #e0e0e0;
+  }
+
+  .trainee-problems-status .trainee-problems-cell {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -46,30 +55,21 @@ export default css`
     box-sizing: border-box;
   }
 
-  .board
-    .sheets-section
-    .trainee-problems-status
-    .trainee-problems-cell:first-of-type {
+  .trainee-problems-status .trainee-problems-cell:first-of-type {
     border-left: 1px solid;
   }
 
-  .board .sheets-section .trainee-problems-status .trainee-problems-cell.ac {
+  .trainee-problems-status .trainee-problems-cell.ac {
     background-color: lightgreen;
     border-color: green;
   }
 
-  .board
-    .sheets-section
-    .trainee-problems-status
-    .trainee-problems-cell.not-ac {
+  .trainee-problems-status .trainee-problems-cell.not-ac {
     background-color: orangered;
     border-color: blue;
   }
 
-  .board
-    .sheets-section
-    .trainee-problems-status
-    .trainee-problems-cell.not-solved {
+  .trainee-problems-status .trainee-problems-cell.not-solved {
     background-color: lightgrey;
     border-color: grey;
   }

diff --git a/src/Components/TraineeList/TraineeList.js b/src/Components/TraineeList/TraineeList.js
@@ -12,7 +12,7 @@ import styles, { progressWidth } from './styles';
 
 class TraineeList extends React.Component {
   render() {
-    const { trainees, problemsCount } = this.props;
+    const { trainees, problemsCount, onTraineeHover } = this.props;
 
     return (
       <>
@@ -40,28 +40,32 @@ class TraineeList extends React.Component {
                   paddingTop: paddingBetweenRows,
                   paddingBottom: paddingBetweenRows
                 }}
+                onMouseEnter={() => onTraineeHover(index)}
+                onMouseLeave={() => onTraineeHover(-1)}
               >
-                <div className="trainee">
-                  <Trainee
-                    name={name}
-                    handle={handle}
-                    states={states}
-                    problemsCount={problemsCount}
-                  />
-                </div>
-                <div className="progress">
-                  <div className="percentage">{`${Math.round(
-                    (states.solved / problemsCount) * 100
-                  )}%`}</div>
-                  <div className="counts">
-                    ({states.solved}/{problemsCount})
+                <div className="list-item-content">
+                  <div className="trainee">
+                    <Trainee
+                      name={name}
+                      handle={handle}
+                      states={states}
+                      problemsCount={problemsCount}
+                    />
+                  </div>
+                  <div className="progress">
+                    <div className="percentage">{`${Math.round(
+                      (states.solved / problemsCount) * 100
+                    )}%`}</div>
+                    <div className="counts">
+                      ({states.solved}/{problemsCount})
+                    </div>
+                    <div
+                      className="bar"
+                      style={{
+                        width: `${(states.solved / problemsCount) * 100}%`
+                      }}
+                    />
                   </div>
-                  <div
-                    className="bar"
-                    style={{
-                      width: `${(states.solved / problemsCount) * 100}%`
-                    }}
-                  />
                 </div>
               </div>
             ))}
@@ -75,7 +79,8 @@ class TraineeList extends React.Component {
 
 TraineeList.propTypes = {
   trainees: PropTypes.array.isRequired,
-  problemsCount: PropTypes.number.isRequired
+  problemsCount: PropTypes.number.isRequired,
+  onTraineeHover: PropTypes.func.isRequired
 };
 
 export default TraineeList;
diff --git a/src/Components/TraineeList/styles.js b/src/Components/TraineeList/styles.js
@@ -33,22 +33,23 @@ export default css`
     color: ${greyborders};
   }
 
-  .list-item {
+  .list-item .list-item-content {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: 0 ${listItemPadding}px;
     transition: all 100ms;
+    padding: 0 ${listItemPadding}px;
+    height: 100%;
   }
 
-  .list-item.even {
+  .list-item.even .list-item-content {
     background-color: #f3f3f3;
   }
 
-  /* .list-item:hover {
+  .list-item:hover .list-item-content {
     background-color: #e0e0e0;
-  } */
+  }
 
   .trainee {
     display: flex;