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

WIP login Ui

Browse Source 
- Implements apps tooltip
This commit is contained in:
Hadi Nategh 2021-04-30 14:58:30 +02:00
parent 42aa383cd4
commit 41ab849ecc
6 changed files with 337 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -320,8 +320,16 @@ class Login
foreach ($data['apps'] as $app)
{
$icon = strpos($app['icon'], "/") === 0 ? $GLOBALS['egw_info']['server']['webserver_url'].$app['icon'] : $app['icon'];
$nodes .= '<a class="app" href="'.htmlspecialchars($app['url']).'" title="'.htmlspecialchars(lang($app['title'])).'">'
.'<img src="'.htmlspecialchars($icon).'"/><span>'.htmlspecialchars($app['desc']).'</span></a>';
$title = lang($app['title']);
$nodes .= '<div class="app">'
.'<img class="icon" src="'.htmlspecialchars($icon).'"/>'
.'<div class="tooltip">'
.'<div class="content">'
.'<h3><a href="'.htmlspecialchars($app['url']).'" title="'.htmlspecialchars($title).'">'
.htmlspecialchars($title).'</a></h3>'
.'<img class="icon-bg" src="'.htmlspecialchars($icon).'"/>'
.'<p>'.htmlspecialchars($app['desc']).'</p><div class="arrow"></div>'
.'</div></div></div>';
}
}
return $nodes;

66
pixelegg/css/mobile.css
View File

@ -2046,7 +2046,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
margin: 5px 20px auto 20px;
display: flex;
}
#loginMainDiv div#login_footer .apps .app img {
#loginMainDiv div#login_footer .apps .app img.icon {
width: 30px;
filter: brightness(0) invert(1);
height: 30px;
@ -2054,6 +2054,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
#loginMainDiv div#login_footer .apps .app span {
display: none;
}
#loginMainDiv div#login_footer .apps .tooltip {
display: inline-flex;
position: absolute;
text-align: left;
height: 34px;
width: 30px;
}
#loginMainDiv div#login_footer .apps .tooltip .content {
min-width: 300px;
top: -10px;
left: 50%;
height: 190px;
max-height: 190px;
transform: translate(-50%, -100%);
padding: 10px 20px;
color: #444444;
background-color: #fafafa;
font-weight: normal;
font-size: 13px;
border-radius: 3px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
visibility: hidden;
opacity: 0;
transition: opacity 0.8s;
border: 1px solid #1865aa;
border-bottom: 6px solid #1865aa;
}
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
width: 35px;
position: absolute;
margin: 0 auto;
right: 15px;
top: 15px;
}
#loginMainDiv div#login_footer .apps .tooltip .content h3 {
height: 30px;
border-bottom: 1px solid #d9e4ed;
}
#loginMainDiv div#login_footer .apps .tooltip:hover .content {
visibility: visible;
opacity: 1;
}
#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
visibility: visible;
opacity: 1;
}
#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
width: 100%;
position: absolute;
left: 0;
bottom: -21px;
height: 15px;
}
#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background-color: #1865aa;
}
#loginMainDiv div#centerBox {
margin: 0 auto -20px;
background: transparent;

66
pixelegg/css/monochrome.css
View File

@ -2026,7 +2026,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
margin: 5px 20px auto 20px;
display: flex;
}
#loginMainDiv div#login_footer .apps .app img {
#loginMainDiv div#login_footer .apps .app img.icon {
width: 30px;
filter: brightness(0) invert(1);
height: 30px;
@ -2034,6 +2034,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
#loginMainDiv div#login_footer .apps .app span {
display: none;
}
#loginMainDiv div#login_footer .apps .tooltip {
display: inline-flex;
position: absolute;
text-align: left;
height: 34px;
width: 30px;
}
#loginMainDiv div#login_footer .apps .tooltip .content {
min-width: 300px;
top: -10px;
left: 50%;
height: 190px;
max-height: 190px;
transform: translate(-50%, -100%);
padding: 10px 20px;
color: #444444;
background-color: #fafafa;
font-weight: normal;
font-size: 13px;
border-radius: 3px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
visibility: hidden;
opacity: 0;
transition: opacity 0.8s;
border: 1px solid #1865aa;
border-bottom: 6px solid #1865aa;
}
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
width: 35px;
position: absolute;
margin: 0 auto;
right: 15px;
top: 15px;
}
#loginMainDiv div#login_footer .apps .tooltip .content h3 {
height: 30px;
border-bottom: 1px solid #d9e4ed;
}
#loginMainDiv div#login_footer .apps .tooltip:hover .content {
visibility: visible;
opacity: 1;
}
#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
visibility: visible;
opacity: 1;
}
#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
width: 100%;
position: absolute;
left: 0;
bottom: -21px;
height: 15px;
}
#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background-color: #1865aa;
}
#loginMainDiv div#centerBox {
margin: 0 auto -20px;
background: transparent;

66
pixelegg/css/pixelegg.css
View File

@ -2036,7 +2036,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
margin: 5px 20px auto 20px;
display: flex;
}
#loginMainDiv div#login_footer .apps .app img {
#loginMainDiv div#login_footer .apps .app img.icon {
width: 30px;
filter: brightness(0) invert(1);
height: 30px;
@ -2044,6 +2044,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
#loginMainDiv div#login_footer .apps .app span {
display: none;
}
#loginMainDiv div#login_footer .apps .tooltip {
display: inline-flex;
position: absolute;
text-align: left;
height: 34px;
width: 30px;
}
#loginMainDiv div#login_footer .apps .tooltip .content {
min-width: 300px;
top: -10px;
left: 50%;
height: 190px;
max-height: 190px;
transform: translate(-50%, -100%);
padding: 10px 20px;
color: #444444;
background-color: #fafafa;
font-weight: normal;
font-size: 13px;
border-radius: 3px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
visibility: hidden;
opacity: 0;
transition: opacity 0.8s;
border: 1px solid #1865aa;
border-bottom: 6px solid #1865aa;
}
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
width: 35px;
position: absolute;
margin: 0 auto;
right: 15px;
top: 15px;
}
#loginMainDiv div#login_footer .apps .tooltip .content h3 {
height: 30px;
border-bottom: 1px solid #d9e4ed;
}
#loginMainDiv div#login_footer .apps .tooltip:hover .content {
visibility: visible;
opacity: 1;
}
#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
visibility: visible;
opacity: 1;
}
#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
width: 100%;
position: absolute;
left: 0;
bottom: -21px;
height: 15px;
}
#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background-color: #1865aa;
}
#loginMainDiv div#centerBox {
margin: 0 auto -20px;
background: transparent;

68
pixelegg/less/layout_loginPage.less
View File

@ -179,13 +179,79 @@ div#loginMainDiv.stockLoginBackground {
height: 30px;
margin: 5px 20px auto 20px;
display: flex;
img {
img.icon {
width: 30px;
filter: brightness(0) invert(1);
height: 30px;
}
span {display:none;}
}
.tooltip {
display: inline-flex;
position: absolute;
text-align: left;
height: 34px;
width: 30px;
}
.tooltip .content {
min-width: 300px;
top: -10px;
left: 50%;
height: 190px;
max-height: 190px;
transform: translate(-50%, -100%);
padding: 10px 20px;
color: #444444;
background-color: #fafafa;
font-weight: normal;
font-size: 13px;
border-radius: 3px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
visibility: hidden;
opacity: 0;
transition: opacity 0.8s;
border: 1px solid #1865aa;
border-bottom: 6px solid #1865aa;
img.icon-bg {
width: 35px;
position: absolute;
margin: 0 auto;
right: 15px;
top: 15px;
}
h3 {
height: 30px;
border-bottom: 1px solid #d9e4ed;
}
}
.tooltip:hover .content {
visibility:visible;
opacity:1;
&:hover {
visibility:visible;
opacity:1;
}
}
.tooltip .content .arrow{
width: 100%;
position: absolute;
left: 0;
bottom: -21px;
height: 15px;
&::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background-color: #1865aa;
}
}
}
}

66
pixelegg/mobile/fw_mobile.css
View File

@ -2057,7 +2057,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
margin: 5px 20px auto 20px;
display: flex;
}
#loginMainDiv div#login_footer .apps .app img {
#loginMainDiv div#login_footer .apps .app img.icon {
width: 30px;
filter: brightness(0) invert(1);
height: 30px;
@ -2065,6 +2065,70 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
#loginMainDiv div#login_footer .apps .app span {
display: none;
}
#loginMainDiv div#login_footer .apps .tooltip {
display: inline-flex;
position: absolute;
text-align: left;
height: 34px;
width: 30px;
}
#loginMainDiv div#login_footer .apps .tooltip .content {
min-width: 300px;
top: -10px;
left: 50%;
height: 190px;
max-height: 190px;
transform: translate(-50%, -100%);
padding: 10px 20px;
color: #444444;
background-color: #fafafa;
font-weight: normal;
font-size: 13px;
border-radius: 3px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
visibility: hidden;
opacity: 0;
transition: opacity 0.8s;
border: 1px solid #1865aa;
border-bottom: 6px solid #1865aa;
}
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
width: 35px;
position: absolute;
margin: 0 auto;
right: 15px;
top: 15px;
}
#loginMainDiv div#login_footer .apps .tooltip .content h3 {
height: 30px;
border-bottom: 1px solid #d9e4ed;
}
#loginMainDiv div#login_footer .apps .tooltip:hover .content {
visibility: visible;
opacity: 1;
}
#loginMainDiv div#login_footer .apps .tooltip:hover .content:hover {
visibility: visible;
opacity: 1;
}
#loginMainDiv div#login_footer .apps .tooltip .content .arrow {
width: 100%;
position: absolute;
left: 0;
bottom: -21px;
height: 15px;
}
#loginMainDiv div#login_footer .apps .tooltip .content .arrow::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background-color: #1865aa;
}
#loginMainDiv div#centerBox {
margin: 0 auto -20px;
background: transparent;