From 986f05ac98707f80f65c5046a9363a1482687774 Mon Sep 17 00:00:00 2001 From: FelisCatus Date: Wed, 1 Oct 2014 17:36:29 +0800 Subject: [PATCH] Show profile icon and color in profile selection. --- omega-web/bower.json | 11 ++++-- omega-web/src/coffee/omega_decoration.coffee | 35 +++++++++++++++++++ omega-web/src/coffee/options.coffee | 4 ++- omega-web/src/less/options.less | 28 +++++++++++++++ omega-web/src/options.jade | 1 + .../src/partials/omega_profile_select.jade | 5 +++ omega-web/src/partials/profile_rule_list.jade | 10 +++--- omega-web/src/partials/profile_switch.jade | 8 ++--- omega-web/src/partials/ui.jade | 7 ++-- 9 files changed, 94 insertions(+), 15 deletions(-) create mode 100644 omega-web/src/partials/omega_profile_select.jade diff --git a/omega-web/bower.json b/omega-web/bower.json index 2e12ea8..c049417 100644 --- a/omega-web/bower.json +++ b/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" + ] } } } diff --git a/omega-web/src/coffee/omega_decoration.coffee b/omega-web/src/coffee/omega_decoration.coffee index 26646c9..6403ca8 100644 --- a/omega-web/src/coffee/omega_decoration.coffee +++ b/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 ) diff --git a/omega-web/src/coffee/options.coffee b/omega-web/src/coffee/options.coffee index 604f260..a6181e6 100644 --- a/omega-web/src/coffee/options.coffee +++ b/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' diff --git a/omega-web/src/less/options.less b/omega-web/src/less/options.less index d5bb419..41be77a 100644 --- a/omega-web/src/less/options.less +++ b/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 { diff --git a/omega-web/src/options.jade b/omega-web/src/options.jade index 1d5ebc4..0d4c104 100644 --- a/omega-web/src/options.jade +++ b/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 diff --git a/omega-web/src/partials/omega_profile_select.jade b/omega-web/src/partials/omega_profile_select.jade new file mode 100644 index 0000000..3e2d7bd --- /dev/null +++ b/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=' {{getName(profile)}}') + | {{getName(profile)}} diff --git a/omega-web/src/partials/profile_rule_list.jade b/omega-web/src/partials/profile_rule_list.jade index f0f4bb7..fde1c2b 100644 --- a/omega-web/src/partials/profile_rule_list.jade +++ b/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') diff --git a/omega-web/src/partials/profile_switch.jade b/omega-web/src/partials/profile_switch.jade index b04daad..3faf445 100644 --- a/omega-web/src/partials/profile_switch.jade +++ b/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 diff --git a/omega-web/src/partials/ui.jade b/omega-web/src/partials/ui.jade index 9faa8e4..fd5216a 100644 --- a/omega-web/src/partials/ui.jade +++ b/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"]')