Added contact toolbar

dev/Styles/Contacts.less

@@ -1,5 +1,5 @@
 
-@contacts-popup-left-width: 250px;
+@contacts-popup-left-width: 220px;
 
 .b-contacts-content {
 
@@ -61,13 +61,13 @@
 		.b-list-toolbar {
 			padding: 0;
 			height: 45px;
-			text-align: center;
+			text-align: right;
 			width: @contacts-popup-left-width;
 			.box-shadow(inset 0 -1px 0 #ccc);
 
 			.e-search {
 				margin-top: 7px;
-				width: @contacts-popup-left-width - 25;
+				width: @contacts-popup-left-width - 20;
 			}
 		}
 
@@ -239,9 +239,32 @@
 			}
 		}
 		
-		.b-view-content {
+		.b-view-content-toolbar {
+			background-color: #f5f5f5;
+			padding: 7px;
 			position: absolute;
 			top: 0;
+			right: 0;
+			left: @contacts-popup-left-width;
+			height: 31px;
+			text-align: center;
+			.box-shadow(inset 0 -1px 0 #ccc);
+
+			.button-save-contact {
+				&.no-disabled.dirty {
+					color: #51a351;
+					font-weight: bold;
+				}
+			}
+
+			&.read-only .button-save-contact {
+				display: none;
+			}
+		}
+
+		.b-view-content {
+			position: absolute;
+			top: 45px;
 			bottom: 60px;
 			left: @contacts-popup-left-width;
 			right: 0;
@@ -251,6 +274,7 @@
 			background-color: #fff;
 			border-left: 1px solid #ddd;
 
+
 			.content {
 				-webkit-overflow-scrolling: touch;
 			}
@@ -367,27 +391,10 @@
 			}
 
 			.e-share-sign {
-				position: absolute;
-				top: 60px;
-				right: 20px;
-				cursor: pointer;
-			}
-
-			.button-save-contact {
 				position: absolute;
 				top: 20px;
 				right: 20px;
-
+				cursor: pointer;
-				&.no-disabled.dirty {
-					color: #51a351;
-					font-weight: bold;
-				}
-			}
-
-			.button-add-prop {
-				position: absolute;
-				top: 60px;
-				right: 20px;
 			}
 
 			&.read-only {
@@ -398,10 +405,6 @@
 				.e-share-sign {
 					display: none;
 				}
-				
-				.button-save-contact {
-					display: none;
-				}
 			}
 		}
 	}

dev/Styles/Layout.less

@@ -143,19 +143,10 @@ html.ssm-state-tablet, html.ssm-state-mobile {
 	}
 
 	.b-contacts-content.modal {
-		width: 600px;
+		width: 700px;
 	}
 
 	.b-contacts-content.modal {
-		.b-list-toolbar, .b-list-content, .b-list-footer-toolbar {
-			width: 150px;
-		}
-		.b-list-toolbar .e-search {
-			width: 125px;
-		}
-		.b-view-content {
-			left: 150px;
-		}
 		.contactValueInput {
 			width: 200px;
 		}
@@ -173,15 +164,6 @@ html.ssm-state-tablet {
 	}
 
 	.b-contacts-content.modal {
-		.b-list-toolbar, .b-list-content, .b-list-footer-toolbar {
-			width: 200px;
-		}
-		.b-list-toolbar .e-search {
-			width: 175px;
-		}
-		.b-view-content {
-			left: 200px;
-		}
 		.contactValueInput {
 			width: 250px;
 		}

rainloop/v/0.0.0/app/templates/Views/PopupsContacts.html

@@ -116,6 +116,52 @@
 					<!-- ko template: { name: 'Pagenator', data: contactsPagenator } --><!-- /ko -->
 				</div>
 			</div>
+			<div class="b-view-content-toolbar btn-toolbar" data-bind="css: {'read-only': viewReadOnly}">
+				<div class="btn-group pull-right dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registrateBootstrapDropdown: true">
+					<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle" data-toggle="dropdown">
+						<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_LABEL"></span>
+						&nbsp;&nbsp;
+						<span class="caret"></span>
+					</a>
+					<ul class="dropdown-menu g-ui-menu" style="text-align: left" tabindex="-1" role="menu" aria-labelledby="button-add-prop-dropdown-id">
+						<li class="e-item" role="presentation">
+							<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewEmail">
+								<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_EMAIL"></span>
+							</a>
+						</li>
+						<li class="e-item" role="presentation">
+							<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewPhone">
+								<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_PHONE"></span>
+							</a>
+						</li>
+						<li class="e-item" role="presentation">
+							<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewWeb">
+								<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_URL"></span>
+							</a>
+						</li>
+						<li class="divider" role="presentation"></li>
+						<li class="e-item" role="presentation">
+							<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewNickname">
+								<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_NICKNAME"></span>
+							</a>
+						</li>
+	<!--									<li class="e-item" role="presentation">
+							<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewAddress">
+								<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_ADDRESS"></span>
+							</a>
+						</li>-->
+					</ul>
+				</div>
+				<div class="btn-group pull-right">&nbsp;</div>
+				<div class="btn-group pull-right">
+					<button class="btn button-save-contact" data-bind="visible: !emptySelection(), command: saveCommand, css: {'dirty': watchDirty}">
+						<i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner animated': viewSaving()}"></i>
+						&nbsp;&nbsp;
+						<span class="i18n" data-i18n-text="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span>
+						<span class="i18n" data-i18n-text="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
+					</button>
+				</div>
+			</div>
 			<div class="b-view-content" data-bind="nano: true, css: {'read-only': viewReadOnly}">
 				<div class="content g-scrollbox">
 					<div class="content-wrapper">
@@ -213,48 +259,7 @@
 								<i class="icon-lock iconsize24" data-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'"></i>
 							</div>-->
 
-							<button class="btn button-save-contact" data-bind="command: saveCommand, css: {'dirty': watchDirty}">
-								<i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner animated': viewSaving()}"></i>
-								&nbsp;&nbsp;
-								<span class="i18n" data-i18n-text="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span>
-								<span class="i18n" data-i18n-text="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
-							</button>
 							
-							<div class="btn-group pull-right dropdown colored-toggle button-add-prop" data-bind="registrateBootstrapDropdown: true">
-								<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle" data-toggle="dropdown">
-									<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_LABEL"></span>
-									&nbsp;&nbsp;
-									<span class="caret"></span>
-								</a>
-								<ul class="dropdown-menu g-ui-menu" tabindex="-1" role="menu" aria-labelledby="button-add-prop-dropdown-id">
-									<li class="e-item" role="presentation">
-										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewEmail">
-											<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_EMAIL"></span>
-										</a>
-									</li>
-									<li class="e-item" role="presentation">
-										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewPhone">
-											<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_PHONE"></span>
-										</a>
-									</li>
-									<li class="e-item" role="presentation">
-										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewWeb">
-											<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_URL"></span>
-										</a>
-									</li>
-									<li class="divider" role="presentation"></li>
-									<li class="e-item" role="presentation">
-										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewNickname">
-											<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_NICKNAME"></span>
-										</a>
-									</li>
-<!--									<li class="e-item" role="presentation">
-										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewAddress">
-											<span class="i18n" data-i18n-text="CONTACTS/ADD_MENU_ADDRESS"></span>
-										</a>
-									</li>-->
-								</ul>
-							</div>
 						</div>
 					</div>
 				</div>

rainloop/v/0.0.0/static/css/app.css

@@ -7082,23 +7082,7 @@ html.ssm-state-mobile .b-compose.modal {
 }
 html.ssm-state-tablet .b-contacts-content.modal,
 html.ssm-state-mobile .b-contacts-content.modal {
-  width: 600px;
+  width: 700px;
-}
-html.ssm-state-tablet .b-contacts-content.modal .b-list-toolbar,
-html.ssm-state-mobile .b-contacts-content.modal .b-list-toolbar,
-html.ssm-state-tablet .b-contacts-content.modal .b-list-content,
-html.ssm-state-mobile .b-contacts-content.modal .b-list-content,
-html.ssm-state-tablet .b-contacts-content.modal .b-list-footer-toolbar,
-html.ssm-state-mobile .b-contacts-content.modal .b-list-footer-toolbar {
-  width: 150px;
-}
-html.ssm-state-tablet .b-contacts-content.modal .b-list-toolbar .e-search,
-html.ssm-state-mobile .b-contacts-content.modal .b-list-toolbar .e-search {
-  width: 125px;
-}
-html.ssm-state-tablet .b-contacts-content.modal .b-view-content,
-html.ssm-state-mobile .b-contacts-content.modal .b-view-content {
-  left: 150px;
 }
 html.ssm-state-tablet .b-contacts-content.modal .contactValueInput,
 html.ssm-state-mobile .b-contacts-content.modal .contactValueInput {
@@ -7110,17 +7094,6 @@ html.ssm-state-tablet .b-compose.modal {
 html.ssm-state-tablet .b-contacts-content.modal {
   width: 800px;
 }
-html.ssm-state-tablet .b-contacts-content.modal .b-list-toolbar,
-html.ssm-state-tablet .b-contacts-content.modal .b-list-content,
-html.ssm-state-tablet .b-contacts-content.modal .b-list-footer-toolbar {
-  width: 200px;
-}
-html.ssm-state-tablet .b-contacts-content.modal .b-list-toolbar .e-search {
-  width: 175px;
-}
-html.ssm-state-tablet .b-contacts-content.modal .b-view-content {
-  left: 200px;
-}
 html.ssm-state-tablet .b-contacts-content.modal .contactValueInput {
   width: 250px;
 }
@@ -8473,22 +8446,22 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
 .b-contacts-content.modal .b-list-toolbar {
   padding: 0;
   height: 45px;
-  text-align: center;
+  text-align: right;
-  width: 250px;
+  width: 220px;
   -webkit-box-shadow: inset 0 -1px 0 #cccccc;
   -moz-box-shadow: inset 0 -1px 0 #cccccc;
   box-shadow: inset 0 -1px 0 #cccccc;
 }
 .b-contacts-content.modal .b-list-toolbar .e-search {
   margin-top: 7px;
-  width: 225px;
+  width: 200px;
 }
 .b-contacts-content.modal .b-list-footer-toolbar {
   position: absolute;
   left: 0;
   bottom: 0;
   height: 105px;
-  width: 250px;
+  width: 220px;
   background-color: #eee;
   -webkit-box-shadow: inset 0 1px 0 #cccccc;
   -moz-box-shadow: inset 0 1px 0 #cccccc;
@@ -8502,7 +8475,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
   top: 45px;
   bottom: 105px;
   left: 0;
-  width: 250px;
+  width: 220px;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -8630,11 +8603,31 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
 .b-contacts-content.modal .b-list-content .e-contact-item.selected.focused .sidebarParent {
   background-color: #217ef0 !important;
 }
-.b-contacts-content.modal .b-view-content {
+.b-contacts-content.modal .b-view-content-toolbar {
+  background-color: #f5f5f5;
+  padding: 7px;
   position: absolute;
   top: 0;
+  right: 0;
+  left: 220px;
+  height: 31px;
+  text-align: center;
+  -webkit-box-shadow: inset 0 -1px 0 #cccccc;
+  -moz-box-shadow: inset 0 -1px 0 #cccccc;
+  box-shadow: inset 0 -1px 0 #cccccc;
+}
+.b-contacts-content.modal .b-view-content-toolbar .button-save-contact.no-disabled.dirty {
+  color: #51a351;
+  font-weight: bold;
+}
+.b-contacts-content.modal .b-view-content-toolbar.read-only .button-save-contact {
+  display: none;
+}
+.b-contacts-content.modal .b-view-content {
+  position: absolute;
+  top: 45px;
   bottom: 60px;
-  left: 250px;
+  left: 220px;
   right: 0;
   overflow: hidden;
   overflow-y: auto;
@@ -8762,24 +8755,10 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
   right: 40px;
 }
 .b-contacts-content.modal .b-view-content .e-share-sign {
-  position: absolute;
-  top: 60px;
-  right: 20px;
-  cursor: pointer;
-}
-.b-contacts-content.modal .b-view-content .button-save-contact {
   position: absolute;
   top: 20px;
   right: 20px;
-}
+  cursor: pointer;
-.b-contacts-content.modal .b-view-content .button-save-contact.no-disabled.dirty {
-  color: #51a351;
-  font-weight: bold;
-}
-.b-contacts-content.modal .b-view-content .button-add-prop {
-  position: absolute;
-  top: 60px;
-  right: 20px;
 }
 .b-contacts-content.modal .b-view-content.read-only .e-read-only-sign {
   display: inline-block;
@@ -8787,9 +8766,6 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
 .b-contacts-content.modal .b-view-content.read-only .e-share-sign {
   display: none;
 }
-.b-contacts-content.modal .b-view-content.read-only .button-save-contact {
-  display: none;
-}
 .b-contacts-content .e-contact-item {
   position: relative;
   height: 55px;