WIP: reorganize GrowiSubNavigation

adjust tag color

src/client/js/components/Page/TagLabels.jsx

@@ -102,15 +102,15 @@ class TagLabels extends React.Component {
 
     const tagElements = tags.map((tag) => {
       return (
-        <span key={`${pageId}_${tag}`} className="text-muted">
-          <a className="tag-name mr-2" href={`/_search?q=tag:${tag}`} key={`${pageId}_${tag}_link`}>{tag}</a>
-        </span>
+        <a key={`${pageId}_${tag}`} href={`/_search?q=tag:${tag}`} className="grw-tag-label badge badge-secondary mr-2">
+          {tag}
+        </a>
       );
     });
 
     return (
       <>
-        <form className="tag-labels form-inline">
+        <form className="grw-tag-labels form-inline">
           <i className="tag-icon icon-tag mr-2"></i>
 
           {tagElements}
@@ -121,7 +121,7 @@ class TagLabels extends React.Component {
                 <>{ t('Add tags for this page') }<i className="ml-1 icon-plus"></i></>
               )
               : (
-                <i className="ml-2 icon-plus"></i>
+                <i className="icon-plus"></i>
               )
             }
           </a>

src/client/styles/scss/_tag.scss

@@ -4,24 +4,11 @@
   }
 }
 
-.tag-labels {
-  .manage-tags {
-    font-size: 10px;
-    cursor: pointer;
-  }
-
-  // .tag-icon:not(:first-child) {
-  //   margin-left: 5px;
-  // }
-
-  // .btn.btn-edit-tags,
-  // .tag-icon {
-  //   font-size: 10px;
-  // }
-
-  .tag-name {
+.grw-tag-labels {
+  .grw-tag-label {
     margin-left: 1px;
-    font-size: 10px;
+    font-size: 12px;
+    border-radius: $border-radius-xl;
   }
 }
 

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -12,6 +12,8 @@ $border-color-table: lighten($bgcolor-table, 7.5%) !default;
 $color-table-hover: rgba(white, 0.075) !default;
 $bgcolor-table-hover: lighten($bgcolor-table, 7.5%) !default;
 $bgcolor-sidebar-list-group: $bgcolor-list !default;
+$color-tags: #949494 !default;
+$bgcolor-tags: $dark !default;
 
 // override bootstrap variables
 $table-dark-color: $color-table;
@@ -241,3 +243,13 @@ ul.pagination {
     display: none;
   }
 }
+
+/*
+ * GROWI tags
+ */
+.grw-tag-labels {
+  .grw-tag-label {
+    color: $color-tags;
+    background-color: $bgcolor-tags;
+  }
+}

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -12,6 +12,8 @@ $border-color-table: #dee2e6 !default;
 $color-table-hover: $color-table !default;
 $bgcolor-table-hover: rgba(black, 0.075) !default;
 $bgcolor-sidebar-list-group: $bgcolor-list !default;
+$color-tags: #949494 !default;
+$bgcolor-tags: #ebebeb !default;
 
 // override bootstrap variables
 $table-color: $color-table;
@@ -178,3 +180,13 @@ $table-hover-bg: $bgcolor-table-hover;
     display: none;
   }
 }
+
+/*
+ * GROWI tags
+ */
+.grw-tag-labels {
+  .grw-tag-label {
+    color: $color-tags;
+    background-color: $bgcolor-tags;
+  }
+}

src/client/styles/scss/theme/_reboot-bootstrap-theme-colors.scss

@@ -66,4 +66,7 @@ $theme-colors: map-merge($theme-colors, $colors);
   .badge-#{$color} {
     @include badge-variant($value);
   }
+  a.badge-#{$color} {
+    @include badge-variant($value);
+  }
 }

src/client/styles/scss/theme/default.scss

@@ -81,6 +81,10 @@ html[light] {
   // $bordercolor-nav-tabs-hover: # # $bordercolor-nav-tabs; // optional
   // $bordercolor-nav-tabs-active: # # $bgcolor-global; // optional
 
+  // Tags
+  // $color-tags: #; //optional
+  // $bgcolor-tags: #; //optional
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -169,6 +173,10 @@ html[dark] {
   $bordercolor-nav-tabs-hover: #666 #666 $bordercolor-nav-tabs; // optional
   // $bordercolor-nav-tabs-active: # # $bgcolor-global; // optional
 
+  // Tags
+  // $color-tags: #; //optional
+  // $bgcolor-tags: #; //optional
+
   // Icon colors
   $color-editor-icons: $color-global;