Dialog styling W.I.P.:

- New design for link_to widget

api/js/etemplate/et2_widget_file.js

@@ -160,8 +160,9 @@ var et2_file = (function(){ "use strict"; return et2_inputWidget.extend(
 	createInputWidget: function() {
 		this.node = $j(document.createElement("div")).addClass("et2_file");
 		this.span = $j(document.createElement("span"))
-			.addClass('et2_file_span et2_button et2_button_text')
+			.addClass('et2_file_span et2_button')
 			.appendTo (this.node);
+		if (this.options.label != '') this.span.addClass('et2_button_text');
 		var span = this.span;
 		this.input = $j(document.createElement("input"))
 			.attr("type", "file").attr("placeholder", this.options.blur)

api/js/etemplate/et2_widget_link.js

@@ -127,12 +127,19 @@ var et2_link_to = (function(){ "use strict"; return et2_inputWidget.extend(
 	},
 
 	createInputWidget: function() {
-		this.div = $j(document.createElement("div")).addClass("et2_link_to");
+		this.div = $j(document.createElement("div")).addClass("et2_link_to et2_toolbar");
+
+		// Need a div for file upload widget
+		this.file_div = $j(document.createElement("div")).css({display:'inline-block'}).appendTo(this.div);
+
+		// Filemanager link popup
+		this.filemanager_button = $j(document.createElement("div")).css({display:'inline-block'}).appendTo(this.div);
 
 		// One common link button
 		this.link_button = $j(document.createElement("button"))
 			.text(this.egw().lang(this.options.link_label))
 			.appendTo(this.div).hide()
+			.addClass('link')
 			.click(this, this.createLink);
 
 		// Span for indicating status
@@ -141,17 +148,10 @@ var et2_link_to = (function(){ "use strict"; return et2_inputWidget.extend(
 
 		// Need a div for link-to widget
 		this.link_div = $j(document.createElement("div"))
-			.css("margin-bottom", "1ex")
+			.addClass('div_link')
 			// Leave room for link button
-			.css("width", "89%")
 			.appendTo(this.div);
 
-		// Filemanager link popup
-		this.filemanager_button = $j(document.createElement("div")).appendTo(this.div);
-
-		// Need a div for file upload widget
-		this.file_div = $j(document.createElement("div")).appendTo(this.div);
-
 		this.setDOMNode(this.div[0]);
 	},
 
@@ -180,7 +180,8 @@ var et2_link_to = (function(){ "use strict"; return et2_inputWidget.extend(
 		var select_attrs = {
 			method: 'EGroupware\\Api\\Etemplate\\Widget\\Link::link_existing',
 			method_id: function() { return self.options.value.to_app + ':' + self.options.value.to_id;},
-			button_label: egw.lang('Link')
+			button_label: egw.lang('Link'),
+			button_caption: ''
 		};
 		this.vfs_select = et2_createWidget("vfs-select", select_attrs,this);
 		$j(this.vfs_select.getDOMNode()).change( function() {
@@ -209,7 +210,7 @@ var et2_link_to = (function(){ "use strict"; return et2_inputWidget.extend(
 		var file_attrs = {
 			multiple: true,
 			id: this.id + '_file',
-
+			label: '',
 			// Make the whole template a drop target
 			drop_target: this.getInstanceManager().DOMContainer.getAttribute("id"),
 

api/js/etemplate/et2_widget_vfs.js

@@ -870,7 +870,7 @@ var et2_vfsSelect = (function(){ "use strict"; return et2_inputWidget.extend(
 
 		this.button = $j(document.createElement("button"))
 			.attr("title", this.egw().lang("Select file(s) from VFS"))
-			.addClass("et2_button et2_button_text et2_vfs_btn")
+			.addClass("et2_button et2_vfs_btn")
 			.css("background-image","url("+this.egw().image("filemanager/navbar")+")");
 
 		if (this.options.button_caption != "")

api/templates/default/etemplate2.css

@@ -719,9 +719,19 @@ div.et2_link_entry input.ui-autocomplete-input {
 .et2_link_to {
   overflow-x: visible;
 }
+.et2_link_to > div {display: inline-block; margin-right:5px;}
+
+.et2_link_to.et2_toolbar {margin-top:5px !important;}
+
+.et2_link_to.et2_toolbar div.et2_link_entry input.ui-autocomplete-input {
+	padding-bottom: 4px;
+	height:16px;
+	border-radius: 3px;
+}
+.et2_link_to.et2_toolbar .div_link {width:85%;}
+.et2_link_to.et2_toolbar .div_link select {margin-right: 4px;}
 .et2_link_to button {
   display: inline;
-  float: right;
 }
 .et2_link_to span.status {
   background-repeat: no-repeat;
@@ -765,24 +775,23 @@ div.et2_link_entry input.ui-autocomplete-input {
   width: 22px;
 }
 .et2_link_to button.et2_vfs_btn{
-	float: left;
+	width:24px;
-	margin: 0;
+	height:24px;
-	text-align: left;
-	height: 24px !important;
-	padding-left: 30px !important;
-	background-repeat: no-repeat;
-	background-position: 4px center;
-	background-size: 20px auto;
-	width: 35%;
 }
-.et2_link_to div.et2_file{
+.et2_link_to div.et2_file,
-	display: inline-block;
+.et2_link_to.et2_toolbar div.et2_file,
-	position: relative;
+.et2_link_to.et2_toolbar span.et2_file_span {
+	width:22px;
+	height: 22px;
+	background-position: center;
+}
+.et2_link_to.et2_toolbar div.et2_file {
 	vertical-align: middle;
-	width: 37%;
+    margin-top: -4px;
-	margin-left: 8px;
+	padding-right: 2px;
-	margin-top: 0;
 }
+.et2_link_to.et2_toolbar button.link {float:right;}
+.et2_link_to.et2_toolbar span.et2_file_span { padding-right: 0;}
 .et2_link {
   cursor: pointer;
   color: #003075;

pixelegg/css/mobile.css

@@ -321,105 +321,21 @@
 */
   .et2_link_to {
     min-height: 78px;
-    /*
-        .et2_button_icon {
-            .Complete_Button_Icon_normal;
-            float: left;
-            margin: 0px 20px;
-            padding: 3px;
-            .dimension_width_height_m;
-            background-color: @gray_30;
-            &:hover {.Complete_Button_Icon_hover; background-color: @color_positive_action_active !important;}
-            &:active {.Complete_Button_Icon_active; background-color: @color_positive_action_active !important;}
-}*/
-  }
-  .et2_link_to div:first-child {
-    background-color: #ffdd73;
-    padding: 0.5em 0 0.5em 0.5em;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
   }
   .et2_link_to .et2_link_entry .ui-icon-close {
     background-color: transparent;
     left: 0px;
   }
-  .et2_link_to button:first-child {
-    /*.border_normal;*/
-    /*.box_shadow_standard_light;*/
-    /*.rounded (3px);*/
-    color: #000000;
-    -webkit-appearance: none;
-    -webkit-transition-property: background-color;
-    -moz-transition-property: background-color;
-    -o-transition-property: background-color;
-    transition-property: background-color;
-    -webkit-transition-duration: 0.5s;
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    transition-duration: 0.5s;
-    -webkit-transition-timing-function: linear;
-    -moz-transition-timing-function: linear;
-    -o-transition-timing-function: linear;
-    transition-timing-function: linear;
-    background-color: #e6e6e6;
-    padding: 3px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    height: 20px;
-    position: relative;
-    top: 5px;
-    padding-left: 20px;
-    background-image: url("../images/link.png");
-    background-position: 2px 2px;
-    background-size: 14px 14px;
-    background-repeat: no-repeat;
-  }
-  .et2_link_to button:first-child:hover {
-    /*.background_color_20_gray;*/
-    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    background-color: #1aa200 !important;
-  }
-  .et2_link_to button:first-child:active {
-    /*.background_color_30_gray;*/
-    border: 1px solid rgba(0, 0, 0, 0.9);
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    background-color: #1aa200;
-    background-color: #1aa200 !important;
-  }
   .et2_link_to button.et2_vfs_btn {
-    width: auto;
+    vertical-align: middle;
-    -webkit-border-radius: 5px;
+    background-position: center;
-    -moz-border-radius: 5px;
+    padding: 0 !important;
-    border-radius: 5px;
+    background-size: 16px;
-    position: relative;
+    margin-top: -1px;
-    top: 5px;
+    margin-right: 0px;
-    left: 5px;
-  }
-  .et2_link_to .et2_file {
-    background-color: #ffffff !important;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    left: 0px;
-    margin-left: 60px;
-    /*            &:hover {background-color: @color_positive_action_active !important;}
-            &:active {background-color: @color_positive_action_active !important;}*/
   }
   .et2_link_to .et2_file span {
-    background-image: url("../images/upload.png");
+    background-image: url("../images/add.png");
     background-position: 4px 2px;
     background-size: 16px 16px;
     background-repeat: no-repeat;

pixelegg/css/pixelegg.css

@@ -310,105 +310,21 @@
 */
   .et2_link_to {
     min-height: 78px;
-    /*
-        .et2_button_icon {
-            .Complete_Button_Icon_normal;
-            float: left;
-            margin: 0px 20px;
-            padding: 3px;
-            .dimension_width_height_m;
-            background-color: @gray_30;
-            &:hover {.Complete_Button_Icon_hover; background-color: @color_positive_action_active !important;}
-            &:active {.Complete_Button_Icon_active; background-color: @color_positive_action_active !important;}
-}*/
-  }
-  .et2_link_to div:first-child {
-    background-color: #ffdd73;
-    padding: 0.5em 0 0.5em 0.5em;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
   }
   .et2_link_to .et2_link_entry .ui-icon-close {
     background-color: transparent;
     left: 0px;
   }
-  .et2_link_to button:first-child {
-    /*.border_normal;*/
-    /*.box_shadow_standard_light;*/
-    /*.rounded (3px);*/
-    color: #000000;
-    -webkit-appearance: none;
-    -webkit-transition-property: background-color;
-    -moz-transition-property: background-color;
-    -o-transition-property: background-color;
-    transition-property: background-color;
-    -webkit-transition-duration: 0.5s;
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    transition-duration: 0.5s;
-    -webkit-transition-timing-function: linear;
-    -moz-transition-timing-function: linear;
-    -o-transition-timing-function: linear;
-    transition-timing-function: linear;
-    background-color: #e6e6e6;
-    padding: 3px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    height: 20px;
-    position: relative;
-    top: 5px;
-    padding-left: 20px;
-    background-image: url("../images/link.png");
-    background-position: 2px 2px;
-    background-size: 14px 14px;
-    background-repeat: no-repeat;
-  }
-  .et2_link_to button:first-child:hover {
-    /*.background_color_20_gray;*/
-    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    background-color: #1aa200 !important;
-  }
-  .et2_link_to button:first-child:active {
-    /*.background_color_30_gray;*/
-    border: 1px solid rgba(0, 0, 0, 0.9);
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    background-color: #1aa200;
-    background-color: #1aa200 !important;
-  }
   .et2_link_to button.et2_vfs_btn {
-    width: auto;
+    vertical-align: middle;
-    -webkit-border-radius: 5px;
+    background-position: center;
-    -moz-border-radius: 5px;
+    padding: 0 !important;
-    border-radius: 5px;
+    background-size: 16px;
-    position: relative;
+    margin-top: -1px;
-    top: 5px;
+    margin-right: 0px;
-    left: 5px;
-  }
-  .et2_link_to .et2_file {
-    background-color: #ffffff !important;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    left: 0px;
-    margin-left: 60px;
-    /*            &:hover {background-color: @color_positive_action_active !important;}
-            &:active {background-color: @color_positive_action_active !important;}*/
   }
   .et2_link_to .et2_file span {
-    background-image: url("../images/upload.png");
+    background-image: url("../images/add.png");
     background-position: 4px 2px;
     background-size: 16px 16px;
     background-repeat: no-repeat;

pixelegg/less/etemplate2.less

@@ -280,70 +280,33 @@ div.et2_file input.et2_file_upload{
         Link to / Selector Widget
 */
 .et2_link_to {
-
 	min-height: 78px;
-
-    // Background for select + Search Field
-    div:first-child{
-                    background-color: @egw_color_1_e;
-                    padding: 0.5em 0 0.5em 0.5em;
-                    .rounded(5px);
-                }
-
 	// right select field - icon after
 	.et2_link_entry {
-
 		.ui-icon-close {
 			background-color: transparent;
 			left: 0px;
 		}
 	}
-
-
 	// BUTTON: make link button
 	button:first-child {
-        .Complete_Button_normal;
-        padding: 3px;
-        .rounded(5px);
-        .dimension_height_sm;
-
-        position: relative;
-        top: 5px;
-        padding-left: 20px;
-
-        background-image: url("../images/link.png");
-        background-position: 2px 2px;
-        background-size: 14px 14px;
-        background-repeat: no-repeat;
-
-        &:hover {.Complete_Button_Icon_hover; background-color: @color_positive_action_active !important;}
-         &:active {.Complete_Button_Icon_active; background-color: @color_positive_action_active !important;}
 
 	}
-
-
 	// next line - left
 	// et2_vfs_btn
 	button.et2_vfs_btn {
-        width: auto;
+		vertical-align: middle;
-        .rounded(5px);
+		background-position: center;
-        position: relative;
+		padding: 0 !important;
-        top: 5px;
+		background-size: 16px;
-        left: 5px;
+		margin-top: -1px;
+		margin-right:0px;
 	}
 
 	.et2_file {
-           background-color: @gray_0 !important;
-           .rounded (5px);
-           left: 0px;
-           margin-left: 60px;
-/*            &:hover {background-color: @color_positive_action_active !important;}
-            &:active {background-color: @color_positive_action_active !important;}*/
-
-
 
 		span {
-            background-image: url("../images/upload.png");
+		background-image: url("../images/add.png");
 			background-position: 4px 2px;
 			background-size: 16px 16px;
 			background-repeat: no-repeat;
@@ -351,33 +314,13 @@ div.et2_file input.et2_file_upload{
 
 			&:hover {background-color: @color_positive_action_active !important;}
 			&:active {background-color: @color_positive_action_active !important;}
-
 		}
-
 		span.et2_file_spanActive{background-color: @color_positive_action_active !important;}
-
 		input{
 			border: none;
 			padding: 1em;
-
 		}
-
-
 	}
-
-/*
-        .et2_button_icon {
-            .Complete_Button_Icon_normal;
-            float: left;
-            margin: 0px 20px;
-            padding: 3px;
-            .dimension_width_height_m;
-            background-color: @gray_30;
-            &:hover {.Complete_Button_Icon_hover; background-color: @color_positive_action_active !important;}
-            &:active {.Complete_Button_Icon_active; background-color: @color_positive_action_active !important;}
-}*/
-
-
 }
 
 
@@ -409,9 +352,7 @@ div.et2_file input.et2_file_upload{
 
 			&:hover {background-color: @color_negative_action_active !important;}
 			&:active {background-color: @color_negative_action_active !important;}
-
 		}
-
 	}
 }
 

pixelegg/mobile/fw_mobile.css

@@ -332,105 +332,21 @@
 */
   .et2_link_to {
     min-height: 78px;
-    /*
-        .et2_button_icon {
-            .Complete_Button_Icon_normal;
-            float: left;
-            margin: 0px 20px;
-            padding: 3px;
-            .dimension_width_height_m;
-            background-color: @gray_30;
-            &:hover {.Complete_Button_Icon_hover; background-color: @color_positive_action_active !important;}
-            &:active {.Complete_Button_Icon_active; background-color: @color_positive_action_active !important;}
-}*/
-  }
-  .et2_link_to div:first-child {
-    background-color: #ffdd73;
-    padding: 0.5em 0 0.5em 0.5em;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
   }
   .et2_link_to .et2_link_entry .ui-icon-close {
     background-color: transparent;
     left: 0px;
   }
-  .et2_link_to button:first-child {
-    /*.border_normal;*/
-    /*.box_shadow_standard_light;*/
-    /*.rounded (3px);*/
-    color: #000000;
-    -webkit-appearance: none;
-    -webkit-transition-property: background-color;
-    -moz-transition-property: background-color;
-    -o-transition-property: background-color;
-    transition-property: background-color;
-    -webkit-transition-duration: 0.5s;
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    transition-duration: 0.5s;
-    -webkit-transition-timing-function: linear;
-    -moz-transition-timing-function: linear;
-    -o-transition-timing-function: linear;
-    transition-timing-function: linear;
-    background-color: #e6e6e6;
-    padding: 3px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    height: 20px;
-    position: relative;
-    top: 5px;
-    padding-left: 20px;
-    background-image: url("../images/link.png");
-    background-position: 2px 2px;
-    background-size: 14px 14px;
-    background-repeat: no-repeat;
-  }
-  .et2_link_to button:first-child:hover {
-    /*.background_color_20_gray;*/
-    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    background-color: #1aa200 !important;
-  }
-  .et2_link_to button:first-child:active {
-    /*.background_color_30_gray;*/
-    border: 1px solid rgba(0, 0, 0, 0.9);
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    background-color: #1aa200;
-    background-color: #1aa200 !important;
-  }
   .et2_link_to button.et2_vfs_btn {
-    width: auto;
+    vertical-align: middle;
-    -webkit-border-radius: 5px;
+    background-position: center;
-    -moz-border-radius: 5px;
+    padding: 0 !important;
-    border-radius: 5px;
+    background-size: 16px;
-    position: relative;
+    margin-top: -1px;
-    top: 5px;
+    margin-right: 0px;
-    left: 5px;
-  }
-  .et2_link_to .et2_file {
-    background-color: #ffffff !important;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    left: 0px;
-    margin-left: 60px;
-    /*            &:hover {background-color: @color_positive_action_active !important;}
-            &:active {background-color: @color_positive_action_active !important;}*/
   }
   .et2_link_to .et2_file span {
-    background-image: url("../images/upload.png");
+    background-image: url("../images/add.png");
     background-position: 4px 2px;
     background-size: 16px 16px;
     background-repeat: no-repeat;
@@ -2671,7 +2587,7 @@ div.client_error_log tr td.stack > div {
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Stefan Reinhardt <stefan.reinhardt@pixelegg.de>
  * @package phpgwapi
- * @version $Id: layout_content_elements.less 55572 2016-03-31 09:21:55Z ralfbecker $
+ * @version $Id: layout_content_elements.less 55670 2016-04-07 12:42:27Z hnategh $
  */
 /* #######################################################################################
 *
@@ -2910,7 +2826,7 @@ div.dhtmlxMenu_egw_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
  * @package pixelegg
- * @version $Id: layout_dialog.less 55667 2016-04-07 09:13:26Z hnategh $
+ * @version $Id: layout_dialog.less 55670 2016-04-07 12:42:27Z hnategh $
  */
 /*body {
     background-color: @gray_0;
@@ -5272,7 +5188,7 @@ button.image_button {
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
  * @package pixelegg
- * @version $Id: layout_table.less 55667 2016-04-07 09:13:26Z hnategh $
+ * @version $Id: layout_table.less 55670 2016-04-07 12:42:27Z hnategh $
  */
 /** #####################################################################################
  * et2