Use consistent icons in dropdown

Author: Hirse

components/branches/branches.html

@@ -9,23 +9,23 @@
   <ul class="dropdown-menu pull-right" role="menu">
     <div class="option" onclick="event.stopPropagation()">
       <label>
+        <input class="glyphicon" type="checkbox" data-bind="checked: isShowRemote, css: { 'glyphicon-check': isShowRemote, 'glyphicon-unchecked': !isShowRemote() }" />
         Remote
-        <input type="checkbox" data-bind="checked: isShowRemote"/>
       </label>
       <label>
+        <input class="glyphicon" type="checkbox" data-bind="checked: isShowBranch, css: { 'glyphicon-check': isShowBranch, 'glyphicon-unchecked': !isShowBranch() }" />
         Branch
-        <input type="checkbox" data-bind="checked: isShowBranch"/>
       </label>
       <label>
+        <input class="glyphicon" type="checkbox" data-bind="checked: isShowTag, css: { 'glyphicon-check': isShowTag, 'glyphicon-unchecked': !isShowTag() }" />
         Tag
-        <input type="checkbox" data-bind="checked: isShowTag"/>
       </label>
     </div>
     <div class="dropdown-divider"></div>
     <!-- ko foreach: branchesAndLocalTags -->
     <li>
       <a href="#" data-bind="html: displayName, click: $parent.checkoutBranch.bind($parent), attr: { 'data-ta-clickable': 'checkout' + name }"></a>
-      <a href="#" class="list-link list-remove" data-bind="click: $parent.branchRemove.bind($parent), attr: { 'data-ta-clickable': name + '-remove' }">X</a>
+      <a href="#" class="list-link list-remove octicon octicon-x" data-bind="click: $parent.branchRemove.bind($parent), attr: { 'data-ta-clickable': name + '-remove' }"></a>
     </li>
     <!-- /ko -->
   </ul>

components/branches/branches.less

@@ -1,3 +1,16 @@
 .branch .dropdown-menu .option {
+  font-size: 100%;
   min-width: 250px;
+
+  label {
+    cursor: pointer;
+    font-weight: normal;
+    margin-right: 15px;
+  }
+
+  input {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
 }

components/remotes/remotes.html

@@ -10,7 +10,7 @@
     <!-- ko foreach: remotes -->
     <li>
       <a href="#" data-bind="text: name, click: changeRemote, attr: { 'data-ta-clickable': name }"></a>
-      <a href="#" class="list-link list-remove" data-bind="text: 'X', click: $parent.remoteRemove.bind($parent), attr: { 'data-ta-clickable': name + '-remove' }"></a>
+      <a href="#" class="list-link list-remove octicon octicon-x" data-bind="click: $parent.remoteRemove.bind($parent), attr: { 'data-ta-clickable': name + '-remove' }"></a>
     </li>
     <!-- /ko -->
     <li class="divider"></li>

components/submodules/submodules.html

@@ -10,13 +10,15 @@
     <!-- ko foreach: submodules -->
     <li>
       <a href="#" data-bind="text: name, click: $parent.submodulePathClick, attr: { 'data-ta-clickable': name }"></a>
-      <a href="#" class="list-link list-url" data-bind="text: '@', click: $parent.submoduleLinkClick, attr: { 'data-ta-clickable': name + '-weblink' }"></a>
-      <a href="#" class="list-link list-remove" data-bind="text: 'X', click: $parent.submoduleRemove.bind($parent), attr: { 'data-ta-clickable': name + '-remove' }"></a>
+      <a href="#" class="list-link list-url octicon octicon-link-external" data-bind="click: $parent.submoduleLinkClick, attr: { 'data-ta-clickable': name + '-weblink' }"></a>
+      <a href="#" class="list-link list-remove octicon octicon-x" data-bind="click: $parent.submoduleRemove.bind($parent), attr: { 'data-ta-clickable': name + '-remove' }"></a>
     </li>
     <!-- /ko -->
+    <!-- ko if: submodules().length-->
     <li class="divider"></li>
     <li><a href="#" class="update-submodule" data-bind="click: updateSubmodules">Update Submodules</a></li>
     <li class="divider"></li>
+    <!-- /ko -->
     <li><a href="#" class="add-submodule" data-bind="click: showAddSubmoduleDialog">Add Submodules</a></li>
   </ul>
 </div>