extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 07:53:39 +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('footer_apps', self::get_apps_node());
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()));
@ -297,6 +298,27 @@ class Login
$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
* 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;
}
#socialBox {
position: absolute;
bottom: 10px;
display: inline-block;
left: 0;
width: 27%;
width: 100%;
}
#socialMedia a {
#socialBox #socialMedia {
margin: 0 auto;
width: 200px;
}
#socialBox #socialMedia a {
margin-left: 10px;
}
#socialMedia a img {
#socialBox #socialMedia a img {
width: 24px;
filter: contrast(0.6);
}
/* ##################################################################################
* login page
@ -2028,15 +2030,29 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
bottom: 0;
display: inline-block;
right: 0;
width: 22%;
}
#loginMainDiv div#login_footer a.logo_footer {
float: right;
margin: 10px;
}
#loginMainDiv div#login_footer a.logo_footer img {
width: 100%;
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 {
margin: 0 auto -20px;
@ -2046,10 +2062,25 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
padding: 0;
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 {
opacity: 0.94;
background-color: white;
padding: 1em;
border: 1px solid #cdcdce;
}
#loginMainDiv div#centerBox form .hiddenCredential {
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 {
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 {
border-top-color: #5db9ec !important;
@ -1495,20 +1495,20 @@ span.ui-icon-search {
box-shadow: -2px 1px 9px 3px #B4B4B4;
}
.ui-dialog .ui-dialog-buttonpane {
padding-left: .8em;
padding-right: .8em;
padding-left: 0.8em;
padding-right: 0.8em;
padding-top: 0.7em;
}
.ui-dialog .ui-dialog-titlebar {
padding-left: .8em;
padding-right: .8em;
padding-left: 0.8em;
padding-right: 0.8em;
font-size: 12pt;
border: none;
font-weight: normal;
background: white;
}
.ui-dialog .ui-dialog-titlebar-close {
right: .8em;
right: 0.8em;
}
.ui-widget-content {
border: 1px solid #B4B4B4;
@ -1904,17 +1904,19 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
border-radius: 0 !important;
}
#socialBox {
position: absolute;
bottom: 10px;
display: inline-block;
left: 0;
width: 27%;
width: 100%;
}
#socialMedia a {
#socialBox #socialMedia {
margin: 0 auto;
width: 200px;
}
#socialBox #socialMedia a {
margin-left: 10px;
}
#socialMedia a img {
#socialBox #socialMedia a img {
width: 24px;
filter: contrast(0.6);
}
/* ##################################################################################
* login page
@ -2008,15 +2010,29 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
bottom: 0;
display: inline-block;
right: 0;
width: 22%;
}
#loginMainDiv div#login_footer a.logo_footer {
float: right;
margin: 10px;
}
#loginMainDiv div#login_footer a.logo_footer img {
width: 100%;
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 {
margin: 0 auto -20px;
@ -2026,10 +2042,25 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
padding: 0;
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 {
opacity: 0.94;
background-color: white;
padding: 1em;
border: 1px solid #cdcdce;
}
#loginMainDiv div#centerBox form .hiddenCredential {
display: none;
@ -6316,7 +6347,7 @@ a.textSidebox {
}
}
.egw-loading-prompt-container::before {
opacity: .3;
opacity: 0.3;
content: "";
background-color: #aaaaaa;
width: 100%;
@ -6395,7 +6426,7 @@ a.textSidebox {
z-index: 999;
width: 100px;
border-radius: 5px;
border: solid 10px #679FD2;
border: solid 10px #679FD2;
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 {
position: absolute;
bottom: 10px;
display: inline-block;
left: 0;
width: 27%;
}
#socialMedia a {
margin-left: 10px;
}
#socialMedia a img{
width: 24px;
width: 100%;
#socialMedia {
margin: 0 auto;
width: 200px;
a {
margin-left: 10px;
img {
width: 24px;
filter:contrast(0.6);
}
}
}
}
/* ##################################################################################
* login page
*/
@ -163,16 +166,29 @@ div#loginMainDiv.stockLoginBackground {
bottom: 0;
display: inline-block;
right: 0;
width: 22%;
a.logo_footer {
float:right;
margin: 10px;
img {
height: 40px;
width: 40px;
width: 100%;
height: 40px;
background: #1865aa;
.apps {
width: 50%;
margin: auto;
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
div#centerBox {
margin: 0 auto -20px;
@ -182,6 +198,20 @@ div#loginMainDiv.stockLoginBackground {
padding: 0;
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
@ -189,6 +219,7 @@ div#loginMainDiv.stockLoginBackground {
opacity:0.94;
background-color: white;
padding:1em;
border: 1px solid #cdcdce;
.hiddenCredential {display: none;}
// Table
table.divLoginbox {

18
pixelegg/login.tpl
View File

@ -106,14 +106,24 @@
</td>
</tr>
<!-- END registration -->
<tr>
<td>
<div id="socialBox"></div>
</td>
</tr>
</table>
</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 id="socialBox"></div>
<div id="login_footer">
<a href="https://www.egroupware.org" class="logo_footer" target="_blank">
<img src="api/templates/default/images/login_logo.png">
</a>
<div class="apps">
{footer_apps}
</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;
}
#socialBox {
position: absolute;
bottom: 10px;
display: inline-block;
left: 0;
width: 27%;
width: 100%;
}
#socialMedia a {
#socialBox #socialMedia {
margin: 0 auto;
width: 200px;
}
#socialBox #socialMedia a {
margin-left: 10px;
}
#socialMedia a img {
#socialBox #socialMedia a img {
width: 24px;
filter: contrast(0.6);
}
/* ##################################################################################
* login page
@ -2039,15 +2041,29 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
bottom: 0;
display: inline-block;
right: 0;
width: 22%;
}
#loginMainDiv div#login_footer a.logo_footer {
float: right;
margin: 10px;
}
#loginMainDiv div#login_footer a.logo_footer img {
width: 100%;
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 {
margin: 0 auto -20px;
@ -2057,10 +2073,25 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
padding: 0;
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 {
opacity: 0.94;
background-color: white;
padding: 1em;
border: 1px solid #cdcdce;
}
#loginMainDiv div#centerBox form .hiddenCredential {
display: none;