Improve view mode switcher

app/Template/project/filters.php

@@ -45,5 +45,4 @@
         <?= $this->form->hidden('action', $filters) ?>
         <?= $this->form->text('search', $filters, array(), array('placeholder="'.t('Filter').'"'), 'form-input-large') ?>
     </form>
-
 </div>

assets/css/app.css

@@ -69,16 +69,6 @@ hr {
     float: left;
     margin-right: 10px;
 }
-
-.views {
-    display: inline-block;
-}
-
-.views li.active a {
-    font-weight: bold;
-    color: #000;
-    text-decoration: none;
-}
 /* links */
 a {
     color: #3366CC;
@@ -1641,4 +1631,32 @@ td li.dropit-trigger {
 
 #screenshot-zone.screenshot-pasted {
     border: 2px solid #333;
+}.views {
+    display: inline-block;
+}
+
+.views li {
+    border: 1px solid #eee;
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.views li.active a {
+    font-weight: bold;
+    color: #000;
+    text-decoration: none;
+}
+
+.views li:first-child {
+    border-right: none;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+.views li:last-child {
+    border-left: none;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
 }

assets/css/src/base.css

@@ -52,13 +52,3 @@ hr {
     float: left;
     margin-right: 10px;
 }
-
-.views {
-    display: inline-block;
-}
-
-.views li.active a {
-    font-weight: bold;
-    color: #000;
-    text-decoration: none;
-}

assets/css/src/filters.css

@@ -0,0 +1,29 @@
+.views {
+    display: inline-block;
+}
+
+.views li {
+    border: 1px solid #eee;
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.views li.active a {
+    font-weight: bold;
+    color: #000;
+    text-decoration: none;
+}
+
+.views li:first-child {
+    border-right: none;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+.views li:last-child {
+    border-left: none;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}

scripts/make-assets.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 print_css="print links table board task comment subtask markdown"
-app_css="base links title table form button alert tooltip header board task comment subtask markdown listing activity dashboard pagination popover confirm sidebar responsive dropdown screenshot"
+app_css="base links title table form button alert tooltip header board task comment subtask markdown listing activity dashboard pagination popover confirm sidebar responsive dropdown screenshot filters"
 vendor_css="jquery-ui.min chosen.min fullcalendar.min font-awesome.min c3.min"
 
 app_js="base board calendar analytic swimlane screenshot"