[skip ci] refactor templates

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js

@@ -53,16 +53,15 @@ export default {
   template: `
     <div>
       <assignee-title
-        :numberOfAssignees="store.selectedUserIds.length"
+        :number-of-assignees="store.selectedUserIds.length"
         :loading="loading"
         :editable="store.editable"
       />
       <assignees
         class="value"
         v-if="!loading"
-        :rootPath="store.rootPath"
+        :root-path="store.rootPath"
         :users="store.renderedUsers"
-        @assignSelf="assignSelf"
       />
     </div>
   `,

app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js

@@ -32,26 +32,58 @@ export default {
       default: '',
     },
   },
+  computed: {
+    timeSpent() {
+      return this.abbreviateTime(this.timeSpentHumanReadable);
+    },
+    timeEstimate() {
+      return this.abbreviateTime(this.timeEstimateHumanReadable);
+    },
+    divClass() {
+      if (this.showComparisonState) {
+        return 'compare';
+      } else if (this.showEstimateOnlyState) {
+        return 'estimate-only';
+      } else if (this.showSpentOnlyState) {
+        return 'spend-only';
+      } else if (this.showNoTimeTrackingState) {
+        return 'no-tracking';
+      }
+    },
+    spanClass() {
+      if (this.showComparisonState) {
+        return '';
+      } else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
+        return 'bold';
+      } else if (this.showNoTimeTrackingState) {
+        return 'no-value';
+      }
+    },
+    text() {
+      if (this.showComparisonState) {
+        return `${this.timeSpent} / ${this.timeEstimate}`;
+      } else if (this.showEstimateOnlyState) {
+        return `-- / ${this.timeEstimate}`;
+      } else if (this.showSpentOnlyState) {
+        return `${this.timeSpent} / --`;
+      } else if (this.showNoTimeTrackingState) {
+        return 'None';
+      }
+    }
+  },
   methods: {
     abbreviateTime(timeStr) {
       return gl.utils.prettyTime.abbreviateTime(timeStr);
     },
   },
   template: `
-    <div class='sidebar-collapsed-icon'>
+    <div class="sidebar-collapsed-icon">
       ${stopwatchSvg}
-      <div class='time-tracking-collapsed-summary'>
-        <div class='compare' v-if='showComparisonState'>
-          <span>{{ abbreviateTime(timeSpentHumanReadable) }} / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>
-        </div>
-        <div class='estimate-only' v-if='showEstimateOnlyState'>
-          <span class='bold'>-- / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>
-        </div>
-        <div class='spend-only' v-if='showSpentOnlyState'>
-          <span class='bold'>{{ abbreviateTime(timeSpentHumanReadable) }} / --</span>
-        </div>
-        <div class='no-tracking' v-if='showNoTimeTrackingState'>
-          <span class='no-value'>None</span>
+      <div class="time-tracking-collapsed-summary">
+        <div :class="divClass">
+          <span :class="spanClass">
+            {{ text }}
+          </span>
         </div>
       </div>
     </div>

app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.js

@@ -53,23 +53,43 @@ export default {
     },
   },
   template: `
-    <div class='time-tracking-comparison-pane'>
-      <div class='compare-meter' data-toggle='tooltip' data-placement='top' role='timeRemainingDisplay'
-        :aria-valuenow='timeRemainingTooltip'
-        :title='timeRemainingTooltip'
-        :data-original-title='timeRemainingTooltip'
-        :class='timeRemainingStatusClass'>
-        <div class='meter-container' role='timeSpentPercent' :aria-valuenow='timeRemainingPercent'>
-          <div :style='{ width: timeRemainingPercent }' class='meter-fill'></div>
+    <div class="time-tracking-comparison-pane">
+      <div
+        class="compare-meter"
+        data-toggle="tooltip"
+        data-placement="top"
+        role="timeRemainingDisplay"
+        :aria-valuenow="timeRemainingTooltip"
+        :title="timeRemainingTooltip"
+        :data-original-title="timeRemainingTooltip"
+        :class="timeRemainingStatusClass"
+      >
+        <div
+          class="meter-container"
+          role="timeSpentPercent"
+          :aria-valuenow="timeRemainingPercent"
+        >
+          <div
+            :style="{ width: timeRemainingPercent }"
+            class="meter-fill"
+          />
         </div>
-        <div class='compare-display-container'>
-          <div class='compare-display pull-left'>
-            <span class='compare-label'>Spent</span>
-            <span class='compare-value spent'>{{ timeSpentHumanReadable }}</span>
+        <div class="compare-display-container">
+          <div class="compare-display pull-left">
+            <span class="compare-label">
+              Spent
+            </span>
+            <span class="compare-value spent">
+              {{ timeSpentHumanReadable }}
+            </span>
           </div>
-          <div class='compare-display estimated pull-right'>
-            <span class='compare-label'>Est</span>
-            <span class='compare-value'>{{ timeEstimateHumanReadable }}</span>
+          <div class="compare-display estimated pull-right">
+            <span class="compare-label">
+              Est
+            </span>
+            <span class="compare-value">
+              {{ timeEstimateHumanReadable }}
+            </span>
           </div>
         </div>
       </div>

app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.js

@@ -7,8 +7,10 @@ export default {
     },
   },
   template: `
-    <div class='time-tracking-estimate-only-pane'>
-      <span class='bold'>Estimated:</span>
+    <div class="time-tracking-estimate-only-pane">
+      <span class="bold">
+        Estimated:
+      </span>
       {{ timeEstimateHumanReadable }}
     </div>
   `,

app/assets/javascripts/sidebar/components/time_tracking/help_state.js

@@ -12,19 +12,32 @@ export default {
     },
   },
   template: `
-    <div class='time-tracking-help-state'>
-      <div class='time-tracking-info'>
-        <h4>Track time with slash commands</h4>
-        <p>Slash commands can be used in the issues description and comment boxes.</p>
+    <div class="time-tracking-help-state">
+      <div class="time-tracking-info">
+        <h4>
+          Track time with slash commands
+        </h4>
         <p>
-          <code>/estimate</code>
+          Slash commands can be used in the issues description and comment boxes.
+        </p>
+        <p>
+          <code>
+            /estimate
+          </code>
           will update the estimated time with the latest command.
         </p>
         <p>
-          <code>/spend</code>
+          <code>
+            /spend
+          </code>
           will update the sum of the time spent.
         </p>
-        <a class='btn btn-default learn-more-button' :href="href">Learn more</a>
+        <a
+          class="btn btn-default learn-more-button"
+          :href="href"
+        >
+          Learn more
+        </a>
       </div>
     </div>
   `,

app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.js

 export default {
   name: 'time-tracking-no-tracking-pane',
   template: `
-    <div class='time-tracking-no-tracking-pane'>
-      <span class='no-value'>No estimate or time spent</span>
+    <div class="time-tracking-no-tracking-pane">
+      <span class="no-value">
+        No estimate or time spent
+      </span>
     </div>
   `,
 };

app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.js

@@ -7,8 +7,8 @@ export default {
     },
   },
   template: `
-    <div class='time-tracking-spend-only-pane'>
-      <span class='bold'>Spent:</span>
+    <div class="time-tracking-spend-only-pane">
+      <span class="bold">Spent:</span>
       {{ timeSpentHumanReadable }}
     </div>
   `,

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.js

@@ -31,7 +31,6 @@ export default {
     rootPath: {
       type: String,
       required: true,
-      default: '',
     },
   },
   data() {
@@ -97,61 +96,65 @@ export default {
     eventHub.$on('timeTracker:updateData', this.update);
   },
   template: `
-    <div class='time_tracker time-tracking-component-wrap' v-cloak>
+    <div
+      class="time_tracker time-tracking-component-wrap"
+      v-cloak
+    >
       <time-tracking-collapsed-state
-        :show-comparison-state='showComparisonState'
-        :show-no-time-tracking-state='showNoTimeTrackingState'
-        :show-help-state='showHelpState'
-        :show-spent-only-state='showSpentOnlyState'
-        :show-estimate-only-state='showEstimateOnlyState'
-        :time-spent-human-readable='timeSpentHumanReadable'
-        :time-estimate-human-readable='timeEstimateHumanReadable'
+        :show-comparison-state="showComparisonState"
+        :show-no-time-tracking-state="showNoTimeTrackingState"
+        :show-help-state="showHelpState"
+        :show-spent-only-state="showSpentOnlyState"
+        :show-estimate-only-state="showEstimateOnlyState"
+        :time-spent-human-readable="timeSpentHumanReadable"
+        :time-estimate-human-readable="timeEstimateHumanReadable"
       />
-      <div class='title hide-collapsed'>
+      <div class="title hide-collapsed">
         Time tracking
         <div
-          class='help-button pull-right'
-          v-if='!showHelpState'
-          @click='toggleHelpState(true)'
+          class="help-button pull-right"
+          v-if="!showHelpState"
+          @click="toggleHelpState(true)"
         >
             <i
-              class='fa fa-question-circle'
-              aria-hidden='true'
+              class="fa fa-question-circle"
+              aria-hidden="true"
             />
         </div>
         <div
-          class='close-help-button pull-right'
-          v-if='showHelpState'
-          @click='toggleHelpState(false)'>
+          class="close-help-button pull-right"
+          v-if="showHelpState"
+          @click="toggleHelpState(false)"
+        >
           <i
-            class='fa fa-close'
-            aria-hidden='true'
+            class="fa fa-close"
+            aria-hidden="true"
           />
         </div>
       </div>
-      <div class='time-tracking-content hide-collapsed'>
+      <div class="time-tracking-content hide-collapsed">
         <time-tracking-estimate-only-pane
-          v-if='showEstimateOnlyState'
-          :time-estimate-human-readable='timeEstimateHumanReadable'
+          v-if="showEstimateOnlyState"
+          :time-estimate-human-readable="timeEstimateHumanReadable"
         />
         <time-tracking-spent-only-pane
-          v-if='showSpentOnlyState'
-          :time-spent-human-readable='timeSpentHumanReadable'
+          v-if="showSpentOnlyState"
+          :time-spent-human-readable="timeSpentHumanReadable"
         />
         <time-tracking-no-tracking-pane
-          v-if='showNoTimeTrackingState'
+          v-if="showNoTimeTrackingState"
         />
         <time-tracking-comparison-pane
-          v-if='showComparisonState'
-          :time-estimate='timeEstimate'
-          :time-spent='timeSpent'
-          :time-spent-human-readable='timeSpentHumanReadable'
-          :time-estimate-human-readable='timeEstimateHumanReadable'
+          v-if="showComparisonState"
+          :time-estimate="timeEstimate"
+          :time-spent="timeSpent"
+          :time-spent-human-readable="timeSpentHumanReadable"
+          :time-estimate-human-readable="timeEstimateHumanReadable"
         />
-        <transition name='help-state-toggle'>
+        <transition name="help-state-toggle">
           <time-tracking-help-state
-            v-if='showHelpState'
-            :rootPath='rootPath'
+            v-if="showHelpState"
+            :rootPath="rootPath"
           />
         </transition>
       </div>