extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-25 17:33:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP login page Ui

Browse Source
This commit is contained in:
Hadi Nategh 2021-04-29 15:24:25 +02:00
parent eefd8ed972
commit 39eef44217
7 changed files with 474 additions and 401 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
api/src/Framework/Login.php
View File

@ -280,6 +280,7 @@ class Login
} }
$tmpl->set_var('autocomplete', ($GLOBALS['egw_info']['server']['autocomplete_login'] ? 'autocomplete="off"' : '')); $tmpl->set_var('autocomplete', ($GLOBALS['egw_info']['server']['autocomplete_login'] ? 'autocomplete="off"' : ''));
$tmpl->set_var('footer_apps', self::get_apps_node());
if (Api\Header\UserAgent::type() == 'msie' && Api\Header\UserAgent::version() < 12) if (Api\Header\UserAgent::type() == 'msie' && Api\Header\UserAgent::version() < 12)
{ {
$tmpl->set_var('cd', lang('Browser %1 %2 is not recommended. You may experience issues and not working features. Please use the latest version of Chrome, Firefox or Edge. Thank You!',Api\Header\UserAgent::type(), Api\Header\UserAgent::version())); $tmpl->set_var('cd', lang('Browser %1 %2 is not recommended. You may experience issues and not working features. Please use the latest version of Chrome, Firefox or Edge. Thank You!',Api\Header\UserAgent::type(), Api\Header\UserAgent::version()));
@ -297,6 +298,27 @@ class Login
$this->framework->render($tmpl->fp('loginout','login_form'),false,false); $this->framework->render($tmpl->fp('loginout','login_form'),false,false);
} }
/**
* Build dom nodes for login applications footer banner
* @return string
*/
static function get_apps_node()
{
$object = json_decode(file_get_contents('https://laklak.egroupware.org/egroupware/login_feed.json'), true);
$apps = []; //TODO: set what we want to dispaly for instances with no access to outside
$nodes = '';
if (is_array($object))
{
$apps = (is_array($object['apps'])) ? $object['apps'] : $apps;
}
foreach ($apps as $app)
{
$nodes .= '<a class="app" href="'.htmlspecialchars($app['url']).'" title="'.htmlspecialchars(lang($app['title'])).'">'
.'<img src="'.htmlspecialchars($app['icon']).'"/><span>'.htmlspecialchars($app['desc']).'</span></a>';
}
return $nodes;
}
/** /**
* Function to pick login background from given values. It picks them randomly * Function to pick login background from given values. It picks them randomly
* if there's more than one image in the list. * if there's more than one image in the list.

59
pixelegg/css/mobile.css
View File

@ -1924,17 +1924,19 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
border-radius: 0 !important; border-radius: 0 !important;
} }
#socialBox { #socialBox {
position: absolute;
bottom: 10px;
display: inline-block; display: inline-block;
left: 0; width: 100%;
width: 27%;
} }
#socialMedia a { #socialBox #socialMedia {
margin: 0 auto;
width: 200px;
}
#socialBox #socialMedia a {
margin-left: 10px; margin-left: 10px;
} }
#socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
filter: contrast(0.6);
} }
/* ################################################################################## /* ##################################################################################
* login page * login page
@ -2028,15 +2030,29 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
bottom: 0; bottom: 0;
display: inline-block; display: inline-block;
right: 0; right: 0;
width: 22%; width: 100%;
}
#loginMainDiv div#login_footer a.logo_footer {
float: right;
margin: 10px;
}
#loginMainDiv div#login_footer a.logo_footer img {
height: 40px; height: 40px;
width: 40px; background: #1865aa;
}
#loginMainDiv div#login_footer .apps {
width: 50%;
margin: auto;
display: flex;
overflow: hidden;
}
#loginMainDiv div#login_footer .apps .app {
width: 30px;
height: 30px;
margin: 5px 20px auto 20px;
display: flex;
}
#loginMainDiv div#login_footer .apps .app img {
width: 30px;
filter: brightness(0) invert(1);
height: 30px;
}
#loginMainDiv div#login_footer .apps .app span {
display: none;
} }
#loginMainDiv div#centerBox { #loginMainDiv div#centerBox {
margin: 0 auto -20px; margin: 0 auto -20px;
@ -2046,10 +2062,25 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
padding: 0; padding: 0;
width: 280px; width: 280px;
} }
#loginMainDiv div#centerBox .egw_logo {
width: 100%;
height: 24px;
margin: 15px auto;
}
#loginMainDiv div#centerBox .egw_logo a.logo_footer {
margin: auto;
width: 24px;
display: block;
}
#loginMainDiv div#centerBox .egw_logo a.logo_footer img {
height: 24px;
width: 24px;
}
#loginMainDiv div#centerBox form { #loginMainDiv div#centerBox form {
opacity: 0.94; opacity: 0.94;
background-color: white; background-color: white;
padding: 1em; padding: 1em;
border: 1px solid #cdcdce;
} }
#loginMainDiv div#centerBox form .hiddenCredential { #loginMainDiv div#centerBox form .hiddenCredential {
display: none; display: none;

75
pixelegg/css/monochrome.css
View File

@ -114,7 +114,7 @@
} }
html[data-darkmode='1'] #mail_sidebox_header.egw_fw_ui_sidemenu_entry_header_active, html[data-darkmode='1'] #mail_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #mail_sidebox_header { html[data-darkmode='1'] #mail_sidebox_header {
border-color: #5db9ec!important; border-color: #5db9ec !important;
} }
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #mail-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active { html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #mail-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #5db9ec !important; border-top-color: #5db9ec !important;
@ -1495,20 +1495,20 @@ span.ui-icon-search {
box-shadow: -2px 1px 9px 3px #B4B4B4; box-shadow: -2px 1px 9px 3px #B4B4B4;
} }
.ui-dialog .ui-dialog-buttonpane { .ui-dialog .ui-dialog-buttonpane {
padding-left: .8em; padding-left: 0.8em;
padding-right: .8em; padding-right: 0.8em;
padding-top: 0.7em; padding-top: 0.7em;
} }
.ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar {
padding-left: .8em; padding-left: 0.8em;
padding-right: .8em; padding-right: 0.8em;
font-size: 12pt; font-size: 12pt;
border: none; border: none;
font-weight: normal; font-weight: normal;
background: white; background: white;
} }
.ui-dialog .ui-dialog-titlebar-close { .ui-dialog .ui-dialog-titlebar-close {
right: .8em; right: 0.8em;
} }
.ui-widget-content { .ui-widget-content {
border: 1px solid #B4B4B4; border: 1px solid #B4B4B4;
@ -1904,17 +1904,19 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
border-radius: 0 !important; border-radius: 0 !important;
} }
#socialBox { #socialBox {
position: absolute;
bottom: 10px;
display: inline-block; display: inline-block;
left: 0; width: 100%;
width: 27%;
} }
#socialMedia a { #socialBox #socialMedia {
margin: 0 auto;
width: 200px;
}
#socialBox #socialMedia a {
margin-left: 10px; margin-left: 10px;
} }
#socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
filter: contrast(0.6);
} }
/* ################################################################################## /* ##################################################################################
* login page * login page
@ -2008,15 +2010,29 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
bottom: 0; bottom: 0;
display: inline-block; display: inline-block;
right: 0; right: 0;
width: 22%; width: 100%;
}
#loginMainDiv div#login_footer a.logo_footer {
float: right;
margin: 10px;
}
#loginMainDiv div#login_footer a.logo_footer img {
height: 40px; height: 40px;
width: 40px; background: #1865aa;
}
#loginMainDiv div#login_footer .apps {
width: 50%;
margin: auto;
display: flex;
overflow: hidden;
}
#loginMainDiv div#login_footer .apps .app {
width: 30px;
height: 30px;
margin: 5px 20px auto 20px;
display: flex;
}
#loginMainDiv div#login_footer .apps .app img {
width: 30px;
filter: brightness(0) invert(1);
height: 30px;
}
#loginMainDiv div#login_footer .apps .app span {
display: none;
} }
#loginMainDiv div#centerBox { #loginMainDiv div#centerBox {
margin: 0 auto -20px; margin: 0 auto -20px;
@ -2026,10 +2042,25 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
padding: 0; padding: 0;
width: 280px; width: 280px;
} }
#loginMainDiv div#centerBox .egw_logo {
width: 100%;
height: 24px;
margin: 15px auto;
}
#loginMainDiv div#centerBox .egw_logo a.logo_footer {
margin: auto;
width: 24px;
display: block;
}
#loginMainDiv div#centerBox .egw_logo a.logo_footer img {
height: 24px;
width: 24px;
}
#loginMainDiv div#centerBox form { #loginMainDiv div#centerBox form {
opacity: 0.94; opacity: 0.94;
background-color: white; background-color: white;
padding: 1em; padding: 1em;
border: 1px solid #cdcdce;
} }
#loginMainDiv div#centerBox form .hiddenCredential { #loginMainDiv div#centerBox form .hiddenCredential {
display: none; display: none;
@ -6316,7 +6347,7 @@ a.textSidebox {
} }
} }
.egw-loading-prompt-container::before { .egw-loading-prompt-container::before {
opacity: .3; opacity: 0.3;
content: ""; content: "";
background-color: #aaaaaa; background-color: #aaaaaa;
width: 100%; width: 100%;
@ -6395,7 +6426,7 @@ a.textSidebox {
z-index: 999; z-index: 999;
width: 100px; width: 100px;
border-radius: 5px; border-radius: 5px;
border: solid 10px #679FD2; border: solid 10px #679FD2;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
/** /**

577
pixelegg/css/pixelegg.css
View File

File diff suppressed because it is too large Load Diff

65
pixelegg/less/layout_loginPage.less
View File

@ -51,19 +51,22 @@ div#loginMainDiv.stockLoginBackground {
//############################################################################################################## //##############################################################################################################
#socialBox { #socialBox {
position: absolute;
bottom: 10px;
display: inline-block; display: inline-block;
left: 0; width: 100%;
width: 27%; #socialMedia {
} margin: 0 auto;
#socialMedia a { width: 200px;
margin-left: 10px; a {
} margin-left: 10px;
#socialMedia a img{ img {
width: 24px; width: 24px;
filter:contrast(0.6);
}
}
}
} }
/* ################################################################################## /* ##################################################################################
* login page * login page
*/ */
@ -163,16 +166,29 @@ div#loginMainDiv.stockLoginBackground {
bottom: 0; bottom: 0;
display: inline-block; display: inline-block;
right: 0; right: 0;
width: 22%; width: 100%;
a.logo_footer { height: 40px;
float:right; background: #1865aa;
margin: 10px; .apps {
img { width: 50%;
height: 40px; margin: auto;
width: 40px; display: flex;
overflow: hidden;
.app {
width: 30px;
height: 30px;
margin: 5px 20px auto 20px;
display: flex;
img {
width: 30px;
filter: brightness(0) invert(1);
height: 30px;
}
span {display:none;}
} }
} }
} }
// Anmeldefenster / Box mit Mesaage + Form // Anmeldefenster / Box mit Mesaage + Form
div#centerBox { div#centerBox {
margin: 0 auto -20px; margin: 0 auto -20px;
@ -182,6 +198,20 @@ div#loginMainDiv.stockLoginBackground {
padding: 0; padding: 0;
width: 280px; width: 280px;
.egw_logo {
width: 100%;
height: 24px;
margin: 15px auto;
a.logo_footer {
margin: auto;
width: 24px;
display: block;
img {
height: 24px;
width: 24px;
}
}
}
// Formular // Formular
@ -189,6 +219,7 @@ div#loginMainDiv.stockLoginBackground {
opacity:0.94; opacity:0.94;
background-color: white; background-color: white;
padding:1em; padding:1em;
border: 1px solid #cdcdce;
.hiddenCredential {display: none;} .hiddenCredential {display: none;}
// Table // Table
table.divLoginbox { table.divLoginbox {

18
pixelegg/login.tpl
View File

@ -106,14 +106,24 @@
</td> </td>
</tr> </tr>
<!-- END registration --> <!-- END registration -->
<tr>
<td>
<div id="socialBox"></div>
</td>
</tr>
</table> </table>
</form> </form>
<div class="egw_logo">
<a href="https://www.egroupware.org" class="logo_footer" target="_blank">
<img src="api/templates/default/images/login_logo.png">
</a>
</div>
</div> </div>
<div id="socialBox"></div>
<div id="login_footer"> <div id="login_footer">
<a href="https://www.egroupware.org" class="logo_footer" target="_blank"> <div class="apps">
<img src="api/templates/default/images/login_logo.png"> {footer_apps}
</a> </div>
</div> </div>
</div> </div>

59
pixelegg/mobile/fw_mobile.css
View File

@ -1935,17 +1935,19 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
border-radius: 0 !important; border-radius: 0 !important;
} }
#socialBox { #socialBox {
position: absolute;
bottom: 10px;
display: inline-block; display: inline-block;
left: 0; width: 100%;
width: 27%;
} }
#socialMedia a { #socialBox #socialMedia {
margin: 0 auto;
width: 200px;
}
#socialBox #socialMedia a {
margin-left: 10px; margin-left: 10px;
} }
#socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
filter: contrast(0.6);
} }
/* ################################################################################## /* ##################################################################################
* login page * login page
@ -2039,15 +2041,29 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
bottom: 0; bottom: 0;
display: inline-block; display: inline-block;
right: 0; right: 0;
width: 22%; width: 100%;
}
#loginMainDiv div#login_footer a.logo_footer {
float: right;
margin: 10px;
}
#loginMainDiv div#login_footer a.logo_footer img {
height: 40px; height: 40px;
width: 40px; background: #1865aa;
}
#loginMainDiv div#login_footer .apps {
width: 50%;
margin: auto;
display: flex;
overflow: hidden;
}
#loginMainDiv div#login_footer .apps .app {
width: 30px;
height: 30px;
margin: 5px 20px auto 20px;
display: flex;
}
#loginMainDiv div#login_footer .apps .app img {
width: 30px;
filter: brightness(0) invert(1);
height: 30px;
}
#loginMainDiv div#login_footer .apps .app span {
display: none;
} }
#loginMainDiv div#centerBox { #loginMainDiv div#centerBox {
margin: 0 auto -20px; margin: 0 auto -20px;
@ -2057,10 +2073,25 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
padding: 0; padding: 0;
width: 280px; width: 280px;
} }
#loginMainDiv div#centerBox .egw_logo {
width: 100%;
height: 24px;
margin: 15px auto;
}
#loginMainDiv div#centerBox .egw_logo a.logo_footer {
margin: auto;
width: 24px;
display: block;
}
#loginMainDiv div#centerBox .egw_logo a.logo_footer img {
height: 24px;
width: 24px;
}
#loginMainDiv div#centerBox form { #loginMainDiv div#centerBox form {
opacity: 0.94; opacity: 0.94;
background-color: white; background-color: white;
padding: 1em; padding: 1em;
border: 1px solid #cdcdce;
} }
#loginMainDiv div#centerBox form .hiddenCredential { #loginMainDiv div#centerBox form .hiddenCredential {
display: none; display: none;