extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-25 16:18:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dialog styling W.I.P.:

Browse Source 
- New design for link_to widget
This commit is contained in:
Hadi Nategh 2016-04-07 17:13:06 +00:00
parent ce4dd3420d
commit d48a968674
8 changed files with 126 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
api/js/etemplate/et2_widget_file.js
View File

@ -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)

23
api/js/etemplate/et2_widget_link.js
View File

@ -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"),

2
api/js/etemplate/et2_widget_vfs.js
View File

@ -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 != "")

41
api/templates/default/etemplate2.css
View File

@ -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;
margin: 0;
text-align: left;
height: 24px !important;
padding-left: 30px !important;
background-repeat: no-repeat;
background-position: 4px center;
background-size: 20px auto;
width: 35%;
width:24px;
height:24px;
}
.et2_link_to div.et2_file{
display: inline-block;
position: relative;
.et2_link_to div.et2_file,
.et2_link_to.et2_toolbar div.et2_file,
.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-left: 8px;
margin-top: 0;
margin-top: -4px;
padding-right: 2px;
}
.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;

98
pixelegg/css/mobile.css
View File

@ -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;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
top: 5px;
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;}*/
vertical-align: middle;
background-position: center;
padding: 0 !important;
background-size: 16px;
margin-top: -1px;
margin-right: 0px;
}
.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;

98
pixelegg/css/pixelegg.css
View File

@ -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;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
top: 5px;
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;}*/
vertical-align: middle;
background-position: center;
padding: 0 !important;
background-size: 16px;
margin-top: -1px;
margin-right: 0px;
}
.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;

183
pixelegg/less/etemplate2.less
View File

@ -280,139 +280,80 @@ div.et2_file input.et2_file_upload{
Link to / Selector Widget
*/
.et2_link_to {
min-height: 78px;
// right select field - icon after
.et2_link_entry {
.ui-icon-close {
background-color: transparent;
left: 0px;
}
}
// BUTTON: make link button
button:first-child {
min-height: 78px;
}
// next line - left
// et2_vfs_btn
button.et2_vfs_btn {
vertical-align: middle;
background-position: center;
padding: 0 !important;
background-size: 16px;
margin-top: -1px;
margin-right:0px;
}
// 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;
.rounded(5px);
position: relative;
top: 5px;
left: 5px;
}
.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-position: 4px 2px;
background-size: 16px 16px;
background-repeat: no-repeat;
.rounded (5px);
&: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;}
}*/
.et2_file {
span {
background-image: url("../images/add.png");
background-position: 4px 2px;
background-size: 16px 16px;
background-repeat: no-repeat;
.rounded (5px);
&: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_link {
color: @egw_color_2_a;
color: @egw_color_2_a;
}
.et2_link_list{
tr {
cursor: pointer;
&:hover {background-color: @color_hover_row;}
&:active {background-color: @color_active_row;}
}
.et2_link_list {
tr {
cursor: pointer;
&:hover {background-color: @color_hover_row;}
&:active {background-color: @color_active_row;}
}
.icon img,
.icon {
width: 14px !important;
height: 14px !important;
}
.icon img,
.icon {
width: 14px !important;
height: 14px !important;
}
td {
div.delete {
visibility: hidden;
background-image: url("../images/close.png");
background-position: center;
background-repeat: no-repeat;
background-size: 16px 16px;
background-color: @color_negative_action;
padding: 0px;
td {
div.delete {
visibility: hidden;
background-image: url("../images/close.png");
background-position: center;
background-repeat: no-repeat;
background-size: 16px 16px;
background-color: @color_negative_action;
padding: 0px;
&:hover {background-color: @color_negative_action_active !important;}
&:active {background-color: @color_negative_action_active !important;}
}
}
&:hover {background-color: @color_negative_action_active !important;}
&:active {background-color: @color_negative_action_active !important;}
}
}
}

104
pixelegg/mobile/fw_mobile.css
View File

@ -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;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
top: 5px;
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;}*/
vertical-align: middle;
background-position: center;
padding: 0 !important;
background-size: 16px;
margin-top: -1px;
margin-right: 0px;
}
.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