holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some UI/UX improvements:

Browse Source 
- Fix tabs headers alignment and resize
- Implement a loading page to obscure actual DOM rendering from user's view
This commit is contained in:
Hadi Nategh 2019-08-06 02:13:06 +02:00
parent 9d5838ad97
commit 11d4aaf7c1
10 changed files with 190 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api/js/framework/fw_desktop.js
View File

@ -395,8 +395,14 @@
createApplicationTab: function(_app, _pos)
{
this._super.apply(this, arguments);
this.checkTabOverflow();
},
/**
* Runs after et2 is loaded
*
*/
et2_loadingFinished: function() {
this.checkTabOverflow();
},
/**

1
pixelegg/css/mobile.css
View File

@ -4211,7 +4211,6 @@ td.message span.message {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0px 5px 0px 0px;
padding: 0px 5px 0px 0px;
cursor: pointer;
background-repeat: repeat-x;

1
pixelegg/css/monochrome.css
View File

@ -4200,7 +4200,6 @@ td.message span.message {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0px 5px 0px 0px;
padding: 0px 5px 0px 0px;
cursor: pointer;
background-repeat: repeat-x;

24
pixelegg/css/pixelegg.css
View File

@ -4211,7 +4211,6 @@ td.message span.message {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0px 5px 0px 0px;
padding: 0px 5px 0px 0px;
cursor: pointer;
background-repeat: repeat-x;
@ -6405,6 +6404,29 @@ form[id^="ranking-"] .dialogHeadbar {
background-color: rgba(0, 51, 102, 0.3);
border-left: 4px solid #003366 !important;
}
#egw_fw_firstload {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: white;
height: 100%;
width: 100%;
}
#egw_fw_firstload:before {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
background-image: url(../../pixelegg/images/loading.svg);
background-position: center;
background-repeat: no-repeat;
-webkit-animation: fw-firstload 2s infinite;
animation: fw-firstload 2s infinite;
-moz-animation: fw-firstload 2s infinite;
background-size: 50%;
}
#egw_fw_sidebar #egw_fw_sidemenu #addressbook_sidebox_content .egw_fw_ui_category_active {
background-color: #003366 !important;
}

24
pixelegg/css/pixelegg.less
View File

@ -17,7 +17,29 @@
background-color: fade(@addressbook-color, 30%);
border-left:4px solid @addressbook-color !important;
}
#egw_fw_firstload {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: white;
height: 100%;
width: 100%;
&:before{
content:"";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
background-image: url(../../pixelegg/images/loading.svg);
background-position: center;
background-repeat: no-repeat;
-webkit-animation: fw-firstload 2s infinite;
animation: fw-firstload 2s infinite;
-moz-animation: fw-firstload 2s infinite;
background-size: 50%;
}
}
#egw_fw_sidebar {
#egw_fw_sidemenu {
#addressbook_sidebox_content {

1
pixelegg/head.tpl
View File

@ -51,4 +51,5 @@
</div>
<div id="egw_fw_sidebar_r"></div>
</div>
<div id="egw_fw_firstload"></div>
<!-- END framework -->

96
pixelegg/images/loading.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

41
pixelegg/js/fw_pixelegg.js
View File

@ -33,7 +33,46 @@
var height = this._super.apply(this, arguments);
return height;
}
},
/**
* Check to see if the tab header will overflow and want to wrap.
* Deal with it by setting some smaller widths on the tabs.
*/
checkTabOverflow: function()
{
var topmenuWidth = jQuery('#egw_fw_topmenu_info_items').outerWidth();
var width = 0;
var counter = 0;
var marginR = parseInt(jQuery("#egw_fw_main").css('margin-right'));
jQuery(this.tabsUi.contHeaderDiv).css('padding-right',topmenuWidth - marginR);
var outer_width = jQuery(this.tabsUi.contHeaderDiv).width();
var spans = jQuery(this.tabsUi.contHeaderDiv).children('span');
spans.css('max-width','');
spans.each(function() {
// Do not count and add up node if the width is not set (e.g. status app)
if (this.clientWidth > 0)
{
width += jQuery(this).outerWidth(true);
counter++;
}
});
if(width > outer_width)
{
var max_width = Math.floor(outer_width / counter) - (spans.outerWidth(true) - spans.width());
spans.css('max-width', max_width + 'px');
}
},
/**
* Runs after et2 is loaded
*
*/
et2_loadingFinished: function() {
this._super.apply(this, arguments);
jQuery('#egw_fw_firstload').remove();
},
});
/**

1
pixelegg/less/layout_raster_main.less
View File

@ -82,7 +82,6 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0px 5px 0px 0px;
padding: 0px 5px 0px 0px;
cursor: pointer;
background-repeat:repeat-x;

1
pixelegg/mobile/fw_mobile.css
View File

@ -4222,7 +4222,6 @@ td.message span.message {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0px 5px 0px 0px;
padding: 0px 5px 0px 0px;
cursor: pointer;
background-repeat: repeat-x;