extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-25 16:19:00 +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 1f010a4391
commit 20c464a161
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
if (screen.orientation && typeof screen.orientation.lock == 'function') screen.orientation.lock('portrait');
jQuery('.closeBtn').click(function (){
setTimeout(function(){jQuery('.loginMessageBox').slideUp("slow");},100);
jQuery('.close').click(function (){
setTimeout(function(){jQuery('.egw_message_wrapper').slideUp("slow");},100);
});
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_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_domain = $_COOKIE['last_domain'];
@ -128,7 +128,7 @@ class Login
$tmpl->set_var('lang_new_password',lang('New password'));
$tmpl->set_var('lang_repeat_password',lang('Repeat password'));
$tmpl->set_var('cd', $change_passwd);
$tmpl->set_var('cd_class', 'error');
$tmpl->set_var('cd_class', 'error_message');
$last_loginid = $_POST['login'];
$last_domain = $_POST['domain'];
$tmpl->set_var('passwd', $_POST['passwd']);
@ -284,7 +284,7 @@ class Login
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_class', 'error');
$tmpl->set_var('cd_class', 'warning_message');
}
// load jquery for login screen too
Api\Framework::includeJS('jquery', 'jquery');

29
pixelegg/css/mobile.css
View File

@ -1936,18 +1936,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
}
#socialBox {
display: inline-block;
width: 100%;
width: calc(100% - 24px);
}
#socialBox #socialMedia {
margin: 0 auto;
width: 200px;
}
#socialBox #socialMedia a {
margin-left: 10px;
margin-right: 10px;
}
#socialBox #socialMedia a img {
width: 24px;
filter: contrast(0.6);
filter: contrast(0.3);
}
/* ##################################################################################
* login page
@ -1964,6 +1963,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background-position: 50% 50%;
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 {
width: 100%;
position: absolute;
@ -2006,7 +2017,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background: transparent;
width: 100%;
text-align: center;
height: 40%;
height: 30%;
display: block;
max-height: 40%;
}
@ -2150,9 +2161,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
width: 280px;
}
#loginMainDiv div#centerBox .egw_logo {
width: 100%;
width: 24px;
height: 24px;
margin: 15px auto;
float: right;
}
#loginMainDiv div#centerBox .egw_logo a.logo_footer {
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 select.onChangeSubmit {
background-color: #0a5ca5;
background-color: #3b7aa4;
color: #ffffff;
font-size: 20px;
padding-left: 0;
width: 250px;
margin-top: 25px;
margin-top: 15px;
}
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
padding-left: 25px;

29
pixelegg/css/monochrome.css
View File

@ -1916,18 +1916,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
}
#socialBox {
display: inline-block;
width: 100%;
width: calc(100% - 24px);
}
#socialBox #socialMedia {
margin: 0 auto;
width: 200px;
}
#socialBox #socialMedia a {
margin-left: 10px;
margin-right: 10px;
}
#socialBox #socialMedia a img {
width: 24px;
filter: contrast(0.6);
filter: contrast(0.3);
}
/* ##################################################################################
* login page
@ -1944,6 +1943,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background-position: 50% 50%;
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 {
width: 100%;
position: absolute;
@ -1986,7 +1997,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background: transparent;
width: 100%;
text-align: center;
height: 40%;
height: 30%;
display: block;
max-height: 40%;
}
@ -2130,9 +2141,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
width: 280px;
}
#loginMainDiv div#centerBox .egw_logo {
width: 100%;
width: 24px;
height: 24px;
margin: 15px auto;
float: right;
}
#loginMainDiv div#centerBox .egw_logo a.logo_footer {
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 select.onChangeSubmit {
background-color: #0a5ca5;
background-color: #3b7aa4;
color: #ffffff;
font-size: 20px;
padding-left: 0;
width: 250px;
margin-top: 25px;
margin-top: 15px;
}
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
padding-left: 25px;

29
pixelegg/css/pixelegg.css
View File

@ -1926,18 +1926,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
}
#socialBox {
display: inline-block;
width: 100%;
width: calc(100% - 24px);
}
#socialBox #socialMedia {
margin: 0 auto;
width: 200px;
}
#socialBox #socialMedia a {
margin-left: 10px;
margin-right: 10px;
}
#socialBox #socialMedia a img {
width: 24px;
filter: contrast(0.6);
filter: contrast(0.3);
}
/* ##################################################################################
* login page
@ -1954,6 +1953,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background-position: 50% 50%;
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 {
width: 100%;
position: absolute;
@ -1996,7 +2007,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background: transparent;
width: 100%;
text-align: center;
height: 40%;
height: 30%;
display: block;
max-height: 40%;
}
@ -2140,9 +2151,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
width: 280px;
}
#loginMainDiv div#centerBox .egw_logo {
width: 100%;
width: 24px;
height: 24px;
margin: 15px auto;
float: right;
}
#loginMainDiv div#centerBox .egw_logo a.logo_footer {
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 select.onChangeSubmit {
background-color: #0a5ca5;
background-color: #3b7aa4;
color: #ffffff;
font-size: 20px;
padding-left: 0;
width: 250px;
margin-top: 25px;
margin-top: 15px;
}
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
padding-left: 25px;

30
pixelegg/less/layout_loginPage.less
View File

@ -58,15 +58,14 @@ div#loginMainDiv.stockLoginBackground {
#socialBox {
display: inline-block;
width: 100%;
width: ~"calc(100% - 24px)";
#socialMedia {
margin: 0 auto;
width: 200px;
a {
margin-left: 10px;
margin-right: 10px;
img {
width: 24px;
filter:contrast(0.6);
filter:contrast(0.3);
}
}
}
@ -88,7 +87,18 @@ div#loginMainDiv.stockLoginBackground {
background-repeat: no-repeat;
background-position: 50% 50%;
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 {
width: 100%;
position: absolute;
@ -134,7 +144,7 @@ div#loginMainDiv.stockLoginBackground {
background: transparent;
width: 100%;
text-align: center;
height: 40%;
height: 30%;
display: block;
max-height: 40%;
#divLogo {
@ -276,9 +286,9 @@ div#loginMainDiv.stockLoginBackground {
width: 280px;
.egw_logo {
width: 100%;
width: 24px;
height: 24px;
margin: 15px auto;
float: right;
a.logo_footer {
margin: auto;
width: 24px;
@ -377,14 +387,14 @@ div#loginMainDiv.stockLoginBackground {
width: auto;
}
input[type="submit"], select.onChangeSubmit {
background-color: #0a5ca5;
background-color: #3b7aa4;
.color_0_gray;
.fontsize_xxl;
padding-left:0;
width: 250px;
&:hover{}
&:focus {}
margin-top: 25px;
margin-top: 15px;
}
select.onChangeSubmit {
padding-left: 25px;

16
pixelegg/login.tpl
View File

@ -2,9 +2,9 @@
<div id="loginMainDiv" style="background-image:url({background_file})" class="{stock_background_class}">
<div class="loginMessageBox">
<div id="loginCdMessage" class="{cd_class}">{cd}
<span class="closeBtn">X</span></div>
<div class="egw_message_wrapper">
<div id="egw_message" class="{cd_class}">{cd}
<span class="close"></span></div>
</div>
<div id="divAppIconBar" style="position:relative;">
<div id="divLogo">
@ -109,15 +109,15 @@
<tr>
<td>
<div id="socialBox"></div>
<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>
</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="login_footer">

29
pixelegg/mobile/fw_mobile.css
View File

@ -1947,18 +1947,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
}
#socialBox {
display: inline-block;
width: 100%;
width: calc(100% - 24px);
}
#socialBox #socialMedia {
margin: 0 auto;
width: 200px;
}
#socialBox #socialMedia a {
margin-left: 10px;
margin-right: 10px;
}
#socialBox #socialMedia a img {
width: 24px;
filter: contrast(0.6);
filter: contrast(0.3);
}
/* ##################################################################################
* login page
@ -1975,6 +1974,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background-position: 50% 50%;
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 {
width: 100%;
position: absolute;
@ -2017,7 +2028,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
background: transparent;
width: 100%;
text-align: center;
height: 40%;
height: 30%;
display: block;
max-height: 40%;
}
@ -2161,9 +2172,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
width: 280px;
}
#loginMainDiv div#centerBox .egw_logo {
width: 100%;
width: 24px;
height: 24px;
margin: 15px auto;
float: right;
}
#loginMainDiv div#centerBox .egw_logo a.logo_footer {
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 select.onChangeSubmit {
background-color: #0a5ca5;
background-color: #3b7aa4;
color: #ffffff;
font-size: 20px;
padding-left: 0;
width: 250px;
margin-top: 25px;
margin-top: 15px;
}
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
padding-left: 25px;