address tag display on query list page (#2803)

* address tag display on query list page * character limit tags in css * updates to tags on levko's feedback
getredash · Nov 7, 2018 · 99115a1 · 99115a1
1 parent 7d601cb
commit 99115a1
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 10 deletions.
diff --git a/client/app/assets/less/inc/list-group.less b/client/app/assets/less/inc/list-group.less
@@ -17,7 +17,11 @@
     }
 }
 
- .list-group-item {
+.max-character {
+  .text-overflow();
+}
+
+.list-group-item {
    &.active {
      button {
        color: white;

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
@@ -449,10 +449,20 @@ page-header, .page-header--new {
   background: fade(@redash-gray, 85%);
 }
 
+.label-default-unpublished {
+  background: fade(@redash-gray, 85%);
+  display: inline-block;
+  overflow: hidden;
+}
+
 .label-tag {
   background: fade(@redash-gray, 10%);
   color: fade(@redash-gray, 75%);
   margin-right: 3px;
+  display: inline-block;
+  margin-top: 2px;
+  max-width: 24ch;
+  .text-overflow();
 }
 
 .tab-nav > li > a {

diff --git a/client/app/components/tags-control/control-template.html b/client/app/components/tags-control/control-template.html
@@ -1,4 +1,4 @@
-<span class="label label-tag" ng-repeat="tag in $ctrl.item.tags">{{ tag }}</span
+<span class="label label-tag" ng-repeat="tag in $ctrl.item.tags" title="{{tag}}">{{ tag }}</span
 ><a ng-if="$ctrl.canEdit && $ctrl.item.tags.length == 0" class="label label-tag"
   ng-click="$ctrl.editTags()"><i class="zmdi zmdi-plus"></i> Add tag</a
 ><a ng-if="$ctrl.canEdit && $ctrl.item.tags.length > 0" class="label label-tag"

diff --git a/client/app/components/tags-list/tags-list.html b/client/app/components/tags-list/tags-list.html
@@ -1,5 +1,5 @@
 <div class="list-group m-t-10 tags-list tiled" ng-if="$ctrl.allTags.length > 0">
-    <a ng-repeat="tag in $ctrl.allTags" ng-class="{active: $ctrl.selectedTags.has(tag.name)}" class="list-group-item" ng-click="$ctrl.toggleTag($event, tag.name)">
+    <a ng-repeat="tag in $ctrl.allTags" ng-class="{active: $ctrl.selectedTags.has(tag.name)}" class="list-group-item max-character" ng-click="$ctrl.toggleTag($event, tag.name)" title="{{tag.name}}">
         {{ tag.name }} <span class="badge badge-light">{{ tag.count }}</span>
     </a>
 </div>
diff --git a/client/app/pages/queries-list/queries-list.html b/client/app/pages/queries-list/queries-list.html
@@ -96,16 +96,17 @@
               <td class="table-main-title">
                 <a href="queries/{{query.id}}">{{query.name}}</a>
                 <br>
-                <span class="label label-default" ng-if="query.is_draft">Unpublished</span>
-                <tags-control item="query"></tags-control>
+                <span>
+                  <span class="label label-default-unpublished" ng-if="query.is_draft">Unpublished</span> <tags-control item="query"></tags-control>
+                </span>
               </td>
-              <td class="p-r-0">
+              <td class="p-r-0 text-nowrap">
                 <img ng-src="{{query.user.profile_image_url}}" class="profile__image_thumb" title="Created by {{query.user.name}}" />
               </td>
-              <td>{{query.created_at | dateTime}}</td>
-              <td>{{query.runtime | durationHumanize}}</td>
-              <td>{{query.retrieved_at | dateTime}}</td>
-              <td>{{query.schedule | scheduleHumanize}}</td>
+              <td class="text-nowrap">{{query.created_at | dateTime}}</td>
+              <td class="text-nowrap">{{query.runtime | durationHumanize}}</td>
+              <td class="text-nowrap">{{query.retrieved_at | dateTime}}</td>
+              <td class="text-nowrap">{{query.schedule | scheduleHumanize}}</td>
             </tr>
           </tbody>
         </table>