TeaSpeak/TeaWeb
TeaSpeak/TeaWeb
1
0
Fork 0
Code Issues 1 Pull requests Activity

Improved permission editor style

Browse source
This commit is contained in:
WolverinDEV 2019-11-24 14:40:55 +01:00
parent c7fc058135
commit dcfd33fb4c
3 changed files with 47 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
shared/css/static/modal-permissions.scss
View file

@ -475,14 +475,13 @@
flex-direction: row; flex-direction: row;
} }
//TODO: Remove the 1em margin everywhere here
.container-filter { .container-filter {
justify-content: stretch; justify-content: stretch;
height: 4em; height: 3em;
.form-group { > * {
height: 3.5em; align-self: center;
padding-top: 1.25em;
margin-bottom: 0!important;
} }
.button-toggle-clients { .button-toggle-clients {
@ -493,31 +492,46 @@
height: 2.5em; height: 2.5em;
margin-right: 1em; margin-right: 1em;
align-self: flex-end;
margin-bottom: 1rem;
} }
.container-input { .container-input {
flex-grow: 5; flex-grow: 5;
flex-shrink: 1; flex-shrink: 1;
padding-top: 0!important;
margin-bottom: 0!important;
height: 2.5em;
.bmd-label-floating {
top: .5em;
}
&.is-filled, &:focus-within {
.bmd-label-floating {
top: -.4em;
}
}
} }
.container-granted-switch { .container-switchs {
height: 2.5em;
margin-left: 1em; margin-left: 1em;
margin-bottom: 1em;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: flex-start; justify-content: center;
flex-shrink: 1;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1;
max-width: 10em;
min-width: 5em;
color: #999999; color: #999999;
min-width: 8em;
> label { > label {
font-size: .75em; font-size: .75em;
@ -526,20 +540,20 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
position: absolute;
bottom: 0;
left: 0;
pointer-events: all; pointer-events: all;
cursor: pointer; cursor: pointer;
> * { .switch {
align-self: flex-end; align-self: center;
} }
a { a {
padding-left: .25em; padding-left: .25em;
font-size: 1.1em; font-size: 1.1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }
@ -551,12 +565,10 @@
border-radius: .2em; border-radius: .2em;
margin-left: 1em; margin-left: 1em;
margin-bottom: 1em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
align-self: flex-end;
cursor: pointer; cursor: pointer;
background-color: #121213; background-color: #121213;

2
shared/css/static/modal.scss
View file

@ -409,6 +409,8 @@
background-image: linear-gradient(0deg, #008aff 2px, rgba(0, 150, 136, 0) 0), linear-gradient(0deg, #393939 1px, transparent 0); background-image: linear-gradient(0deg, #008aff 2px, rgba(0, 150, 136, 0) 0), linear-gradient(0deg, #393939 1px, transparent 0);
&:focus { &:focus {
height: calc(2.25em - 1px); /* Center the blue line */
background-size: 100% 100%, 100% 100%; background-size: 100% 100%, 100% 100%;
transition-duration: .3s; transition-duration: .3s;

14
shared/html/templates.html
View file

@ -2899,17 +2899,25 @@
<input type="text" class="form-control filter-input"/> <input type="text" class="form-control filter-input"/>
<!-- <small class="form-text text-muted">{{tr "Filter permissions by permission name" /}}</small> --> <!-- <small class="form-text text-muted">{{tr "Filter permissions by permission name" /}}</small> -->
</div> </div>
<div class="container-granted-switch"> <div class="container-switchs">
<label> <label class="container-granted-switch" title="{{tr 'Show only permission which are assigned' /}}">
<div class="switch"> <div class="switch">
<input type="checkbox" class="filter-granted"> <input type="checkbox" class="filter-granted">
<span class="slider"> <span class="slider">
<span class="dot"></span> <span class="dot"></span>
</span> </span>
</div> </div>
<!-- <a>{{tr "Show granted permissions only" /}}</a> -->
<a>{{tr "Assigned only" /}}</a> <a>{{tr "Assigned only" /}}</a>
</label> </label>
<label class="container-editable-switch" title="{{tr 'Show only permissions which are editable by yourself' /}}">
<div class="switch">
<input type="checkbox" class="filter-granted">
<span class="slider">
<span class="dot"></span>
</span>
</div>
<a>{{tr "Editable only" /}}</a>
</label>
</div> </div>
<div class="container-icon-select"> <div class="container-icon-select">
<div class="button-select-icon icon-preview"> <div class="button-select-icon icon-preview">