Styling the Permissions area. Fixed some of the BB views. Removed inline styles.1871-permissions

7 files changed, 62 insertions, 19 deletions

diff --git a/src/fauxton/app/addons/permissions/assets/less/permissions.less b/src/fauxton/app/addons/permissions/assets/less/permissions.less
new file mode 100644
index 000000000..5f5a0db8d
--- /dev/null
+++ b/src/fauxton/app/addons/permissions/assets/less/permissions.less
@@ -0,0 +1,32 @@
+.border-hdr {
+  border-bottom: 1px solid #E3E3E3;
+  margin-bottom: 10px;
+  .help{
+
+  }
+  h3{
+    text-transform: capitalize;
+    margin-bottom: 0;
+  }
+}
+
+
+.permission-items.unstyled{
+	margin-left: 0px;
+	li {
+		padding: 5px;
+		border-bottom: 1px solid #E3E3E3;
+		border-right: 1px solid #E3E3E3;
+		border-left: 3px solid #E3E3E3;
+		&:first-child{
+			border-top: 1px solid #E3E3E3;
+		}
+		&:nth-child(odd){
+      border-left: 3px solid red;
+    }
+    button {
+    	float: right;
+    	margin-bottom: 6px;
+    }
+  }
+}
diff --git a/src/fauxton/app/addons/permissions/templates/item.html b/src/fauxton/app/addons/permissions/templates/item.html
index aa01d0b6e..616ffd61d 100644
--- a/src/fauxton/app/addons/permissions/templates/item.html
+++ b/src/fauxton/app/addons/permissions/templates/item.html
@@ -11,7 +11,7 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-<li> 
+
 <span> <%= item %> </span>
-<button type="button" style="float:none; margin-bottom:6px" class="close">&times;</button>
-</li> 
+<button type="button" class="close">&times;</button>
+
diff --git a/src/fauxton/app/addons/permissions/templates/permissions.html b/src/fauxton/app/addons/permissions/templates/permissions.html
index d2474251e..99c9ff5ba 100644
--- a/src/fauxton/app/addons/permissions/templates/permissions.html
+++ b/src/fauxton/app/addons/permissions/templates/permissions.html
@@ -11,5 +11,5 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-<p>Each database contains lists of admins and members. Admins and members are each defined by names and roles, which are lists of strings.</p>
+
 <div id="sections"> </div>
diff --git a/src/fauxton/app/addons/permissions/templates/section.html b/src/fauxton/app/addons/permissions/templates/section.html
index 102d857f1..09acbf27e 100644
--- a/src/fauxton/app/addons/permissions/templates/section.html
+++ b/src/fauxton/app/addons/permissions/templates/section.html
@@ -11,27 +11,36 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-<h1> <%= section %> </h1>
+<header class="border-hdr">
+<h3> <%= (section) %> </h3>
 <p id="help"> <%= help %> </p>
+</header>
 
 <div class="row">
   <div class="span6">
-    <h3> Names </h3>
-    <ul id="items-names"></ul>
-
+    <header>
+      <h4> Users </h4>
+      <p>Specify users who will have <%= section %> access to this database.</p>
+    </header>
     <form class="permission-item-form form-inline">
       <input data-section="<%= section %>" data-type="names" type="text" class="item input-small" placeholder="Add Name">
-      <input type="submit" class="btn" value="Add Name" >
+      <button type="submit" class="button btn green fonticon-circle-plus">Add Name</button>
     </form>
-
+    <ul class="clearfix unstyled permission-items span10" id="<%= (section) %>-items-names">
+    </ul>
   </div>
   <div class="span6">
-    <h3> Roles </h3>
-    <ul id="items-roles"></ul>
+    <header>
+      <h4> Roles </h4>
+      <p>All users under the following role(s) will have <%= section %> access.</p>
+    </header>
+
 
     <form class="permission-item-form form-inline">
       <input data-section="<%= section %>" data-type="roles" type="text" class="item input-small" placeholder="Add Role">
-      <input type="submit" class="btn" value="Add Role" >
+      <button type="submit" class="button btn green fonticon-circle-plus">Add Role</button>
     </form>
+    <ul class="unstyled permission-items span10" id="<%= (section) %>-items-roles">
+    </ul>
   </div>
 </div>
diff --git a/src/fauxton/app/addons/permissions/views.js b/src/fauxton/app/addons/permissions/views.js
index 4c2987b76..eb5a378db 100644
--- a/src/fauxton/app/addons/permissions/views.js
+++ b/src/fauxton/app/addons/permissions/views.js
@@ -75,7 +75,7 @@ function (app, FauxtonAPI, Permissions ) {
 
     events: {
       "submit .permission-item-form": "addItem",
-      'click .close': "removeItem"
+      'click button.close': "removeItem"
     },
 
     beforeRender: function () {
@@ -85,14 +85,14 @@ function (app, FauxtonAPI, Permissions ) {
       this.roleViews = [];
 
       _.each(section.names, function (name) {
-        var nameView = this.insertView('#items-names', new Permissions.PermissionItem({
+        var nameView = this.insertView('#'+this.section+'-items-names', new Permissions.PermissionItem({
           item: name,
         }));
         this.nameViews.push(nameView);
       }, this);
 
       _.each(section.roles, function (role) {
-        var roleView = this.insertView('#items-roles', new Permissions.PermissionItem({
+        var roleView = this.insertView('#'+this.section+'-items-roles', new Permissions.PermissionItem({
           item: role,
         }));
         this.roleViews.push(roleView);
@@ -164,6 +164,7 @@ function (app, FauxtonAPI, Permissions ) {
   });
 
   Permissions.PermissionItem = FauxtonAPI.View.extend({
+    tagName: "li",
     template: "addons/permissions/templates/item",
     initialize: function (options) {
       this.item = options.item;
diff --git a/src/fauxton/assets/less/database.less b/src/fauxton/assets/less/database.less
index 4b1142752..6f2ae924d 100644
--- a/src/fauxton/assets/less/database.less
+++ b/src/fauxton/assets/less/database.less
@@ -193,9 +193,9 @@ table.active-tasks{
         width: auto;
     }
 }
-#tabs {
-    height: 40px;
-}
+// #tabs {
+//     height: 40px;
+// }
 
 .databases{
     a.db-actions,
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index ddf66f6db..42b783660 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -979,3 +979,4 @@ div.spinner {
     margin-top: -4px;
   }
 }
+