diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index 47a035016add020b42941f00cb0c9da499ac5a97..bd6446ad16555eb0e26f496afb0bdf2dcc9a8117 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -38,9 +38,11 @@ input {
.avatardiv {
margin: 10px auto;
}
+
.warning {
width: 100%;
}
+
.jcrop-keymgr {
display: none !important;
}
@@ -69,6 +71,7 @@ input {
left: 0;
width: 100%;
height: calc(100% - 45px);
+
.inner-container {
z-index: 2001;
/* above the top bar if needed */
@@ -81,15 +84,17 @@ input {
border-radius: var(--border-radius-large);
box-shadow: 0 0 10px var(--color-box-shadow);
padding: 15px;
+
.jcrop-holder,
.jcrop-holder img,
- img.jcrop-preview {
+ img.jcrop-preview {
border-radius: var(--border-radius);
}
.button {
margin-top: 15px;
}
+
.primary {
float: right;
}
@@ -131,19 +136,23 @@ select {
display: grid;
padding: 20px;
max-width: 1500px;
- grid-template-columns:1fr 2fr 1fr;
+ grid-template-columns: 1fr 2fr 1fr;
+
.section {
padding: 10px 10px;
border: 0;
+
h2 {
margin-bottom: 12px;
}
}
+
.personal-info {
margin-right: 10%;
margin-bottom: 12px;
margin-top: 12px;
}
+
.personal-info[class^='icon-'], .personal-info[class*=' icon-'] {
background-position: 0px 2px;
padding-left: 30px;
@@ -156,14 +165,17 @@ select {
#personal-settings {
display: grid;
grid-template-columns: 1fr 2fr;
+
#personal-settings-avatar-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
+
.personal-settings-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
+
.profile-settings-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
@@ -176,13 +188,16 @@ select {
#personal-settings {
display: grid;
grid-template-columns: 1fr;
+
#personal-settings-avatar-container {
grid-template-rows: 1fr;
}
+
.personal-settings-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
+
.profile-settings-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
@@ -194,13 +209,16 @@ select {
#personal-settings {
display: grid;
grid-template-columns: 1fr;
+
#personal-settings-avatar-container {
grid-template-rows: 1fr;
}
+
.personal-settings-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}
+
.profile-settings-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
@@ -212,9 +230,11 @@ select {
display: inline-grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 2fr;
+
&:after {
clear: both;
}
+
> div {
h3 {
position: relative;
@@ -229,6 +249,7 @@ select {
overflow: hidden;
}
}
+
> form span {
&[class^='icon-checkmark'], &[class^='icon-error'] {
position: relative;
@@ -239,18 +260,22 @@ select {
}
}
}
+
.verify {
position: relative;
left: 100%;
top: 0;
height: 0;
+
img {
padding: 12px 7px 6px;
}
}
+
.verify-action {
cursor: pointer;
}
+
input:disabled {
background-color: white;
color: black;
@@ -263,15 +288,19 @@ select {
#body-settings #quota {
cursor: default;
position: relative;
+
progress {
height: 6px;
+
&::-moz-progress-bar {
border-radius: 3px 0 0 3px;
}
+
&::-webkit-progress-value {
border-radius: 3px 0 0 3px;
}
}
+
div {
font-weight: normal;
white-space: nowrap;
@@ -286,9 +315,11 @@ select {
right: -9px;
top: 40px;
width: 275px;
+
p {
padding: 10px;
}
+
.verificationCode {
font-family: monospace;
display: block;
@@ -300,35 +331,43 @@ select {
position: relative;
cursor: pointer;
margin-left: 10px;
+
&:focus {
.icon-federation-menu {
opacity: 0.7;
}
}
+
.icon-federation-menu {
padding-left: 16px;
background-size: 16px;
background-position: left center;
opacity: .3;
cursor: inherit;
+
.icon-triangle-s {
display: inline-block;
vertical-align: middle;
cursor: inherit;
}
}
+
.federationScopeMenu {
top: 44px;
+
&.popovermenu {
.menuitem {
// override h3 heading font size
font-size: 12.8px;
line-height: 1.6em;
+
.menuitem-text-detail {
opacity: .75;
}
+
&.active {
box-shadow: inset 2px 0 var(--color-primary);
+
.menuitem-text {
font-weight: bold;
}
@@ -350,6 +389,7 @@ select {
tr.expired {
background-color: rgba(255, 0, 0, 0.5);
}
+
td {
padding: 5px;
}
@@ -374,6 +414,7 @@ input#identity {
background-color: #47a447;
padding: 3px;
}
+
&.error {
color: #fff;
background-color: #d2322d;
@@ -382,11 +423,11 @@ input#identity {
}
-
table.nostyle {
label {
margin-right: 2em;
}
+
td {
padding: 0.2em 0;
}
@@ -396,17 +437,21 @@ table.nostyle {
#passwordform {
display: flex;
flex-wrap: wrap;
+
#pass1, .personal-show-container, #passwordbutton {
flex-shrink: 1;
width: 200px;
min-width: 150px;
}
+
#pass2 {
width: 100%;
}
+
.password-state {
display: inline-block;
}
+
.strengthify-wrapper {
position: absolute;
left: 0;
@@ -427,7 +472,7 @@ table.nostyle {
}
li > div {
- margin-left: 20px;
+ margin-left: 20px;
}
.two-factor-provider-settings-icon {
@@ -440,6 +485,7 @@ table.nostyle {
.social-button {
padding-left: 0 !important;
margin-left: -10px;
+
img {
padding: 10px;
}
@@ -454,6 +500,7 @@ table.nostyle {
overflow: hidden;
text-overflow: ellipsis;
}
+
&.active .groupname {
width: 65%;
}
@@ -477,9 +524,11 @@ li.active {
position: absolute;
top: 2px;
right: 0;
+
input {
width: 150px;
}
+
label {
font-weight: bold;
}
@@ -488,6 +537,7 @@ li.active {
/* display table at full width */
table.grid {
width: 100%;
+
th {
height: 2em;
color: #999;
@@ -497,6 +547,7 @@ table.grid {
text-align: left;
font-weight: normal;
}
+
td {
border-bottom: 1px solid var(--color-border);
padding: 0 .5em;
@@ -514,20 +565,25 @@ td, th {
text-overflow: ellipsis;
overflow: hidden;
}
+
&.password {
padding-left: .8em;
+
> img {
visibility: hidden;
}
}
+
&.displayName > img {
visibility: hidden;
}
+
&.password,
&.mailAddress {
min-width: 5em;
max-width: 12em;
cursor: pointer;
+
span {
width: 90%;
display: inline-block;
@@ -535,9 +591,11 @@ td, th {
overflow: hidden;
}
}
+
&.mailAddress {
cursor: pointer;
}
+
&.password > span {
margin-right: 1.2em;
color: #C7C7C7;
@@ -551,15 +609,19 @@ span.usersLastLoginTooltip {
/* dropdowns will be relative to this element */
#userlist {
position: relative;
+
.storageLocation, .userBackend, .lastLogin {
display: none;
}
+
th.name {
color: #000;
}
+
tr {
height: 50px;
}
+
.mailAddress .loading-small {
width: 16px;
height: 16px;
@@ -567,9 +629,11 @@ span.usersLastLoginTooltip {
position: relative;
top: 3px;
}
+
.groupsListContainer.hidden {
display: none;
}
+
thead th,
thead tr {
z-index: 100;
@@ -584,25 +648,36 @@ span.usersLastLoginTooltip {
.groupsListContainer.hidden {
display: none;
}
+
.multiselect {
min-width: 150px !important;
position: relative;
top: -1px;
}
+
input {
&:not([type='submit']),
&:not([type='reset']) {
width: 100%;
}
}
+
+ .userActions {
+ position: sticky;
+ right: 60px;
+ z-index: 20;
+ }
+
.userActions input {
width: 44px;
height: 44px;
+
&.icon-close {
border: none;
background-color: initial;
opacity: .5;
}
+
&:hover {
opacity: 1;
}
@@ -637,20 +712,25 @@ span.usersLastLoginTooltip {
margin-right: 6px;
width: 16px;
}
+
li span.no-icon {
padding-left: 32px;
}
+
ul li.active > span.utils {
.delete, .rename {
display: block;
}
}
+
.appwarning {
background: #fcc;
}
+
&.appwarning:hover {
background: #fbb;
}
+
.app-external {
color: var(--color-text-maxcontrast);
}
@@ -668,6 +748,7 @@ span.version {
.app-level {
margin-top: 8px;
+
span {
color: var(--color-text-maxcontrast);
background-color: transparent;
@@ -675,22 +756,25 @@ span.version {
border-radius: var(--border-radius);
padding: 3px 6px;
}
+
a {
padding: 10px;
margin: -6px;
white-space: nowrap;
}
+
.official {
background-position: left center;
background-position: 5px center;
padding-left: 25px;
}
+
.supported {
border-color: var(--color-success);
background-position: left center;
background-position: 5px center;
padding-left: 25px;
- color: var(--color-success) ;
+ color: var(--color-success);
}
}
@@ -706,29 +790,36 @@ span.version {
}
}
+
#apps-list.store {
.section {
border: 0;
}
+
.app-name {
display: block;
margin: 5px 0;
}
+
.app-name, .app-image * {
cursor: pointer;
}
+
.app-summary {
opacity: .7;
}
+
.app-image-icon .icon-settings-dark {
width: 100%;
height: 150px;
background-size: 45px;
opacity: 0.5;
}
+
.app-score-image {
height: 14px;
}
+
.actions {
margin-top: 10px;
}
@@ -745,26 +836,33 @@ span.version {
opacity: .7;
}
}
+
.app-level {
clear: right;
width: 100%;
+
.supported,
.official {
vertical-align: top;
}
+
.app-score-image {
float: right;
}
}
+
.app-author, .app-licence {
color: var(--color-text-maxcontrast);
}
+
.app-dependencies {
margin: 10px 0;
}
+
.app-description p {
margin: 10px 0;
}
+
.close {
position: absolute;
top: 0;
@@ -775,18 +873,21 @@ span.version {
width: 44px;
height: 44px;
}
+
.actions {
display: flex;
align-items: center;
- .app-groups{
+ .app-groups {
padding: 5px;
}
}
+
.appslink {
text-decoration: underline;
margin-right: 5px;
}
+
.app-level,
.actions,
.documentation,
@@ -871,8 +972,9 @@ span.version {
}
/* correctly display help icons next to headings */
- h2 {
+ h2 {
margin-bottom: 22px;
+
.icon-info {
padding: 6px 20px;
vertical-align: text-bottom;
@@ -947,24 +1049,30 @@ span.version {
.app-list-move {
transition: transform 1s;
}
+
#app-list-update-all {
margin-left: 10px;
}
+
.counter {
padding-left: $header-height - 10px;
margin: 10px;
}
+
&.installed {
.apps-list-container {
display: table;
width: 100%;
height: auto;
}
+
margin-bottom: 100px;
+
.section {
display: table-row;
padding: 0;
margin: 0;
+
> * {
display: table-cell;
height: initial;
@@ -974,22 +1082,27 @@ span.version {
padding: 6px;
box-sizing: border-box;
}
+
&.selected {
background-color: var(--color-background-dark);
}
}
+
.groups-enable {
margin-top: 0;
+
label {
margin-right: 3px;
}
}
+
.app-image {
width: 44px;
height: auto;
text-align: right;
}
+
.app-image-icon svg,
.app-image-icon .icon-settings-dark {
margin-top: 5px;
@@ -999,8 +1112,10 @@ span.version {
background-size: cover;
display: inline-block;
}
+
.actions {
text-align: right;
+
.icon-loading-small {
display: inline-block;
top: 4px;
@@ -1008,6 +1123,7 @@ span.version {
}
}
}
+
&:not(.installed) .app-image-icon svg {
position: absolute;
bottom: 43px;
@@ -1016,12 +1132,15 @@ span.version {
height: 64px;
opacity: .1;
}
+
display: flex;
flex-wrap: wrap;
align-content: flex-start;
+
&.hidden {
display: none;
}
+
.section {
position: relative;
flex: 0 0 auto;
@@ -1030,42 +1149,52 @@ span.version {
display: block;
margin: 8px 0;
}
+
&:hover {
background-color: var(--color-background-dark);
}
}
+
.app-description {
p {
margin: 10px 0;
}
+
ul {
list-style: disc;
}
+
ol {
list-style: decimal;
+
ol, ul {
padding-left: 15px;
}
}
+
> {
ul, ol {
margin-left: 19px;
}
}
+
ul {
ol, ul {
padding-left: 15px;
}
}
}
+
/* Bundle header */
.apps-header {
display: table-row;
position: relative;
+
div {
display: table-cell;
height: 70px;
}
+
h2 {
display: table-cell;
position: absolute;
@@ -1077,6 +1206,7 @@ span.version {
top: -1px;
margin-left: 12px;
}
+
+ .section {
margin-top: 50px;
}
@@ -1120,6 +1250,7 @@ table.grid td.date {
&.message {
padding: 12px;
}
+
&.icon {
width: 32px;
height: 32px;
@@ -1127,12 +1258,15 @@ table.grid td.date {
display: inline-block;
border-radius: 50%;
}
+
&.icon-checkmark-white {
background-color: var(--color-success);
}
+
&.icon-error-white {
background-color: var(--color-warning);
}
+
&.icon-close-white {
background-color: var(--color-error);
}
@@ -1143,15 +1277,19 @@ table.grid td.date {
p {
padding-bottom: 0.8em;
}
+
input#shareapiExpireAfterNDays {
width: 40px;
}
+
.indent {
padding-left: 28px;
}
+
.double-indent {
padding-left: 56px;
}
+
.nocheckbox {
padding-left: 20px;
}
@@ -1201,6 +1339,7 @@ table.grid td.date {
width: 300px;
text-align: right;
}
+
select:nth-child(2),
input:not([type='button']) {
width: 143px;
@@ -1220,6 +1359,7 @@ table.grid td.date {
height: 16px;
width: 16px;
vertical-align: text-bottom;
+
&.success {
border-radius: 50%;
}
@@ -1242,9 +1382,11 @@ span {
background-color: var(--color-success);
border-radius: var(--border-radius);
}
+
&.error {
background-color: var(--color-error);
}
+
&.indeterminate {
background-color: var(--color-warning);
border-radius: 40% 0;
@@ -1252,7 +1394,6 @@ span {
}
-
/* OPERA hack for strengthify*/
doesnotexist:-o-prefocus, .strengthify-wrapper {
left: 185px;
@@ -1299,9 +1440,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
height: 50px;
background-position: left center;
}
+
.errors, .errors a {
color: var(--color-error);
}
+
.warnings, .warnings a {
color: var(--color-warning);
}
@@ -1323,6 +1466,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
#admin-tips li {
list-style: initial;
+
a {
display: inline-block;
padding: 3px 0;
@@ -1353,11 +1497,13 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
#body-settings {
$grid-row-height: 60px;
$grid-col-min-width: 150px;
+
#app-content.user-list-grid {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: $grid-row-height;
grid-column-gap: 20px;
+
.row {
// TODO replace with css4 subgrid when available
// fallback for ie11 no grid
@@ -1366,10 +1512,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
grid-row-start: span 1;
grid-gap: 3px;
align-items: center;
+ z-index: 0;
/* 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) repeat(auto-fit, minmax($grid-col-min-width, 1fr));
border-bottom: var(--color-border) 1px solid;
+
&.disabled {
opacity: .5;
}
@@ -1384,9 +1532,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
.lastLogin {
min-width: $grid-col-min-width;
display: flex;
- color: var(--color-text-dark);
+ color: var(--color-text-dark);
vertical-align: baseline;
}
+
.groups,
.subadmins,
.quota {
@@ -1396,13 +1545,19 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
vertical-align: baseline;
}
}
+
.obfuscated {
width: 400px;
opacity: .7;
}
+
.userActions {
min-width: 44px;
+ position: sticky;
+ right: 40px;
+ z-index: 109;
}
+
.subtitle {
color: var(--color-text-maxcontrast);
vertical-align: baseline;
@@ -1414,11 +1569,13 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
@include position('sticky');
align-self: normal;
background-color: var(--color-main-background);
- z-index: 55; /* above multiselect */
+ z-index: 100; /* above multiselect */
top: $header-height;
+
&.sticky {
box-shadow: 0 -2px 10px 1px var(--color-box-shadow);
}
+
/* fake input for groups validation */
input#newgroups {
position: absolute;
@@ -1428,10 +1585,16 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
z-index: 0;
}
}
+
// separate prop to set initial value to top: 50px
&#new-user {
- top: $header-height + $grid-row-height;
+ height: 120px;
+
+ .row {
+ padding-top: 50px;
+ }
}
+
&#grid-header {
color: var(--color-text-maxcontrast);
z-index: 60; /* above new-user */
@@ -1454,49 +1617,58 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
vertical-align: baseline;
}
}
+
&:hover {
input:not([type='submit']):not(:focus):not(:active) {
border-color: var(--color-border) !important;
}
+
&:not(#grid-header) {
box-shadow: 5px 0 0 var(--color-primary-element) inset;
}
}
+
> div,
> form {
grid-row: 1;
display: inline-flex;
color: var(--color-text-lighter);
position: relative;
+
> input:not(:focus):not(:active) {
border-color: transparent;
cursor: pointer;
}
- > input:focus, >input:active {
+
+ > 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;
}
}
+
&.name,
&.userBackend {
/* better multi-line visual */
line-height: 1.3em;
max-height: 100%;
- overflow : hidden;
+ overflow: hidden;
/* not supported by all browsers
so we keep the overflow hidden
as a fallback */
@@ -1505,77 +1677,93 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
+
&.quota {
height: 44px;
display: flex;
align-items: center;
justify-content: center;
+
progress {
width: 100%;
margin: 0 10px;
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 {
- .action-item {
- position: absolute;
- }
+ .action-item {
+ position: absolute;
+ }
+
#newsubmit {
width: 100%;
}
+
.toggleUserActions {
position: relative;
display: block;
align-items: center;
+
.icon-more {
width: 44px;
height: 44px;
opacity: .5;
cursor: pointer;
margin-left: 40px;
+
&:hover {
opacity: .7;
}
}
}
+
.feedback {
display: flex;
align-items: center;
white-space: nowrap;
transition: opacity 200ms ease-in-out;
+
.icon-checkmark {
opacity: .5;
margin-right: 5px;
}
}
}
+
/* Fill the grid cell */
.multiselect.multiselect-vue {
width: 100%;
}
}
}
+
.infinite-loading-container {
display: flex;
align-items: center;
justify-content: center;
grid-row-start: span 4;
}
+
.users-list-end {
opacity: .5;
user-select: none;
diff --git a/apps/settings/js/vue-0.js b/apps/settings/js/vue-0.js
index ded87d3fa8c6b77bd424ce14d3bc4fa5a43667ed..3cbe307be72df678fbcfaeaa32891acaa3d9eaaf 100644
Binary files a/apps/settings/js/vue-0.js and b/apps/settings/js/vue-0.js differ
diff --git a/apps/settings/js/vue-0.js.map b/apps/settings/js/vue-0.js.map
index fcc43b0366155f524086e02ba293efabd11cda7b..0d2d9ef9ada8a76b10d5f0186cdc1efcecbec90f 100644
Binary files a/apps/settings/js/vue-0.js.map and b/apps/settings/js/vue-0.js.map differ
diff --git a/apps/settings/js/vue-1.js b/apps/settings/js/vue-1.js
new file mode 100644
index 0000000000000000000000000000000000000000..c3128715eeb64228bf843b7266b1cc1ef1e6bdd8
Binary files /dev/null and b/apps/settings/js/vue-1.js differ
diff --git a/apps/settings/js/vue-1.js.map b/apps/settings/js/vue-1.js.map
new file mode 100644
index 0000000000000000000000000000000000000000..6fd2f125c9178a4ca043598efb48a2346f07c0c9
Binary files /dev/null and b/apps/settings/js/vue-1.js.map differ
diff --git a/apps/settings/js/vue-2.js b/apps/settings/js/vue-2.js
new file mode 100644
index 0000000000000000000000000000000000000000..5256cff103337fd2c4c19e2ba1f2db5ac267c6b1
Binary files /dev/null and b/apps/settings/js/vue-2.js differ
diff --git a/apps/settings/js/vue-2.js.map b/apps/settings/js/vue-2.js.map
new file mode 100644
index 0000000000000000000000000000000000000000..08af45fd4c64bf03050c2961e3e797c24730e3b9
Binary files /dev/null and b/apps/settings/js/vue-2.js.map differ
diff --git a/apps/settings/js/vue-3.js b/apps/settings/js/vue-3.js
new file mode 100644
index 0000000000000000000000000000000000000000..82c330b7e651369377088f5dd868a007fa34f9ac
Binary files /dev/null and b/apps/settings/js/vue-3.js differ
diff --git a/apps/settings/js/vue-3.js.map b/apps/settings/js/vue-3.js.map
new file mode 100644
index 0000000000000000000000000000000000000000..3b3fa557d266b540abcaeaabe8da0905c30ce03c
Binary files /dev/null and b/apps/settings/js/vue-3.js.map differ
diff --git a/apps/settings/js/vue-4.js b/apps/settings/js/vue-4.js
index 15cb4918692b602d5310c219ec0e63ce9aee8d10..8282b13575a2964521e8793c6b8b39bdf961f9b8 100644
Binary files a/apps/settings/js/vue-4.js and b/apps/settings/js/vue-4.js differ
diff --git a/apps/settings/js/vue-4.js.map b/apps/settings/js/vue-4.js.map
index 61040d5a44e9626f52c656fdf93dfb5052889848..41747635c769b23baddcea5fc0314e12a2be262c 100644
Binary files a/apps/settings/js/vue-4.js.map and b/apps/settings/js/vue-4.js.map differ
diff --git a/apps/settings/js/vue-5.js b/apps/settings/js/vue-5.js
index 9dd9de1e8f6916d091e1a50ad9317562d3168d42..d855d9835be39cfddd8e3e5d34ab993bde76aa49 100644
Binary files a/apps/settings/js/vue-5.js and b/apps/settings/js/vue-5.js differ
diff --git a/apps/settings/js/vue-5.js.map b/apps/settings/js/vue-5.js.map
index bf7d1f2530438cbc9a3a8f57d6cd457dd599476e..91f8bfc26ab3210efaa857308b9d05c355dbf530 100644
Binary files a/apps/settings/js/vue-5.js.map and b/apps/settings/js/vue-5.js.map differ
diff --git a/apps/settings/js/vue-6.js b/apps/settings/js/vue-6.js
index 0e7e28b4d2769814ce69fd224045e761693465be..b364c1564d1bba21c9c6d531b1d3c5598d867dfe 100644
Binary files a/apps/settings/js/vue-6.js and b/apps/settings/js/vue-6.js differ
diff --git a/apps/settings/js/vue-6.js.map b/apps/settings/js/vue-6.js.map
index 757254f354bd55b3c92630431b704458093eacc5..389ec547bcd6c37d102f55e464f079617189835a 100644
Binary files a/apps/settings/js/vue-6.js.map and b/apps/settings/js/vue-6.js.map differ
diff --git a/apps/settings/js/vue-7.js b/apps/settings/js/vue-7.js
index f0c36f7dfe18efb8005bc3fcb03b649c61940358..5492f2bb30827d803e1f2beeb69e75296e2aae5a 100644
Binary files a/apps/settings/js/vue-7.js and b/apps/settings/js/vue-7.js differ
diff --git a/apps/settings/js/vue-7.js.map b/apps/settings/js/vue-7.js.map
index 513533c8208c8ac04447d5cb3455a78adb23b8a1..3873f826b4b9fc9bff91bd47124a5b16878cf452 100644
Binary files a/apps/settings/js/vue-7.js.map and b/apps/settings/js/vue-7.js.map differ
diff --git a/apps/settings/js/vue-settings-apps-users-management.js b/apps/settings/js/vue-settings-apps-users-management.js
index 355c89af96e2dc8889df7af0d06b54c84b372ec5..1f22e6624addee9092a63ad1418bd204478c3688 100644
Binary files a/apps/settings/js/vue-settings-apps-users-management.js and b/apps/settings/js/vue-settings-apps-users-management.js differ
diff --git a/apps/settings/js/vue-settings-apps-users-management.js.map b/apps/settings/js/vue-settings-apps-users-management.js.map
index dab1f98209b916eac216c8376fcc18f2470ccc12..02511e90735a98711864599fe55acbdd8ed61424 100644
Binary files a/apps/settings/js/vue-settings-apps-users-management.js.map and b/apps/settings/js/vue-settings-apps-users-management.js.map differ
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 0fb1d09fbf72387b8317120dad5a6e8349a5628f..6b41ba0552a78cd7a789e7ae63aa28e2acd65817 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -22,58 +22,6 @@
<template>
<div id="app-content" class="user-list-grid" @scroll.passive="onScroll">
- <div id="grid-header"
- :class="{'sticky': scrolled && !showConfig.showNewUserForm}"
- class="row">
- <div id="headerAvatar" class="avatar" />
- <div id="headerName" class="name">
- {{ t('settings', 'Username') }}
-
- <div class="subtitle">
- {{ t('settings', 'Display name') }}
- </div>
- </div>
- <div id="headerPassword" class="password">
- {{ t('settings', 'Password') }}
- </div>
- <div id="headerAddress" class="mailAddress">
- {{ t('settings', 'Email') }}
- </div>
- <div id="headerGroups" class="groups">
- {{ t('settings', 'Groups') }}
- </div>
- <div v-if="subAdminsGroups.length>0 && settings.isAdmin"
- id="headerSubAdmins"
- class="subadmins">
- {{ t('settings', 'Group admin for') }}
- </div>
- <div id="headerQuota" class="quota">
- {{ t('settings', 'Quota') }}
- </div>
- <div v-if="showConfig.showLanguages"
- id="headerLanguages"
- class="languages">
- {{ t('settings', 'Language') }}
- </div>
-
- <div v-if="showConfig.showUserBackend || showConfig.showStoragePath"
- class="headerUserBackend userBackend">
- <div v-if="showConfig.showUserBackend" class="userBackend">
- {{ t('settings', 'User backend') }}
- </div>
- <div v-if="showConfig.showStoragePath"
- class="subtitle storageLocation">
- {{ t('settings', 'Storage location') }}
- </div>
- </div>
- <div v-if="showConfig.showLastLogin"
- class="headerLastLogin lastLogin">
- {{ t('settings', 'Last login') }}
- </div>
-
- <div class="userActions" />
- </div>
-
<form v-show="showConfig.showNewUserForm"
id="new-user"
:class="{'sticky': scrolled && showConfig.showNewUserForm}"
@@ -96,16 +44,16 @@
pattern="[a-zA-Z0-9 _\.@\-']+"
required
type="text">
- </div>
- <div class="displayName">
- <input id="newdisplayname"
- v-model="newUser.displayName"
- :placeholder="t('settings', 'Display name')"
- autocapitalize="none"
- autocomplete="off"
- autocorrect="off"
- name="displayname"
- type="text">
+ <div class="displayName">
+ <input id="newdisplayname"
+ v-model="newUser.displayName"
+ :placeholder="t('settings', 'Display name')"
+ autocapitalize="none"
+ autocomplete="off"
+ autocorrect="off"
+ name="displayname"
+ type="text">
+ </div>
</div>
<div class="password">
<input id="newuserpassword"
@@ -204,8 +152,66 @@
class="button primary icon-checkmark-white has-tooltip"
type="submit"
value="">
+ <div class="closeButton">
+ <Actions>
+ <ActionButton icon="icon-close" @click="onClose">
+ {{ t('settings', 'Close') }}
+ </ActionButton>
+ </Actions>
+ </div>
</div>
</form>
+ <div id="grid-header"
+ :class="{'sticky': scrolled && !showConfig.showNewUserForm}"
+ class="row">
+ <div id="headerAvatar" class="avatar" />
+ <div id="headerName" class="name">
+ {{ t('settings', 'Username') }}
+
+ <div class="subtitle">
+ {{ t('settings', 'Display name') }}
+ </div>
+ </div>
+ <div id="headerPassword" class="password">
+ {{ t('settings', 'Password') }}
+ </div>
+ <div id="headerAddress" class="mailAddress">
+ {{ t('settings', 'Email') }}
+ </div>
+ <div id="headerGroups" class="groups">
+ {{ t('settings', 'Groups') }}
+ </div>
+ <div v-if="subAdminsGroups.length>0 && settings.isAdmin"
+ id="headerSubAdmins"
+ class="subadmins">
+ {{ t('settings', 'Group admin for') }}
+ </div>
+ <div id="headerQuota" class="quota">
+ {{ t('settings', 'Quota') }}
+ </div>
+ <div v-if="showConfig.showLanguages"
+ id="headerLanguages"
+ class="languages">
+ {{ t('settings', 'Language') }}
+ </div>
+
+ <div v-if="showConfig.showUserBackend || showConfig.showStoragePath"
+ class="headerUserBackend userBackend">
+ <div v-if="showConfig.showUserBackend" class="userBackend">
+ {{ t('settings', 'User backend') }}
+ </div>
+ <div v-if="showConfig.showStoragePath"
+ class="subtitle storageLocation">
+ {{ t('settings', 'Storage location') }}
+ </div>
+ </div>
+ <div v-if="showConfig.showLastLogin"
+ class="headerLastLogin lastLogin">
+ {{ t('settings', 'Last login') }}
+ </div>
+
+ <div class="userActions" />
+ </div>
<user-row v-for="(user, key) in filteredUsers"
:key="key"
@@ -236,7 +242,7 @@
<script>
import userRow from './UserList/UserRow'
-import { Multiselect } from 'nextcloud-vue'
+import { Multiselect, Actions, ActionButton } from 'nextcloud-vue'
import InfiniteLoading from 'vue-infinite-loading'
import Vue from 'vue'
@@ -268,6 +274,8 @@ export default {
userRow,
Multiselect,
InfiniteLoading,
+ Actions,
+ ActionButton,
},
props: {
users: {
@@ -561,6 +569,9 @@ export default {
this.$refs.infiniteLoading.stateChanger.reset()
}
},
+ onClose() {
+ this.showConfig.showNewUserForm = false
+ },
},
}
</script>
diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue
index 39d98f46f97471fbb5c33a4fbb66c1df943bf312..e7c039376f5a3b28754b9fa2fb549ae1ad0faf43 100644
--- a/apps/settings/src/components/UserList/UserRow.vue
+++ b/apps/settings/src/components/UserList/UserRow.vue
@@ -56,10 +56,14 @@
:sub-admins-groups="subAdminsGroups"
:user-actions="userActions"
:user="user"
+ :class="{'row--menu-opened': openedMenu}"
@hideMenu="hideMenu"
@toggleMenu="toggleMenu" />
<div v-else
- :class="{'disabled': loading.delete || loading.disable}"
+ :class="{
+ 'disabled': loading.delete || loading.disable,
+ 'row--menu-opened': openedMenu
+ }"
:data-id="user.id"
class="row row--editable">
<div :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}"
@@ -675,3 +679,9 @@ export default {
},
}
</script>
+<style scoped lang="scss">
+ // Force menu to be above other rows
+ .row--menu-opened {
+ z-index: 1 !important;
+ }
+</style>