[Kimchi-devel] [PATCH 1/2] UI: support ldap vm permission tag

Aline Manera alinefm at linux.vnet.ibm.com
Wed Nov 26 18:56:28 UTC 2014


From: Royce Lv <lvroyce at linux.vnet.ibm.com>

Add corresponding html and css to support vm permission.

Signed-off-by: Royce Lv <lvroyce at linux.vnet.ibm.com>
---
 ui/css/theme-default/guest-edit.css | 96 +++++++++++++++++++++++++------------
 ui/pages/guest-edit.html.tmpl       | 22 ++++++++-
 2 files changed, 86 insertions(+), 32 deletions(-)

diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css
index 74d72f2..aaccfe7 100644
--- a/ui/css/theme-default/guest-edit.css
+++ b/ui/css/theme-default/guest-edit.css
@@ -28,8 +28,7 @@
     padding: 0;
 }
 
-#form-guest-edit-general,
-#form-guest-edit-storage {
+#form-guest-edit-general {
     padding: 1em;
 }
 
@@ -97,7 +96,8 @@
 
 #form-guest-edit-storage .header,
 .guest-edit-snapshot .header,
-.guest-edit-interface .header {
+.guest-edit-interface .header,
+#form-guest-edit-permission .ldap .header {
     margin-bottom: 8px;
     padding-bottom: 2px;
     font-weight: bold;
@@ -123,7 +123,7 @@
 }
 
 .guest-edit-snapshot .sel {
-    width: 35px;
+    width: 25px;
     vertical-align: top;
 }
 
@@ -180,12 +180,6 @@
     height: 20px;
 }
 
-#form-guest-edit-storage .header button,
-.guest-edit-snapshot .header button,
-.guest-edit-interface .header button {
-    margin-bottom: 1px;
-}
-
 #form-guest-edit-storage .body button:not(:last-child),
 .guest-edit-interface .body button:not(:last-child) {
     margin-right: 2px;
@@ -196,27 +190,31 @@
     display: none!important;
 }
 
-.guest-edit-permission {
-    height: 240px;
+.guest-edit-permission .pam {
+    height: 220px;
     padding: 5px 10px!important;
 }
 
-.guest-edit-permission .column {
+.guest-edit-permission .hide {
+    display: none;
+}
+
+.guest-edit-permission .pam .column {
     display: inline-block;
     vertical-align: top;
 }
 
-.guest-edit-permission .title {
+.guest-edit-permission .pam .title {
     margin-bottom: 3px;
 }
 
-.guest-edit-permission input[type="text"] {
+.guest-edit-permission .pam input[type="text"] {
     margin-bottom: 3px;
     font-size: 12px;
     width: 97%;
 }
 
-.guest-edit-permission .body {
+.guest-edit-permission .pam .body {
     border: 1px solid #999999;
     font-size: 12px;
     padding: 1px;
@@ -224,77 +222,113 @@
     overflow: auto;
 }
 
-.guest-edit-permission .body .head {
+.guest-edit-permission .pam .body .head {
     margin-bottom: 3px;
     font-weight: bold;
     background: linear-gradient(to bottom, #E5E5E5 0%, #C4C4C4 100%) repeat scroll 0 0 transparent;
 }
 
-.guest-edit-permission .body .item {
+.guest-edit-permission .pam .body .item {
     padding: 2px 3px;
     margin-bottom: 1px;
     cursor: pointer;
 }
 
-.guest-edit-permission .body .item:hover {
+.guest-edit-permission .pam .body .item:hover {
     background-color: #AAAAAA;
 }
 
-.guest-edit-permission .body .item-picked {
+.guest-edit-permission .pam .body .item-picked {
     background-color: #BBBBBB;
 }
 
-.guest-edit-permission .body .item .icon {
+.guest-edit-permission .pam .body .item .icon {
     display: inline-block;
     height: 15px;
     width: 15px;
     vertical-align: bottom;
 }
 
-.guest-edit-permission .body .item .user-icon {
+.guest-edit-permission .pam .body .item .user-icon {
     background: url('/images/theme-default/user.png') no-repeat scroll;
     background-size: 15px 15px;
 }
 
-.guest-edit-permission .body .item .group-icon {
+.guest-edit-permission .pam .body .item .group-icon {
     background: url('/images/theme-default/group.png') no-repeat scroll;
     background-size: 15px 15px;
 }
 
-.guest-edit-permission .body .column-user {
+.guest-edit-permission .pam .body .column-user {
     width: 48%;
 }
-.guest-edit-permission .body .column-group {
+.guest-edit-permission .pam .body .column-group {
     width: 50%;
 }
 
-.guest-edit-permission .control {
+.guest-edit-permission .pam .control {
     width: 5%;
 }
 
-.guest-edit-permission .control button {
+.guest-edit-permission .pam .control button {
     width: 26px;
     margin-left: 7px;
 }
 
-.guest-edit-permission .control button:first-child {
+.guest-edit-permission .pam .control button:first-child {
     margin-top: 110px;
     margin-bottom: 2px;
 }
 
-.guest-edit-permission .control .ui-button-text-only .ui-button-text {
+.guest-edit-permission .pam .control .ui-button-text-only .ui-button-text {
     padding: 2px 8px;
 }
 
-.guest-edit-permission .avail {
+.guest-edit-permission .pam .avail {
     width: 46%;
 }
 
-.guest-edit-permission .selected {
+.guest-edit-permission .pam .selected {
     width: 46%;
     float: right;
 }
 
+#form-guest-edit-permission .ldap .body .item {
+    margin: 8px 0;
+}
+
+#form-guest-edit-permission .ldap .cell {
+    width: 250px;
+}
+
+#form-guest-edit-permission .ldap .action-area {
+    float: right;
+    line-height: 24px;
+}
+
+#form-guest-edit-permission .ldap button {
+    width: 20px;
+    height: 20px;
+}
+
+#form-guest-edit-permission input[type="text"] {
+    width: 300px;
+}
+
+#form-guest-edit-permission .ldap .header button {
+    margin-bottom: 1px;
+}
+
+#form-guest-edit-permission .ldap .checked {
+    border-color: red;
+    border-style: solid;
+    border-width: 1px;
+}
+
+#form-guest-edit-permission .ldap .checked.hide {
+    display: none;
+}
+
 .guest-edit-pci {
     height: 79%;
     overflow: auto;
diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
index e1626a0..9db1e1c 100644
--- a/ui/pages/guest-edit.html.tmpl
+++ b/ui/pages/guest-edit.html.tmpl
@@ -115,6 +115,7 @@
                 <div class="body"></div>
             </form>
             <form id="form-guest-edit-permission" class="guest-edit-permission">
+                <div class="pam">
                     <div class="column avail">
                         <div class="title">$_("Available system users and groups")</div>
                         <input type="text" id="permission-avail-searchBox">
@@ -143,6 +144,14 @@
                             <div id="permission-sel-groups"  class="column column-group"></div>
                         </div>
                     </div>
+                </div>
+                <div class="ldap">
+                    <div class="header">
+                        <span class="cell">$_("User")</span>
+                        <button type="button" id="guest-edit-add-user-button" class="action-area add"></button>
+                    </div>
+                    <div class="body"></div>
+                </div>
             </form>
             <form id="form-guest-edit-pci" class="guest-edit-pci">
                 <div class="guest-scroll-indent">
@@ -231,6 +240,17 @@
         </span>
     <div>
 </script>
+<script id="ldap-user-tmpl" type="text/html">
+    <div class="item" id="{user}">
+        <span class="cell">
+            <label class="{viewMode}">{user}</label>
+            <input type="text"  placeholder="LDAP User ID,e.g.foo at foo.com" class="{editMode}"/>
+        </span>
+        <span class="action-area">
+            <button class="delete"></button>
+        </span>
+    <div>
+</script>
 <script id="disk-row-tmpl" type="text/html">
     <div class="item" id="cdrom-{dev}">
         <span class="cell dev">
@@ -250,7 +270,7 @@
         </span>
     </div>
 </script>
-<script id="permission-item" type="text/html">
+<script id="permission-item-pam" type="text/html">
 <div class="item">
     <span class="icon {class}"></span>
     <label>{val}</label>
-- 
1.9.3




More information about the Kimchi-devel mailing list