From a66f604fae8823798dc77800a0075a15987b683a Mon Sep 17 00:00:00 2001
From: FelisCatus <catusx@gmail.com>
Date: Sun, 26 Oct 2014 12:48:39 +0800
Subject: [PATCH] Use omega-profile-select in popup menu.

---
 omega-web/src/less/common.less  | 74 +++++++++++++++++++++++++++++++++
 omega-web/src/less/options.less | 60 +-------------------------
 omega-web/src/less/popup.less   | 27 +-----------
 omega-web/src/popup.jade        |  4 +-
 4 files changed, 79 insertions(+), 86 deletions(-)
 create mode 100644 omega-web/src/less/common.less

diff --git a/omega-web/src/less/common.less b/omega-web/src/less/common.less
new file mode 100644
index 0000000..2a79578
--- /dev/null
+++ b/omega-web/src/less/common.less
@@ -0,0 +1,74 @@
+/* angular */
+
+.ng-hide {
+  display: none !important;
+}
+
+/* helpers */
+
+.clear-padding {
+  padding: 0 !important;
+}
+
+/* basic */
+
+a[role="button"] {
+  cursor: pointer;
+}
+
+.form-control.ng-invalid {
+  border-color: #a94442;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+
+  &:hover {
+    border-color: #843534;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #CE8483;
+  }
+}
+
+.disabled .btn {
+  background-color: #ddd !important;
+  border-color: #ccc !important;
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+  opacity: .65 !important;
+  box-shadow: none !important;
+}
+
+/* profile */
+
+.virtual-profile-icon {
+  border: dotted 1px;
+  margin: -1px;
+}
+
+/* omega-profile-select */
+
+.omega-profile-select {
+  width: 100%;
+  .dropdown-menu>li>a {
+    max-width: none !important;
+  }
+
+  .btn {
+    width: 100%;
+    display: block;
+    text-align: left;
+    text-align: initial;
+    position: relative;
+    padding-right: 25px;
+
+    .caret {
+      position: absolute;
+      top: 50%;
+      right: 12px;
+      margin-top: -2px;
+      vertical-align: middle;
+    }
+  }
+
+  .dropdown-menu {
+    width: 100%;
+    cursor: pointer;
+  }
+}
diff --git a/omega-web/src/less/options.less b/omega-web/src/less/options.less
index b4776a9..4010923 100644
--- a/omega-web/src/less/options.less
+++ b/omega-web/src/less/options.less
@@ -1,11 +1,4 @@
-/* angular */
-.ng-hide {
-  display: none !important;
-}
-
-a[role="button"] {
-  cursor: pointer;
-}
+@import 'common.less';
 
 .width-initial {
   width: auto !important;
@@ -37,10 +30,6 @@ a[role="button"] {
   min-width: 0 !important;
 }
 
-.clear-padding {
-  padding: 0 !important;
-}
-
 .align-initial {
   text-align: left;
   text-align: initial;
@@ -65,16 +54,6 @@ ul.list-style-none, li.list-style-none {
   }
 }
 
-.form-control.ng-invalid {
-  border-color: #a94442;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-
-  &:hover {
-    border-color: #843534;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #CE8483;
-  }
-}
-
 /* alert */
 
 .alert-top-wrapper {
@@ -115,43 +94,6 @@ ul.list-style-none, li.list-style-none {
   }
 }
 
-/* omega-profile-select */
-
-.omega-profile-select {
-  width: 100%;
-
-  .btn {
-    width: 100%;
-    display: block;
-    text-align: left;
-    text-align: initial;
-    position: relative;
-    padding-right: 25px;
-
-    .caret {
-      position: absolute;
-      top: 50%;
-      right: 12px;
-      margin-top: -2px;
-      vertical-align: middle;
-    }
-  }
-
-  .dropdown-menu {
-    width: 100%;
-    cursor: pointer;
-  }
-}
-
-.disabled .btn {
-  background-color: #ddd !important;
-  border-color: #ccc !important;
-  cursor: not-allowed !important;
-  pointer-events: none !important;
-  opacity: .65 !important;
-  box-shadow: none !important;
-}
-
 /* body */
 
 h1 {
diff --git a/omega-web/src/less/popup.less b/omega-web/src/less/popup.less
index f32c691..f80b73d 100644
--- a/omega-web/src/less/popup.less
+++ b/omega-web/src/less/popup.less
@@ -1,15 +1,7 @@
-/* angular */
-
-.ng-hide {
-  display: none !important;
-}
+@import 'common.less';
 
 /* popup */
 
-.clear-padding {
-  padding: 0 !important;
-}
-
 body {
   margin: 0;
   padding: 0;
@@ -28,11 +20,6 @@ body.with-condition-form {
   padding: 0 5px;
 }
 
-.virtual-profile-icon {
-  border: dotted 1px;
-  margin: -1px;
-}
-
 .nav {
   margin-bottom: 0;
 }
@@ -88,7 +75,7 @@ li > a {
   box-shadow: none !important;
 }
 
-.dropdown-menu {
+li .dropdown-menu {
   position: static;
   top: initial;
   top: -moz-initial;
@@ -144,16 +131,6 @@ legend,
   }
 }
 
-.form-control.ng-invalid {
-  border-color: #a94442;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-
-  &:hover {
-    border-color: #843534;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #CE8483;
-  }
-}
-
 .proxy-not-controllable {
   min-width: 400px;
   padding: 10px 5px;
diff --git a/omega-web/src/popup.jade b/omega-web/src/popup.jade
index 0d8a46b..cda7b79 100644
--- a/omega-web/src/popup.jade
+++ b/omega-web/src/popup.jade
@@ -122,8 +122,8 @@ html(lang='en' ng-app='omegaPopup' ng-controller='PopupCtrl' ng-csp)
           input.form-control.condition-details(type='text' required ng-model='rule.condition.pattern')
         div.form-group
           label {{'options_resultProfile' | tr}}
-          select.form-control(required ng-model="rule.profileName"
-            ng-options='profile.name as (profile.name | dispName) for profile in validResultProfiles')
+          div(omega-profile-select='validResultProfiles' ng-model='rule.profileName'
+            disp-name='$profile.name | dispName')
         div.condition-controls
           button.btn.btn-default(type='button' ng-click='showConditionForm = false')
             | {{'dialog_cancel' | tr}}