Move users management to multi line #17239

GretaD · 2019-09-23T11:08:51Z

fix #17208
The user management used to be like this:

Now it looks like this:

This version is in read mode. The toggle to edit the display name will be added with another patch.
@nextcloud/designers what do you think? Any other suggestions related to design?

marcoambrosini · 2019-09-23T17:57:28Z

Looks good to me, I know there's a 'no uppercase' policy @jancborchardt :) but I think that it provides some nice hierarchy here. An alternative to that could be increasing the font size.
The only thing I would do is vertically align those titles (the first is a bit off because of the sub heading).
Also, you're pushing the compiled files, is that on purpose?

settings/css/settings.scss

jancborchardt · 2019-10-04T12:37:36Z

Looks good to me, I know there's a 'no uppercase' policy @jancborchardt :) but I think that it provides some nice hierarchy here. An alternative to that could be increasing the font size.

Hehe, so the point is that the focus should not be on the table headings, but on the content. That is why they were lighter than the content text. The policy and the design does not come out of thin air. ;)

Uppercase text is quite bad for legibility as well as accessibility, and we shouldn’t start using it here on an otherwise unrelated change, especially not in table headings which are not a point of focus. :)

@GretaD could you change the headings to normal case, and a color like color: var(--color-text-maxcontrast);?

skjnldsv

Rebased and cleaned up :)

the menu on the end is not aligned anymore :)
Menu not vertically centered
we should not show the password column if it's not in edit mode as nothing is displayed :)
we can hide the userid when editing so only the displayname (editable) is shown in the middle
Some slight mislignment of the multiselects
The quota bar doesn't have the tooltip with details like it had before (in readonly mode)

Otherwise great work!! It's looking very clean and much more understandable :)
👍

skjnldsv · 2019-11-26T11:34:10Z

apps/settings/src/components/UserList/UserRow.vue

+							autocorrect="off"
+							autocapitalize="off"
+							spellcheck="false">
+						<input


the inputs submit are not shown anymore :(
They should still be shown inline and trigger a save :)

added back, can you please tell me if its ok now?

skjnldsv · 2019-11-26T11:36:55Z

apps/settings/src/components/UserList/UserRow.vue

@@ -191,6 +214,11 @@
 		</div>
 		<div class="userActions">
 			<div v-if="OC.currentUser !== user.id && user.id !== 'admin' && !loading.all" class="toggleUserActions">
+				<Actions>
+					<ActionButton icon="icon-checkmark" @click="editing = false">


It just toggle the editing, it doesn't "save", so the text should be something else :)
To save a property you still need to manually click the submit button next to the input you're changing (the multiselects automatically save on change)

Additionally, pressing escape should cancel the editing I think, but that is an additional task ;)

I added "Done" is it better as an option?

apps/settings/src/components/UserList/UserRow.vue

skjnldsv · 2019-11-26T11:38:54Z

apps/settings/src/components/UserList/UserRowSimple.vue

+	computed: {
+		userGroupsLabels() {
+			return this.userGroups
+				.map((groupObject) => groupObject.name)


GretaD · 2019-11-28T16:00:46Z

@skjnldsv hey, we were discussing yesterday with Frank and Arthur about the "User Backend" column. Backend is very technical, should we rename it something like Local maybe, instead of Database? Or something else, less technical.

skjnldsv · 2019-11-29T10:36:32Z

Backend is very technical

I think it's hidden by default in the bottom left settings ;)

GretaD · 2019-11-29T10:59:00Z

Backend is very technical

I think it's hidden by default in the bottom left settings ;)

i meant database not backend :) user backend is fine. the database we were discussing to call it smth like Local user or smth

skjnldsv · 2019-11-29T11:16:37Z

Yes, it's the "user backend" (database, ldap...) It's hidden by default

jancborchardt · 2019-12-02T08:54:28Z

Backend is very technical

I think it's hidden by default in the bottom left settings ;)

i meant database not backend :) user backend is fine. the database we were discussing to call it smth like Local user or smth

To answer your question: Yes, changing the label from "Database" to "Local" seems good! :)

skjnldsv · 2019-12-02T10:21:21Z

Ah, sorry I missed your point @GretaD 🙇‍♀️

lib/private/User/Database.php

karlitschek · 2019-12-08T11:18:05Z

@skjnldsv @GretaD

skjnldsv · 2019-12-08T16:40:56Z

What is the state here? Would be great to have this in 18 :-)

hopefully we should be able to get this in yes ;)

GretaD · 2019-12-09T10:45:21Z

@skjnldsv @GretaD

yes, i will work on tests today and we can have a final review this week.

jancborchardt · 2019-12-10T15:06:01Z

Some design review, if that is wanted ;)

Nice on the username / display name column! 👍
The "Password" column is shown but seems useless until you edit a user because it does not contain any info.
Table heading only needs a border-bottom of 1px, the 2px is not necessary and we don’t do that elsewhere either.
The "Group admin for" table heading wraps too much and looks broken. Should wrap to max 2 lines.
Group memberships are not actually shown for me in the overview?
Stuff is a bit squished, especially the controls on the right? Having the controls sticky on the right would be much better to have them easily reachable without horizontal scrolling (which is a huge pain)
Same for the "Done" button, it could be stickied to the right. If you e.g. just want to edit a person’s email address, you might need to:
1. Scroll to right
2. Click edit button
3. Do the edits
4. Scroll to right again
5. Click "Done" button
There is some whitespace on the right that seems it should not be there?

apps/settings/src/components/UserList.vue

tests/acceptance/features/bootstrap/UsersSettingsContext.php

skjnldsv · 2019-12-10T17:29:56Z

tests/acceptance/features/users.feature

-    And I open the User settings
-    And I see that the list of users contains the user user0
-    # disabled because we need the TAB patch: 
+	Scenario: assign user to a group


Please don't use the automated tabs option of phpstorm 🙈

GretaD · 2019-12-11T21:12:25Z

* [ ]  The "Password" column is shown but seems useless until you edit a user because it does not contain any info.

Removing it its not that user friendly since you have to wonder where to find the password to change it. We can add a placeholder or text to say smth like " click edit button to change password" or smth

* [ ]  Table heading only needs a border-bottom of 1px, the 2px is not necessary and we don’t do that elsewhere either.

Its border-bottom-width: medium; not border-bottom:2px. I changed it into thin.

* [ ]  The "Group admin for" table heading wraps too much and looks broken. Should wrap to max 2 lines.

This is fixed, can you please check it out again, i cannot reproduce it anymore.

* [ ]  Group memberships are not actually shown for me in the overview?

Yes, thats right, weird bug after the last changes pushed by @skjnldsv, will see whats wrong.

* [ ]  Same for the "Done" button, it could be stickied to the right. If you e.g. just want to edit a person’s email address, you might need to:
  
  1. Scroll to right
  2. Click edit button
  3. Do the edits
  4. Scroll to right again
  5. Click "Done" button

only for mobile, otherwise its fine, you dont need to scroll

* [ ]  There is some whitespace on the right that seems it should not be there?
  ![groups whitespace](https://user-images.githubusercontent.com/925062/70541152-16854380-1b99-11ea-9b9f-1a1572da10c9.png)

this is also fixed, please recheck.

Signed-off-by: Greta Doci <gretadoci@gmail.com>

skjnldsv · 2019-12-12T11:26:10Z

All rebased and ready to go.
Acceptance tests now passes locally, should be good!

Please review!

GretaD · 2019-12-12T15:06:51Z

CI all greeeeennn yoohooo

GretaD requested a review from skjnldsv September 23, 2019 11:08

GretaD mentioned this pull request Sep 23, 2019

fix users table overlaping with storage location #17203

Closed

GretaD added 2. developing Work in progress feature: users and groups labels Sep 23, 2019

GretaD self-assigned this Sep 23, 2019

skjnldsv added the design Design, UI, UX, etc. label Sep 23, 2019

skjnldsv reviewed Sep 24, 2019

View reviewed changes

settings/css/settings.scss Outdated Show resolved Hide resolved

skjnldsv mentioned this pull request Sep 25, 2019

Add eslint global nextcloud config #17263

Merged

1 task

jancborchardt mentioned this pull request Oct 25, 2019

✨ Nextcloud 17 polishing list! #16076

Closed

77 tasks

GretaD force-pushed the feature/17208/Move_usersmanagement_to_multiline branch from 90991aa to 433dd70 Compare November 7, 2019 14:19

GretaD requested a review from skjnldsv November 26, 2019 10:56

skjnldsv requested changes Nov 26, 2019

View reviewed changes

skjnldsv added this to the Nextcloud 18 milestone Nov 26, 2019

skjnldsv reviewed Nov 26, 2019

View reviewed changes

apps/settings/src/components/UserList/UserRow.vue Outdated Show resolved Hide resolved

skjnldsv reviewed Nov 26, 2019

View reviewed changes

GretaD force-pushed the feature/17208/Move_usersmanagement_to_multiline branch from f0218b0 to 18f777c Compare November 28, 2019 15:40

GretaD force-pushed the feature/17208/Move_usersmanagement_to_multiline branch from 50f2f99 to c215919 Compare December 3, 2019 16:00

GretaD commented Dec 3, 2019

View reviewed changes

lib/private/User/Database.php Outdated Show resolved Hide resolved

GretaD force-pushed the feature/17208/Move_usersmanagement_to_multiline branch from efc9432 to 375eb3e Compare December 5, 2019 13:18

GretaD requested a review from skjnldsv December 5, 2019 13:20