Merge pull request #1690 from sharelatex/cmg-color-tags

Color-code tags/folders

GitOrigin-RevId: d8dcb90b861dd61c1bc502e0b67556dcd772b42e

services/web/app/views/project/list/item.pug

@@ -24,11 +24,16 @@ div(class=titleClasses)
 			)
 				a.label.label-default.tag-label-name(
 					href,
-					ng-click="selectTag(tag)"
-				) {{tag.name}}
+					ng-click="selectTag(tag)",
+				)
+					i.fa.fa-circle(
+						aria-hidden="true"
+						ng-style="{ 'color': 'hsl({{ getHueForTagId(tag._id) }}, 70%, 45%)' }"
+					)
+					| {{tag.name}}
 				a.label.label-default.tag-label-remove(
 					href
-					ng-click="removeProjectFromTag(project, tag)"
+					ng-click="removeProjectFromTag(project, tag)",
 				) ×
 
 .col-xs-2

services/web/app/views/project/list/side-bar.pug

@@ -78,9 +78,10 @@
 			a.tag-name(href)
 				i.icon.fa.fa-fw(
 					ng-class="{\
-						'fa-folder-open-o': tag.selected,\
-						'fa-folder-o': !tag.selected\
+						'fa-folder-open': tag.selected,\
+						'fa-folder': !tag.selected\
 					}"
+					ng-style="{ 'color': 'hsl({{ getHueForTagId(tag._id) }}, 70%, 45%)' }"
 					aria-hidden="true"
 				)
 				span.name {{tag.name}} 

services/web/public/src/ide/colors/ColorManager.js

@@ -59,13 +59,22 @@ define([], function() {
         return this.OWN_HUE
       }
 
-      const hash = CryptoJS.MD5(user_id)
-      let hue = parseInt(hash.toString().slice(0, 8), 16) % 320
+      hue = this.getHueForId(user_id)
       // Avoid 20 degrees either side of the personal hue
       if (hue > this.OWNER_HUE - 20) {
         hue = hue + 40
       }
       return hue
+    },
+
+    getHueForTagId(tag_id) {
+      return this.getHueForId(tag_id)
+    },
+
+    getHueForId(id) {
+      const hash = CryptoJS.MD5(id)
+      let hue = parseInt(hash.toString().slice(0, 8), 16) % 320
+      return hue
     }
   })
 })

services/web/public/src/main/project-list/tag-controllers.js

@@ -13,7 +13,7 @@
  * DS207: Consider shorter variations of null checks
  * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
  */
-define(['base'], function(App) {
+define(['base', 'ide/colors/ColorManager'], function(App, ColorManager) {
   App.controller('TagListController', function($scope, $modal) {
     $scope.filterProjects = function(filter) {
       if (filter == null) {
@@ -37,6 +37,10 @@ define(['base'], function(App) {
       return $scope.setFilter('untagged')
     }
 
+    $scope.getHueForTagId = tag_id => {
+      return ColorManager.getHueForTagId(tag_id)
+    }
+
     $scope.deleteTag = function(tag) {
       const modalInstance = $modal.open({
         templateUrl: 'deleteTagModalTemplate',

services/web/public/stylesheets/app/project-list.less

@@ -343,26 +343,30 @@ ul.project-list {
 			.tag-label-name,
 			.tag-label-remove {
 				display: inline-block;
-				padding-top: 0.3em;
-				color: #FFF;
+				padding: 3px 4px;
 				border-radius: @tag-border-radius;
 				background-color: @tag-bg-color;
+				color: @tag-color;
 				vertical-align: text-bottom;
 				&:hover,
 				&:focus {
+					color: @tag-color;
 					background-color: @tag-bg-hover-color;
 				}
 			}
 			.tag-label-name {
-				padding-right: 0.3em;
+				padding-right: 2px;
 				border-top-right-radius: 0;
 				border-bottom-right-radius: 0;
 				max-width: @tag-max-width;
 				overflow: hidden;
 				text-overflow: ellipsis;
+				> .fa {
+					margin-right: 0.3em;
+				}
 			}
 			.tag-label-remove {
-				padding-left: 0.3em;
+				padding-left: 2px;
 				border-top-left-radius: 0;
 				border-bottom-left-radius: 0;
 			}

services/web/public/stylesheets/core/_common-variables.less

@@ -1008,9 +1008,10 @@
 
 // Tags
 @tag-border-radius  : 0.25em;
+@tag-color          : @label-color;
 @tag-bg-color       : @label-default-bg;
-@tag-max-width      : 150px;
 @tag-bg-hover-color : darken(@label-default-bg, 10%);
+@tag-max-width      : 150px;
 @tag-top-adjustment : -2px;
 @labels-font-size   : 75%;
 

services/web/public/stylesheets/core/ol-variables.less

@@ -114,8 +114,9 @@
 
 // Tags
 @tag-border-radius       : 9999px;
-@tag-bg-color            : @ol-green;
-@tag-bg-hover-color      : @ol-dark-green;
+@tag-color               : lighten(@ol-blue-gray-3, 10%);
+@tag-bg-color            : @ol-blue-gray-1;
+@tag-bg-hover-color      : darken(@ol-blue-gray-1, 5%);
 @tag-top-adjustment      : 2px;
 @labels-font-size        : 85%;