Merge pull request #29 from kaishuu0123/support/badge-style

Change badge border radius
kaishuu0123 · Nov 11, 2019 · cb2fcca · cb2fcca
2 parents e6718f0 + 7404a57
commit cb2fcca
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 9 deletions.
diff --git a/app/javascript/components/backlogs/StoryListItem.vue b/app/javascript/components/backlogs/StoryListItem.vue
@@ -2,13 +2,13 @@
   <li class="list-group-item px-3 py-2" >
     <div v-if="!isEdit">
       <div class="d-flex justify-content-between align-items-center">
-        <router-link :id="`popover-story-${story.id}`" :to="createStoryPath" class="badge badge-info p-1 mr-2" :style="badgeColor">
+        <router-link :id="`popover-story-${story.id}`" :to="createStoryPath" class="badge badge-info rb-badge-radius p-1 mr-2" :style="badgeColor">
           {{story.ticket_number_with_ticket_prefix}}
         </router-link>
-        <span class="text-gray-700 d-block text-truncate w-100 mr-2" :title="story.title">
+        <div class="text-gray-700 d-block text-truncate w-100 mr-2" :title="story.title">
           <s v-if="story.is_done" @click="onClickTitle">{{story.title}}</s>
           <span v-else @click="onClickTitle">{{story.title}}</span>
-        </span>
+        </div>
         <span @click="onClickPoint">
           {{ story.point | numeral('0.0') }}
         </span>
@@ -17,7 +17,7 @@
     <div v-else>
       <b-form @submit.stop.prevent="editDone(true)">
         <div class="d-flex justify-content-between align-items-center mb-2">
-          <router-link :to="createStoryPath" class="badge badge-info p-1 mr-2" :style="badgeColor">
+          <router-link :to="createStoryPath" class="badge badge-info rb-badge-radius p-1 mr-2" :style="badgeColor">
             {{story.ticket_number_with_ticket_prefix}}
           </router-link>
           <span class="text-monospace d-block text-truncate w-100 mr-2">

diff --git a/app/javascript/components/backlogs/StoryModal.vue b/app/javascript/components/backlogs/StoryModal.vue
@@ -62,7 +62,7 @@
           </div>
           <div class="d-flex align-items-center mb-2" v-if="story.id">
             <h2 class="h5 m-0">
-              <span class="badge badge-info mr-2" :style="badgeColor">
+              <span class="badge badge-info rb-badge-radius mr-2" :style="badgeColor">
                 {{story.ticket_number_with_ticket_prefix}}
               </span>
             </h2>
@@ -97,7 +97,7 @@
             <div>
               <p class="text-gray-600 mb-2">{{ $t('title.relatedTasks')}}</p>
               <div class="d-flex w-100 align-items-center ml-1 mb-1" v-for="task in story.tasks" :key="task.id">
-                <div class="badge badge-secondary mr-2">
+                <div class="badge badge-secondary rb-badge-radius mr-2">
                   {{ task.ticket_number_with_ticket_prefix }}
                 </div>
                 <div>

diff --git a/app/javascript/components/kanban/TaskModal.vue b/app/javascript/components/kanban/TaskModal.vue
@@ -65,7 +65,7 @@
           </div>
           <div class="d-flex align-items-center mb-2" v-if="task.id">
             <h2 class="h5 m-0">
-              <span class="badge badge-info mr-2" :style="badgeColor">
+              <span class="badge badge-info rb-badge-radius mr-2" :style="badgeColor">
                 {{task.ticket_number_with_ticket_prefix}}
               </span>
             </h2>
@@ -131,7 +131,7 @@
                 >
                 <router-link :to="createShowStoryPath(task.story.id)">
                   <div class="rb-select py-2 text-truncate text-secondary">
-                    <span class="badge badge-info mr-2" :style="badgeColorForStory">
+                    <span class="badge badge-info rb-badge-radius mr-2" :style="badgeColorForStory">
                       {{ task.story.ticket_number_with_ticket_prefix }}
                     </span>{{ task.story.title }}
                   </div>

diff --git a/app/javascript/pages/KanbanPage.vue b/app/javascript/pages/KanbanPage.vue
@@ -30,7 +30,7 @@
                 </div>
                 <div>
                   <router-link :id="`popover-story-${story.id}`" :to="createShowStoryPath(story.id)" class="text-secondary">
-                    <span class="badge badge-info mr-1" :style="badgeColor(story)">
+                    <span class="badge badge-info rb-badge-radius mr-1" :style="badgeColor(story)">
                       {{story.ticket_number_with_ticket_prefix}}
                     </span>
                     <span>

diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
@@ -30,4 +30,52 @@ $font-size-xm: 0.8em !default;
 
 .rb-border-dotted {
    border-style: dotted;
+}
+
+.rb-badge-radius {
+   border-radius: 0.2rem;
+}
+
+.badge {
+   &.badge-outlined {
+      background-color: transparent;
+      border: 1px solid;
+      border-radius: 0.2rem;
+      font-weight: normal;
+
+      &.badge-default {
+         border-color: $gray-600;
+         color: $gray-600;
+      }
+
+      &.badge-primary {
+         border-color: #2196F3;
+         color: #2196F3
+      }
+
+      &.badge-secondary {
+         border-color: #323a45;
+         color: #323a45
+      }
+
+      &.badge-success {
+         border-color: #64DD17;
+         color: #64DD17
+      }
+
+      &.badge-warning {
+         border-color: #FFD600;
+         color: #FFD600
+      }
+
+      &.badge-info {
+         border-color: #29B6F6;
+         color: #29B6F6
+      }
+
+      &.badge-danger {
+         border-color: #ef1c1c;
+         color: #ef1c1c
+      }
+   }
 }