Show profile icon and color in profile selection.

omega-web/bower.json

@@ -36,7 +36,8 @@
     "blob": "*",
     "FileSaver": "*",
     "angular-ui-utils": "bower-validate",
-    "angular-ladda": "~0.1.6"
+    "angular-ladda": "~0.1.6",
+    "bootstrap-select": "~1.6.2"
   },
   "exportsOverride": {
     "script.js": {
@@ -80,7 +81,8 @@
     },
     "bootstrap": {
       "css": "dist/css/*.min.*",
-      "fonts": "dist/fonts/*"
+      "fonts": "dist/fonts/*",
+      "js": "js/dropdown.*"
     },
     "ngprogress": {
       "": "build/*.min.js"
@@ -101,7 +103,10 @@
       "": "*.js"
     },
     "ladda": {
-      "": ["dist/ladda-themeless.min.css", "dist/ladda.min.js"]
+      "": [
+        "dist/ladda-themeless.min.css",
+        "dist/ladda.min.js"
+      ]
     }
   }
 }

omega-web/src/coffee/omega_decoration.coffee

@@ -21,4 +21,39 @@ angular.module('omegaDecoration', []).value('profileIcons', {
     -1
   else
     1
+).directive('omegaRepeatDone', ($parse) ->
+  restrict: 'A'
+  link: (scope, element, attrs) ->
+    callback = $parse(attrs.omegaRepeatDone)
+    if scope.$last
+      scope.$evalAsync callback
+).directive('omegaProfileSelect', ($timeout, profileIcons) ->
+  restrict: 'A'
+  templateUrl: 'partials/omega_profile_select.html'
+  require: '?ngModel'
+  scope:
+    'profiles': '&omegaProfileSelect'
+    'defaultText': '@?defaultText'
+    'dispName': '&?dispName'
+  link: (scope, element, attrs, ngModel) ->
+    scope.classes = [].slice.call(element[0].classList)
+    element.attr('class', '')
+    selectpicker = element.find('.selectpicker')
+    if ngModel
+      ngModel.$render = ->
+        selectpicker.selectpicker('val', ngModel.$viewValue)
+        return
+      selectpicker.selectpicker().change (e) ->
+        ngModel.$setViewValue($(e.target).val())
+    scope.profileIcons = profileIcons
+    scope.currentProfiles = []
+
+    scope.$watch(scope.profiles, ((profiles) ->
+      scope.currentProfiles = profiles
+    ), true)
+    scope.onItemsUpdated = ->
+      selectpicker.selectpicker('refresh')
+      ngModel?.$render()
+    scope.getName = (profile) ->
+      scope.dispName?({$profile: profile}) || profile.name
 )

omega-web/src/coffee/options.coffee

@@ -11,7 +11,7 @@ $script 'lib/spin.js/spin.js', ->
       $script 'lib/angular-ladda/angular-ladda.min.js', 'angular-ladda'
 
 $script.ready ['angular-loader'], ->
-  angular.module 'omega', ['ngLocale', 'ui.bootstrap', 'ui.router',
+  angular.module 'omega', ['ngLocale', 'ngAnimate', 'ui.bootstrap', 'ui.router',
     'ngProgress', 'ui.sortable', 'angularSpectrumColorpicker', 'ui.validate',
     'angular-ladda', 'omegaTarget', 'omegaDecoration']
   $script.ready ['omega-pac'], ->
@@ -27,6 +27,8 @@ $script.ready ['angular-loader'], ->
     'lib/angular-ui-utils/validate.min.js'
     'lib/jsondiffpatch/bundle.min.js'
     'lib/angular-spectrum-colorpicker/angular-spectrum-colorpicker.min.js'
+    'lib/bootstrap/js/dropdown.js'
+    'lib/bootstrap-select/bootstrap-select.js'
   ], 'omega-deps')
 $script.ready ['jquery'], ->
   $script 'lib/jquery-ui-1.10.4.custom.min.js', 'jquery-ui'

omega-web/src/less/options.less

@@ -111,6 +111,25 @@ ul.list-style-none, li.list-style-none {
   }
 }
 
+/* bootstrap-select */
+
+.dropdown-menu>.selected>a {
+  &, &:hover, &:focus {
+    color: #FFF;
+    text-decoration: none;
+    outline: 0;
+    background-color: #428BCA;
+  }
+}
+
+.bootstrap-select.btn-group {
+  margin-bottom: 0 !important;
+}
+
+.form-control[omega-profile-select] {
+  display: none; // Prevent not loaded directive from showing.
+}
+
 /* body */
 
 h1 {
@@ -159,6 +178,15 @@ main {
       max-height: none;
     }
   }
+
+  .ng-enter {
+    opacity: 0;
+    transition: opacity .5s;
+  }
+
+  .ng-enter-active {
+    opacity: 1;
+  }
 }
 
 #ngProgress-container {

omega-web/src/options.jade

@@ -7,6 +7,7 @@ html(lang='en' ng-controller='MasterCtrl' ng-csp)
     link(rel='stylesheet' href='lib/bootstrap/css/bootstrap.min.css')
     link(rel='stylesheet' href='lib/spectrum/spectrum.css')
     link(rel='stylesheet' href='lib/ladda/ladda-themeless.min.css')
+    link(rel='stylesheet' href='lib/bootstrap-select/bootstrap-select.css')
     link(rel='stylesheet' href='css/options.css')
   body(style='display: none;' ng-style='{display: options ? "block" : "none"}')
     .container-fluid

omega-web/src/partials/omega_profile_select.jade

@@ -0,0 +1,5 @@
+select.selectpicker(ng-class='classes')
+  option(ng-if='!!defaultText' value='' data-icon='glyphicon-time') {{defaultText}}
+  option(ng-repeat='profile in currentProfiles' value='{{profile.name}}' omega-repeat-done='onItemsUpdated()'
+    data-content='<span class="glyphicon {{profileIcons[profile.profileType]}}" style="color: {{profile.color}}"></span> {{getName(profile)}}')
+    | {{getName(profile)}}

omega-web/src/partials/profile_rule_list.jade

@@ -3,12 +3,14 @@ div(ng-controller='RuleListProfileCtrl')
     h3 {{'options_group_ruleListConfig' | tr}}
     .form-group
       label {{'options_ruleListMatchProfile' | tr}}
-      select.form-control.inline-form-control(ng-model='profile.matchProfileName'
-        ng-options='p.name as (p.name | dispName) for p in options | profiles:profile')
+      = ' '
+      div(omega-profile-select='options | profiles:profile' ng-model='profile.matchProfileName'
+        disp-name='$profile.name | dispName' style='display: inline-block;')
     .form-group
       label {{'options_ruleListDefaultProfile' | tr}}
-      select.form-control.inline-form-control(ng-model='profile.defaultProfileName'
-        ng-options='p.name as (p.name | dispName) for p in options | profiles:profile')
+      = ' '
+      div(omega-profile-select='options | profiles:profile' ng-model='profile.defaultProfileName'
+        disp-name='$profile.name | dispName' style='display: inline-block;')
     form.form-group
       label {{'options_ruleListFormat' | tr}}
       .radio.inline-form-control.no-min-width(ng-repeat='format in ruleListFormats')

omega-web/src/partials/profile_switch.jade

@@ -27,8 +27,8 @@ section.settings-group(ng-controller='SwitchProfileCtrl')
               input.form-control(type='number' max='99' min='1' ng-model='rule.condition.maxValue' required)
             input.form-control(ng-model='rule.condition.pattern' ng-switch-default required)
           td
-            select.form-control(ng-model='rule.profileName'
-              ng-options='p.name as (p.name | dispName) for p in options | profiles:profile')
+            div.form-control(omega-profile-select='options | profiles:profile' ng-model='rule.profileName'
+              disp-name='$profile.name | dispName')
           td
             button.btn.btn-danger.btn-sm(title="{{'options_deleteRule' | tr}}" ng-click='removeRule($index)')
               span.glyphicon.glyphicon-trash
@@ -45,8 +45,8 @@ section.settings-group(ng-controller='SwitchProfileCtrl')
           td
           td(colspan='2') {{'options_switchDefaultProfile' | tr}}
           td
-            select.form-control(ng-model='profile.defaultProfileName'
-              ng-options='p.name as (p.name | dispName) for p in options | profiles:profile')
+            div.form-control(omega-profile-select='options | profiles:profile' ng-model='profile.defaultProfileName'
+              disp-name='$profile.name | dispName')
           td
             button.btn.btn-info.btn-sm(title="{{'options_resetRules_help' | tr}}" ng-click='resetRules()')
               span.glyphicon.glyphicon-chevron-up

omega-web/src/partials/ui.jade

@@ -14,9 +14,10 @@ section.settings-group
   h3 {{'options_group_switchOptions' | tr}}
   div.form-group
     label {{'options_startupProfile' | tr}}
-    select.form-control.inline-form-control(ng-model='options["-startupProfileName"]'
-        ng-options='p.name as (p.name | dispName) for p in options | profiles:"all"')
-      option(value='') {{'options_startupProfile_none' | tr}}
+    = ' '
+    div(omega-profile-select='options | profiles:"all"' ng-model='options["-startupProfileName"]'
+      default-text="{{'options_startupProfile_none' | tr}}" disp-name='$profile.name | dispName'
+      style='display: inline-block;')
   div.checkbox
     label
       input(type='checkbox' ng-model='options["-enableQuickSwitch"]')