Skip to content

Commit

Permalink
[WIP] Users table
Browse files Browse the repository at this point in the history 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
  • Loading branch information
@Pytal
Pytal committed Jul 5, 2023
1 parent f78e415 commit 52e7aca
Show file tree
Hide file tree
Showing 14 changed files with 1,100 additions and 1,031 deletions.
2 changes: 1 addition & 1 deletion apps/settings/css/settings.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

278 changes: 0 additions & 278 deletions apps/settings/css/settings.scss
View file
Expand Up @@ -1317,284 +1317,6 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
opacity: .7;
}


/* USERS LIST -------------------------------------------------------------- */
#body-settings {
$grid-row-height: 60px;
$grid-col-min-width: 160px;

#app-content.user-list-grid {
display: grid;
grid-column-gap: 20px;
grid-auto-rows: minmax(60px, max-content);

.row {
// TODO replace with css4 subgrid when available
// fallback for ie11 no grid
display: flex;
display: grid;
min-height: $grid-row-height;
grid-row-start: span 1;
grid-gap: 3px;
align-items: center;
/* let's define the column until storage path,
what follows will be manually defined */
grid-template-columns:
44px
minmax($grid-col-min-width + 30px, 1fr) // username, displayname
minmax($grid-col-min-width, 1fr) // password
minmax($grid-col-min-width, 1fr) // email
minmax(1.5*$grid-col-min-width, 1fr) // groups
minmax(1.5*$grid-col-min-width, 1fr) // group admins
minmax($grid-col-min-width, 1fr) // quota
minmax(1.5*$grid-col-min-width, 1fr) // manager
repeat(auto-fit, minmax($grid-col-min-width, 1fr));
border-bottom: var(--color-border) 1px solid;

&.disabled {
opacity: .5;
}

/* grid col width */
.name,
.password,
.mailAddress,
.languages,
.storageLocation,
.userBackend,
.lastLogin {
min-width: $grid-col-min-width;

doesnotexist:-o-prefocus, .strengthify-wrapper {
color: var(--color-text-dark);
vertical-align: baseline;
text-overflow: ellipsis;
}
}

&:not(.row--editable) {
&.name,
&.password,
&.displayName,
&.mailAddress,
&.userBackend,
&.languages {
overflow: hidden;
}
}

// Scroll if too much groups
&:not(.row--editable) {
.groups,
.subadmins,
.subAdminsGroups {
overflow: auto;
max-height: 100%;
}
}

.managers,
.groups,
.subadmins,
.subAdminsGroups,
.quota {
min-width: $grid-col-min-width;

.select {
width: 100%;
color: var(--color-text-dark);
vertical-align: baseline;
}

progress {
max-width: 95%;
}
}

.obfuscated {
width: 400px;
opacity: .7;
}

.userActions {
display: flex;
justify-content: flex-end;
position: sticky;
right: 0px;
min-width: 88px;
background-color: var(--color-main-background);
}

&.row--editable .userActions {
z-index: 10;
}

.subtitle {
color: var(--color-text-maxcontrast);
vertical-align: baseline;
}

/* various */
&#grid-header {
position: sticky;
align-self: normal;
background-color: var(--color-main-background);
z-index: 100; /* above multiselect */
top: 0;

&.sticky {
box-shadow: 0 -2px 10px 1px var(--color-box-shadow);
}
}

&#grid-header {
color: var(--color-text-maxcontrast);
border-bottom-width: thin;

#headerDisplayName,
#headerPassword,
#headerAddress,
#headerGroups,
#headerSubAdmins,
#theHeaderUserBackend,
#theHeaderLastLogin,
#headerQuota,
#theHeaderStorageLocation,
#headerLanguages {
/* Line up header text with column content for when there’s inputs */
padding-left: 7px;
text-transform: none;
color: var(--color-text-maxcontrast);
vertical-align: baseline;
}
}

&:hover {
&:not(#grid-header) {
box-shadow: 5px 0 0 var(--color-primary-element) inset;
}
}

> form {
width: 100%;
}

> div,
> .displayName > form,
> form {
grid-row: 1;
display: inline-flex;
color: var(--color-text-lighter);
flex-grow: 1;

> input:not(:focus):not(:active) {
border-color: transparent;
cursor: pointer;
}

> input:focus, > input:active {
+ .icon-confirm {
display: block !important;
}
}

/* inputs like mail, username, password */
&:not(.userActions) > input:not([type='submit']) {
width: 100%;
min-width: 0;
}

&.name {
word-break: break-all;
}

&.displayName,
&.mailAddress {
> input {
text-overflow: ellipsis;
flex-grow: 1;
}
}

&.name,
&.userBackend {
/* better multi-line visual */
line-height: 1.3em;
max-height: 100%;
overflow: hidden;
/* not supported by all browsers
so we keep the overflow hidden
as a fallback */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

&.name .subtitle {
color: var(--color-main-text);
}

&.quota {
display: flex;;
justify-content: left;
white-space: nowrap;
position: relative;

progress {
width: 150px;
margin-top: 35px;
height: 3px;
}
}

.icon-confirm {
flex: 0 0 auto;
cursor: pointer;

&:not(:active) {
display: none;
}
}

&.avatar {
height: 32px;
width: 32px;
margin: 6px;

img {
display: block;
}
}

&.userActions {
display: flex;
align-items: center;
justify-content: flex-end;

// Make sure to cover whole row
height: 100%;
width: fit-content;
padding-inline: 12px;
background-color: var(--color-main-background);
}
}
}

.infinite-loading-container {
display: flex;
align-items: center;
justify-content: center;
grid-row-start: span 4;
}

.users-list-end {
opacity: .5;
user-select: none;
}
}
}

.animated {
animation: blink-animation 1s steps(5, start) 4;
}
Expand Down

0 comments on commit 52e7aca

Please sign in to comment.