Skip to content

Commit

Permalink
Prepared timeout indicator for user #128
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheMaaarc
TheMaaarc committed May 23, 2018
1 parent d0271d4 commit 068520d
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 47 deletions.
6 changes: 5 additions & 1 deletion src/messages/de/admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,4 +350,8 @@
'mode_user_personal_info' => 'Personalien',
'settings_general' => 'Allgemein',
'settings_developer_mode' => 'Entwickler Modus',
];

'layout_btn_user_logout_in' => 'Automatisches Logout in:',
'layout_btn_user_minutes' => 'Minuten',

];
2 changes: 1 addition & 1 deletion src/resources/dist/css/admin.css
View file

Large diffs are not rendered by default.

Binary file added src/resources/images/timer.sketch
View file
Binary file not shown.
12 changes: 12 additions & 0 deletions src/resources/images/timer.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/resources/scss/admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@
@import "components/timeline";
@import "components/toasts";
@import "components/tooltip";
@import "components/user-timeout";
@import "components/zaa-checkbox-array";
@import "components/zaa-date";
@import "components/zaa-datetime";
Expand Down
99 changes: 57 additions & 42 deletions src/resources/scss/components/_mainnav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@
}

.mainnav-toggler-mobile {
position: relative;
cursor: pointer;
font-size: 30px;
position: relative;
text-align: right;

@media (min-width: $mobile-nav-breakpoint) {
Expand Down Expand Up @@ -117,7 +117,7 @@
}

.mainnav-small &:after {
@include label-background;
@include label-background;
border-radius: $border-radius;
content: "";
height: 0;
Expand Down Expand Up @@ -175,9 +175,9 @@

.mainnav-icon,
.mainnav-label {
color: map-get($grays, 400);
display: inline-block;
line-height: 22px;
color: map-get($grays, 400);
z-index: zindex(popover);
}

Expand All @@ -204,19 +204,18 @@

+ span {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
vertical-align: middle;
}
}


.mainnav-image-icon {
color: map-get($grays, 400);
height: auto;
margin-top: -2px;
max-width: 25px;
min-width: 24px;
width: 100%;
max-width: 25px;
color: map-get($grays, 400);

&-small {
margin-top: 0;
Expand Down Expand Up @@ -291,27 +290,28 @@
}

.mainnav-tooltip-big-wrapper {
padding-left: 30px;
bottom: 0;
display: none;
opacity: 0;
padding-left: 30px;
position: absolute;
bottom: 0;

@media (min-width: $mobile-nav-breakpoint) {
padding-left: 22px;
}
}

.mainnav-tooltip-big {
max-width: 100%;
min-height: 42px;
display: inline-block;
//background: $tooltip-bg;
background-color: $tooltip-bg-alt;
border-radius: $border-radius;
padding: 0 10px;
box-shadow: $tooltip-box-shadow;
//background: $tooltip-bg;
cursor: default;
display: inline-block;
font-size: 14px;
max-width: 100%;
min-height: 42px;
padding: 0 10px;

&:after {
border-color: transparent $tooltip-bg-alt transparent transparent;
Expand All @@ -337,78 +337,93 @@
}

th, td {
white-space: nowrap;
cursor: default;
padding: 10px 10px 10px 0;
text-align: left;
cursor: default;
white-space: nowrap;

&:last-of-type {
padding-right: 0;
max-width: 37px;
padding-right: 0;
}
}

}

ul, &-menu {
padding-left: 0;
margin-left: -5px;
margin-right: -5px;
padding-bottom: 0;
padding-left: 0;
padding-top: 5px;
margin-right: -5px;
margin-left: -5px;

li, &-item {
list-style: none;
position: relative;
display: block;
text-align: left;
border-radius: $border-radius;
padding: 5px 10px 5px 30px;
margin-bottom: 5px;
line-height: 23px;
transition: background-color .25s ease-in-out;
li, &-item {
border-radius: $border-radius;
display: block;
line-height: 23px;
list-style: none;
margin-bottom: 5px;
padding: 5px 10px 5px 30px;
position: relative;
text-align: left;
transition: background-color .25s ease-in-out;

&.mainnav-tooltip-big-menu-item-status {
padding-left: 10px;
}

i {
position: absolute;
font-size: 18px;
left: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
}
a, &-link {
cursor: pointer;
color: map-get($grays, 400);
line-height: 23px;
transition: color .15s ease-in-out;

&:hover, &-active {
text-decoration: none;

}
}
}

&:hover {
&:not(.mainnav-tooltip-big-menu-item-status):hover {
@include label-background;

span {
color: $white;
}
}

&-active

i {
color: map-get($theme-colors, primary);
}
&-active i {
color: map-get($theme-colors, primary);
}
}
}

.mainnav-tooltip-big-menu-item-info {
white-space: nowrap;
}
}

.mainnav-mobile-title {
position: absolute;
color: map-get($grays, 300);
font-size: 14px;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: map-get($grays, 300);
}

.mainnav-timeout {
display: block;
height: 30px;
left: 5px;
position: absolute;
top: 5px;
width: 30px;
}
10 changes: 10 additions & 0 deletions src/resources/scss/components/_user-timeout.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.user-timeout {
display: block;
overflow: visible;
}

.user-timeout-timer {
stroke-dasharray: 32 * 2.75px; // witdth or height times 2.75 = maximum stroke-dasharray
stroke-dashoffset: 32 * 2.75px; // witdth or height times 2.75 = maximum stroke-dashoffste
transition: .25s ease-in-out stroke-dashoffset, .25s ease-in-out stroke;
}
17 changes: 14 additions & 3 deletions src/views/layouts/main.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,16 +105,27 @@
</span>
</li>
<li class="mainnav-entry">
<!-- needs to be fixed -->
<span class="mainnav-parent" active-class="mainnav-parent-active">
<!-- needs to be fixed end -->
<!-- needs to be fixed -->
<span class="mainnav-parent" active-class="mainnav-parent-active">
<!-- needs to be fixed end -->
<div class="mainnav-timeout">
<svg class="user-timeout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<circle class="user-timeout-timer" cx="15" cy="15" r="13" fill="none" stroke="#FFF" stroke-width="4" transform="translate(15, 15) rotate(-90) translate(-15, -15)" stroke-dashoffset="83px"></circle>
</svg>
</div>

<i class="mainnav-icon material-icons">account_circle</i>
<span class="mainnav-label">
<?= Admin::t('layout_btn_profile'); ?>
</span>
<span class="mainnav-tooltip-big-wrapper">
<span class="mainnav-tooltip-big">
<ul class="mainnav-tooltip-big-menu">
<li class="mainnav-tooltip-big-menu-item-status">
<span class="mainnav-tooltip-big-menu-item-info">
<?= Admin::t('layout_btn_user_logout_in'); ?><br />12 <?= Admin::t('layout_btn_user_minutes'); ?>
</span>
</li>
<li class="mainnav-tooltip-big-menu-item" ui-sref-active="mainnav-tooltip-big-menu-item-active" ui-sref="custom({templateId:'admin/account/dashboard'})" ng-click="isOpen=0">
<span class="mainnav-tooltip-big-menu-item-link">
<i class="material-icons">face</i>
Expand Down

0 comments on commit 068520d

Please sign in to comment.