Merge pull request #303 from plone/ramon-thursday-1

Modal correct position + tooltip, move burgerbar to the left side
plone · Feb 13, 2014 · 6d220e7 · 6d220e7
2 parents b250bd1 + f8d2f7a
commit 6d220e7
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 21 deletions.
diff --git a/js/bundles/plone.js b/js/bundles/plone.js
@@ -35,7 +35,8 @@ define([
   'mockup-patterns-modal',
   'mockup-patterns-structure',
   'bootstrap-dropdown',
-  'bootstrap-collapse'
+  'bootstrap-collapse',
+  'bootstrap-tooltip'
 ], function($, Registry, Base) {
   "use strict";
 

diff --git a/js/patterns/modal.js b/js/patterns/modal.js
@@ -752,10 +752,11 @@ define([
 
       var margin = typeof self.options.margin === 'function' ? self.options.margin() : self.options.margin;
       self.$modal.css({
-        'position': 'absolute'
+        'position': 'absolute',
+        'padding': margin
       });
       self.$modalDialog.css({
-        margin: margin,
+        margin: '0',
         padding: '0',
         width: self.options.width, // defaults to "", which doesn't override other css
         height: self.options.height // defaults to "", which doesn't override other css

diff --git a/less/barceloneta.less b/less/barceloneta.less
@@ -22,20 +22,24 @@ body {
     .nav();
     .navbar-nav();
 }
-#portal-personaltools-wrapper .actionMenu {
+#portal-personaltools-wrapper {
     .nav();
     .navbar-nav();
+    /*
     @media (min-width: @grid-float-breakpoint) {
       .pull-right();
     }
+    */
 }
+/*
 .navbar-collapse {
   @media (min-width: @grid-float-breakpoint) {
     #portal-personaltools-wrapper .actionMenu:last-child {
       margin-right: -@navbar-padding-horizontal;
     }
   }
 }
+*/
 
 .actionMenuSelected {
     .dropdown-header();
@@ -314,7 +318,7 @@ body.userrole-authenticated {
 }
 
 .userrole-authenticated #edit-zone {
-  background:rgba(25,25,25,0.9);
+  background:rgba(35,35,35,0.9);
   min-height: 50px;
   border: 0px;
 
@@ -620,6 +624,8 @@ body.ajax_load {
     }
 }
 
+
+
 /* Form elements */
 .discreet {
     color: @gray-light;
@@ -640,6 +646,7 @@ body.ajax_load {
 
 // I keep every extension separeted to show each element
 [type="text"]:extend(.form-control all),
+[type="password"]:extend(.form-control all),
 .textType:extend(.form-control all),
 .passwordType:extend(.form-control all),
 select:extend(.form-control all),

diff --git a/less/plone.less b/less/plone.less
@@ -57,30 +57,45 @@
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
-.icon-plus:before { content: '\e807'; } /* '' */
+.icon-plus:before { content: '\e807'; } /* '' ADD NEW */
 .icon-resize-horizontal:before { content: '\e804'; } /* '' */
 .icon-down-dir:before { content: '\e800'; } /* '' */
 .icon-up-dir:before { content: '\e801'; } /* '' */
 .icon-right-dir:before { content: '\e80a'; } /* '' */
-.icon-dot-circled:before { content: '\e809'; } /* '' */
-.icon-pencil:before { content: '\e806'; } /* '' */
-.icon-user:before { content: '\e802'; } /* '' */
-.icon-group:before { content: '\e808'; } /* '' */
-.icon-folder-open:before { content: '\e803'; } /* '' */
+.icon-dot-circled:before { content: '\e809'; } /* '' STATE */
+.icon-pencil:before { content: '\e806'; } /* '' EDIT */
+.icon-user:before { content: '\e802'; } /* '' USER */
+.icon-group:before { content: '\e808'; } /* '' GRANT ACCESS */
+.icon-folder-open:before { content: '\e803'; } /* '' CONTENTS */
 .icon-resize-vertical:before { content: '\e80b'; } /* '' */
-.icon-eye:before { content: '\e805'; } /* '' */
+.icon-eye:before { content: '\e805'; } /* '' VIEW */
+.icon-view-mode:before { content: '\e80d'; } /* '' VIEWS */
 
 
 
+/*toolbar*/
+#edit-zone.navbar-fixed-left {
+	position: fixed;
+	right: 0;
+	left: 0;
+	top: 0;
+  	border-width: 0 0 1px;
+	z-index: @zindex-navbar-fixed;
 
+	  // Undo the rounded corners
+	  @media (min-width: @grid-float-breakpoint) {
+	    border-radius: 0;
+	  }
 
-/*toolbar*/
-.navbar-fixed-top {
 	width:50px;
 	height: 100%;
 	> .container {width: auto; padding: 0; margin: 0; }
-	.contentViews > li, #contentActionMenus > li {float:none !important;position: initial;}
-	.contentViews > li > a, #contentActionMenus > li > a {position: initial;}
+	.contentViews > li, 
+	#contentActionMenus > li,
+	#portal-personaltools-wrapper .actionMenu > li {float:none !important;position: initial;}
+	.contentViews > li > a, 
+	#contentActionMenus > li > a,
+	#portal-personaltools-wrapper .actionMenu > li > a {position: initial;}
 	.caret {
 		border-left: 4px solid;
 		border-bottom: 4px solid transparent;
@@ -106,25 +121,30 @@
 		opacity:1;
 		content:"";
 	}
+	.navbar-collapse {margin-left: -15px; margin-right: -15px;}
+	.dropdown-header {font-weight: bold; font-size: inherit; padding: 8px;text-transform: uppercase;}
 
 }
-.navbar-fixed-top.expanded {
+#edit-zone.navbar-fixed-left.expanded {
 	width:180px;
 	.text-toolbar { //cancel sr-only
 		position: relative;
 		width: auto;
 		height: auto;
 	}
-	.contentViews, #contentActionMenus {
+	.contentViews, #contentActionMenus, #portal-personaltools-wrapper {
 		float:none;
 	}
 	.caret {margin-top:7px;}
 	.dropdown-menu {left:180px;}
 }
 
 #edit-bar {
-	a { color: #fff; padding: 13px 8px !important; opacity: .9;}
-	a:hover, a:focus, .open > a, .selected a { background: @link-color !important; opacity: .9;} 
+	a { 
+		color: #fff; padding: 13px 8px !important; opacity: .9;
+		& + ul a {padding: 8px !important;}
+	}
+	a:hover, a:focus, .open > a, .selected a { background: @gray-darker !important; opacity: .9;} 
 	[class^="icon-"]:before, [class*=" icon-"]:before {font-size:24px;}//font-size = bigger icons
 	[class^="icon-"].state-published {color:saturate(@brand-success, 20%);}
 	[class^="icon-"].state-private {color:saturate(@brand-danger, 30%);}
@@ -142,7 +162,8 @@
 }
 
 /*pretty*/
-.contentViews {background: rgba(0,0,0,.35);}
+#edit-zone .contentViews {background: rgba(0,0,0,.15);}
+#edit-zone .dropdown-menu, #edit-zone .navbar-fixed-left {box-shadow: 2px 0 3px rgba(0,0,0,.25);}
 
 /*switch*/
 @media (min-width: 768px) {