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

WIP login Ui:

Browse Source 
- Get login messages the same style as egw messages
- Arrange logo and social icons
This commit is contained in:
Hadi Nategh 2021-05-10 16:35:05 +02:00
parent a2d182c11a
commit 33951a6377
8 changed files with 113 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/js/login.js
View File

@ -24,8 +24,8 @@ egw_LAB.wait(function()
// lock the device orientation in portrait view // lock the device orientation in portrait view
if (screen.orientation && typeof screen.orientation.lock == 'function') screen.orientation.lock('portrait'); if (screen.orientation && typeof screen.orientation.lock == 'function') screen.orientation.lock('portrait');
jQuery('.closeBtn').click(function (){ jQuery('.close').click(function (){
setTimeout(function(){jQuery('.loginMessageBox').slideUp("slow");},100); setTimeout(function(){jQuery('.egw_message_wrapper').slideUp("slow");},100);
}); });
function do_social(_data) function do_social(_data)
{ {

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

@ -115,7 +115,7 @@ class Login
} }
$tmpl->set_var('cd', $cd_msg); $tmpl->set_var('cd', $cd_msg);
$tmpl->set_var('cd_class', isset($_GET['cd']) && $_GET['cd'] != 1 || $tmpl->set_var('cd_class', isset($_GET['cd']) && $_GET['cd'] != 1 ||
!empty($GLOBALS['egw_info']['server']['login_message']) ? 'error' : ''); !empty($GLOBALS['egw_info']['server']['login_message']) ? 'error_message' : '');
$last_loginid = $_COOKIE['last_loginid']; $last_loginid = $_COOKIE['last_loginid'];
$last_domain = $_COOKIE['last_domain']; $last_domain = $_COOKIE['last_domain'];
@ -128,7 +128,7 @@ class Login
$tmpl->set_var('lang_new_password',lang('New password')); $tmpl->set_var('lang_new_password',lang('New password'));
$tmpl->set_var('lang_repeat_password',lang('Repeat password')); $tmpl->set_var('lang_repeat_password',lang('Repeat password'));
$tmpl->set_var('cd', $change_passwd); $tmpl->set_var('cd', $change_passwd);
$tmpl->set_var('cd_class', 'error'); $tmpl->set_var('cd_class', 'error_message');
$last_loginid = $_POST['login']; $last_loginid = $_POST['login'];
$last_domain = $_POST['domain']; $last_domain = $_POST['domain'];
$tmpl->set_var('passwd', $_POST['passwd']); $tmpl->set_var('passwd', $_POST['passwd']);
@ -284,7 +284,7 @@ class Login
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()));
$tmpl->set_var('cd_class', 'error'); $tmpl->set_var('cd_class', 'warning_message');
} }
// load jquery for login screen too // load jquery for login screen too
Api\Framework::includeJS('jquery', 'jquery'); Api\Framework::includeJS('jquery', 'jquery');

29
pixelegg/css/mobile.css
View File

@ -1936,18 +1936,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#socialBox { #socialBox {
display: inline-block; display: inline-block;
width: 100%; width: calc(100% - 24px);
} }
#socialBox #socialMedia { #socialBox #socialMedia {
margin: 0 auto;
width: 200px; width: 200px;
} }
#socialBox #socialMedia a { #socialBox #socialMedia a {
margin-left: 10px; margin-right: 10px;
} }
#socialBox #socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
filter: contrast(0.6); filter: contrast(0.3);
} }
/* ################################################################################## /* ##################################################################################
* login page * login page
@ -1964,6 +1963,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
} }
#loginMainDiv .egw_message_wrapper {
box-shadow: 2px 1px 6px #bbbbbb;
-moz-box-shadow: 2px 1px 6px #bbbbbb;
-webkit-box-shadow: 2px 1px 6px #bbbbbb;
-khtml-box-shadow: 2px 1px 6px #bbbbbb;
}
#loginMainDiv .egw_message_wrapper #egw_message {
font-size: 9pt;
}
#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
display: none;
}
#loginMainDiv .loginMessageBox { #loginMainDiv .loginMessageBox {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -2006,7 +2017,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background: transparent; background: transparent;
width: 100%; width: 100%;
text-align: center; text-align: center;
height: 40%; height: 30%;
display: block; display: block;
max-height: 40%; max-height: 40%;
} }
@ -2150,9 +2161,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
width: 280px; width: 280px;
} }
#loginMainDiv div#centerBox .egw_logo { #loginMainDiv div#centerBox .egw_logo {
width: 100%; width: 24px;
height: 24px; height: 24px;
margin: 15px auto; float: right;
} }
#loginMainDiv div#centerBox .egw_logo a.logo_footer { #loginMainDiv div#centerBox .egw_logo a.logo_footer {
margin: auto; margin: auto;
@ -2287,12 +2298,12 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"], #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
background-color: #0a5ca5; background-color: #3b7aa4;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0; padding-left: 0;
width: 250px; width: 250px;
margin-top: 25px; margin-top: 15px;
} }
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
padding-left: 25px; padding-left: 25px;

29
pixelegg/css/monochrome.css
View File

@ -1916,18 +1916,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#socialBox { #socialBox {
display: inline-block; display: inline-block;
width: 100%; width: calc(100% - 24px);
} }
#socialBox #socialMedia { #socialBox #socialMedia {
margin: 0 auto;
width: 200px; width: 200px;
} }
#socialBox #socialMedia a { #socialBox #socialMedia a {
margin-left: 10px; margin-right: 10px;
} }
#socialBox #socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
filter: contrast(0.6); filter: contrast(0.3);
} }
/* ################################################################################## /* ##################################################################################
* login page * login page
@ -1944,6 +1943,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
} }
#loginMainDiv .egw_message_wrapper {
box-shadow: 2px 1px 6px #bbbbbb;
-moz-box-shadow: 2px 1px 6px #bbbbbb;
-webkit-box-shadow: 2px 1px 6px #bbbbbb;
-khtml-box-shadow: 2px 1px 6px #bbbbbb;
}
#loginMainDiv .egw_message_wrapper #egw_message {
font-size: 9pt;
}
#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
display: none;
}
#loginMainDiv .loginMessageBox { #loginMainDiv .loginMessageBox {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -1986,7 +1997,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background: transparent; background: transparent;
width: 100%; width: 100%;
text-align: center; text-align: center;
height: 40%; height: 30%;
display: block; display: block;
max-height: 40%; max-height: 40%;
} }
@ -2130,9 +2141,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
width: 280px; width: 280px;
} }
#loginMainDiv div#centerBox .egw_logo { #loginMainDiv div#centerBox .egw_logo {
width: 100%; width: 24px;
height: 24px; height: 24px;
margin: 15px auto; float: right;
} }
#loginMainDiv div#centerBox .egw_logo a.logo_footer { #loginMainDiv div#centerBox .egw_logo a.logo_footer {
margin: auto; margin: auto;
@ -2267,12 +2278,12 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"], #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
background-color: #0a5ca5; background-color: #3b7aa4;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0; padding-left: 0;
width: 250px; width: 250px;
margin-top: 25px; margin-top: 15px;
} }
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
padding-left: 25px; padding-left: 25px;

29
pixelegg/css/pixelegg.css
View File

@ -1926,18 +1926,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#socialBox { #socialBox {
display: inline-block; display: inline-block;
width: 100%; width: calc(100% - 24px);
} }
#socialBox #socialMedia { #socialBox #socialMedia {
margin: 0 auto;
width: 200px; width: 200px;
} }
#socialBox #socialMedia a { #socialBox #socialMedia a {
margin-left: 10px; margin-right: 10px;
} }
#socialBox #socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
filter: contrast(0.6); filter: contrast(0.3);
} }
/* ################################################################################## /* ##################################################################################
* login page * login page
@ -1954,6 +1953,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
} }
#loginMainDiv .egw_message_wrapper {
box-shadow: 2px 1px 6px #bbbbbb;
-moz-box-shadow: 2px 1px 6px #bbbbbb;
-webkit-box-shadow: 2px 1px 6px #bbbbbb;
-khtml-box-shadow: 2px 1px 6px #bbbbbb;
}
#loginMainDiv .egw_message_wrapper #egw_message {
font-size: 9pt;
}
#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
display: none;
}
#loginMainDiv .loginMessageBox { #loginMainDiv .loginMessageBox {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -1996,7 +2007,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background: transparent; background: transparent;
width: 100%; width: 100%;
text-align: center; text-align: center;
height: 40%; height: 30%;
display: block; display: block;
max-height: 40%; max-height: 40%;
} }
@ -2140,9 +2151,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
width: 280px; width: 280px;
} }
#loginMainDiv div#centerBox .egw_logo { #loginMainDiv div#centerBox .egw_logo {
width: 100%; width: 24px;
height: 24px; height: 24px;
margin: 15px auto; float: right;
} }
#loginMainDiv div#centerBox .egw_logo a.logo_footer { #loginMainDiv div#centerBox .egw_logo a.logo_footer {
margin: auto; margin: auto;
@ -2277,12 +2288,12 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"], #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
background-color: #0a5ca5; background-color: #3b7aa4;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0; padding-left: 0;
width: 250px; width: 250px;
margin-top: 25px; margin-top: 15px;
} }
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
padding-left: 25px; padding-left: 25px;

30
pixelegg/less/layout_loginPage.less
View File

@ -58,15 +58,14 @@ div#loginMainDiv.stockLoginBackground {
#socialBox { #socialBox {
display: inline-block; display: inline-block;
width: 100%; width: ~"calc(100% - 24px)";
#socialMedia { #socialMedia {
margin: 0 auto;
width: 200px; width: 200px;
a { a {
margin-left: 10px; margin-right: 10px;
img { img {
width: 24px; width: 24px;
filter:contrast(0.6); filter:contrast(0.3);
} }
} }
} }
@ -88,7 +87,18 @@ div#loginMainDiv.stockLoginBackground {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
.egw_message_wrapper {
box-shadow: 2px 1px 6px #bbbbbb;
-moz-box-shadow: 2px 1px 6px #bbbbbb;
-webkit-box-shadow: 2px 1px 6px #bbbbbb;
-khtml-box-shadow: 2px 1px 6px #bbbbbb;
#egw_message{
&:not(.error_message):not(.warning_message) {
display: none;
}
font-size: 9pt;
}
}
.loginMessageBox { .loginMessageBox {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -134,7 +144,7 @@ div#loginMainDiv.stockLoginBackground {
background: transparent; background: transparent;
width: 100%; width: 100%;
text-align: center; text-align: center;
height: 40%; height: 30%;
display: block; display: block;
max-height: 40%; max-height: 40%;
#divLogo { #divLogo {
@ -276,9 +286,9 @@ div#loginMainDiv.stockLoginBackground {
width: 280px; width: 280px;
.egw_logo { .egw_logo {
width: 100%; width: 24px;
height: 24px; height: 24px;
margin: 15px auto; float: right;
a.logo_footer { a.logo_footer {
margin: auto; margin: auto;
width: 24px; width: 24px;
@ -377,14 +387,14 @@ div#loginMainDiv.stockLoginBackground {
width: auto; width: auto;
} }
input[type="submit"], select.onChangeSubmit { input[type="submit"], select.onChangeSubmit {
background-color: #0a5ca5; background-color: #3b7aa4;
.color_0_gray; .color_0_gray;
.fontsize_xxl; .fontsize_xxl;
padding-left:0; padding-left:0;
width: 250px; width: 250px;
&:hover{} &:hover{}
&:focus {} &:focus {}
margin-top: 25px; margin-top: 15px;
} }
select.onChangeSubmit { select.onChangeSubmit {
padding-left: 25px; padding-left: 25px;

14
pixelegg/login.tpl
View File

@ -2,9 +2,9 @@
<div id="loginMainDiv" style="background-image:url({background_file})" class="{stock_background_class}"> <div id="loginMainDiv" style="background-image:url({background_file})" class="{stock_background_class}">
<div class="loginMessageBox"> <div class="egw_message_wrapper">
<div id="loginCdMessage" class="{cd_class}">{cd} <div id="egw_message" class="{cd_class}">{cd}
<span class="closeBtn">X</span></div> <span class="close"></span></div>
</div> </div>
<div id="divAppIconBar" style="position:relative;"> <div id="divAppIconBar" style="position:relative;">
<div id="divLogo"> <div id="divLogo">
@ -109,15 +109,15 @@
<tr> <tr>
<td> <td>
<div id="socialBox"></div> <div id="socialBox"></div>
</td>
</tr>
</table>
</form>
<div class="egw_logo"> <div class="egw_logo">
<a href="https://www.egroupware.org" class="logo_footer" target="_blank"> <a href="https://www.egroupware.org" class="logo_footer" target="_blank">
<img src="api/templates/default/images/login_logo.png"> <img src="api/templates/default/images/login_logo.png">
</a> </a>
</div> </div>
</td>
</tr>
</table>
</form>
</div> </div>
<div id="login_footer"> <div id="login_footer">

29
pixelegg/mobile/fw_mobile.css
View File

@ -1947,18 +1947,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#socialBox { #socialBox {
display: inline-block; display: inline-block;
width: 100%; width: calc(100% - 24px);
} }
#socialBox #socialMedia { #socialBox #socialMedia {
margin: 0 auto;
width: 200px; width: 200px;
} }
#socialBox #socialMedia a { #socialBox #socialMedia a {
margin-left: 10px; margin-right: 10px;
} }
#socialBox #socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
filter: contrast(0.6); filter: contrast(0.3);
} }
/* ################################################################################## /* ##################################################################################
* login page * login page
@ -1975,6 +1974,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
} }
#loginMainDiv .egw_message_wrapper {
box-shadow: 2px 1px 6px #bbbbbb;
-moz-box-shadow: 2px 1px 6px #bbbbbb;
-webkit-box-shadow: 2px 1px 6px #bbbbbb;
-khtml-box-shadow: 2px 1px 6px #bbbbbb;
}
#loginMainDiv .egw_message_wrapper #egw_message {
font-size: 9pt;
}
#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
display: none;
}
#loginMainDiv .loginMessageBox { #loginMainDiv .loginMessageBox {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -2017,7 +2028,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background: transparent; background: transparent;
width: 100%; width: 100%;
text-align: center; text-align: center;
height: 40%; height: 30%;
display: block; display: block;
max-height: 40%; max-height: 40%;
} }
@ -2161,9 +2172,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
width: 280px; width: 280px;
} }
#loginMainDiv div#centerBox .egw_logo { #loginMainDiv div#centerBox .egw_logo {
width: 100%; width: 24px;
height: 24px; height: 24px;
margin: 15px auto; float: right;
} }
#loginMainDiv div#centerBox .egw_logo a.logo_footer { #loginMainDiv div#centerBox .egw_logo a.logo_footer {
margin: auto; margin: auto;
@ -2298,12 +2309,12 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"], #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
background-color: #0a5ca5; background-color: #3b7aa4;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0; padding-left: 0;
width: 250px; width: 250px;
margin-top: 25px; margin-top: 15px;
} }
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
padding-left: 25px; padding-left: 25px;