Merge pull request #39943 from nextcloud/fix/users-app-nav

nextcloud · Aug 22, 2023 · 4b7ec0a · 4b7ec0a
2 parents 1e6ed07 + 9423be6
commit 4b7ec0a
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 35 deletions.
diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue
@@ -25,10 +25,12 @@
 		:exact="true"
 		:name="name"
 		:to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }"
-		icon="icon-group"
 		:loading="loadingRenameGroup"
 		:menu-open="openGroupMenu"
 		@update:menuOpen="handleGroupMenuOpen">
+		<template #icon>
+			<AccountGroup :size="20" />
+		</template>
 		<template #counter>
 			<NcCounterBubble v-if="count"
 				:type="active ? 'highlighted' : undefined">
@@ -54,18 +56,21 @@
 </template>
 
 <script>
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+
+import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
 
 export default {
 	name: 'GroupListItem',
 	components: {
-		NcActionInput,
+		AccountGroup,
 		NcActionButton,
-		NcCounterBubble,
+		NcActionInput,
 		NcAppNavigationItem,
+		NcCounterBubble,
 	},
 	props: {
 		/**

diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
@@ -47,8 +47,10 @@
 					<NcAppNavigationItem id="everyone"
 						:exact="true"
 						:name="t('settings', 'Active users')"
-						:to="{ name: 'users' }"
-						icon="icon-contacts-dark">
+						:to="{ name: 'users' }">
+						<template #icon>
+							<AccountGroup :size="20" />
+						</template>
 						<template #counter>
 							<NcCounterBubble :type="!selectedGroupDecoded ? 'highlighted' : undefined">
 								{{ userCount }}
@@ -59,8 +61,10 @@
 						id="admin"
 						:exact="true"
 						:name="t('settings', 'Admins')"
-						:to="{ name: 'group', params: { selectedGroup: 'admin' } }"
-						icon="icon-user-admin">
+						:to="{ name: 'group', params: { selectedGroup: 'admin' } }">
+						<template #icon>
+							<ShieldAccount :size="20" />
+						</template>
 						<template v-if="adminGroupMenu.count > 0" #counter>
 							<NcCounterBubble :type="selectedGroupDecoded === 'admin' ? 'highlighted' : undefined">
 								{{ adminGroupMenu.count }}
@@ -73,8 +77,10 @@
 						id="disabled"
 						:exact="true"
 						:name="t('settings', 'Disabled users')"
-						:to="{ name: 'group', params: { selectedGroup: 'disabled' } }"
-						icon="icon-disabled-users">
+						:to="{ name: 'group', params: { selectedGroup: 'disabled' } }">
+						<template #icon>
+							<AccountOff :size="20" />
+						</template>
 						<template v-if="disabledGroupMenu.usercount > 0" #counter>
 							<NcCounterBubble :type="selectedGroupDecoded === 'disabled' ? 'highlighted' : undefined">
 								{{ disabledGroupMenu.usercount }}
@@ -127,8 +133,11 @@ import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigati
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
+import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
+import AccountOff from 'vue-material-design-icons/AccountOff.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+import ShieldAccount from 'vue-material-design-icons/ShieldAccount.vue'
 
 import GroupListItem from '../components/GroupListItem.vue'
 import UserList from '../components/UserList.vue'
@@ -140,6 +149,8 @@ export default {
 	name: 'Users',
 
 	components: {
+		AccountGroup,
+		AccountOff,
 		Cog,
 		Fragment,
 		GroupListItem,
@@ -152,6 +163,7 @@ export default {
 		NcContent,
 		NcCounterBubble,
 		Plus,
+		ShieldAccount,
 		UserList,
 		UserSettingsDialog,
 	},

diff --git a/core/css/inputs.css b/core/css/inputs.css
diff --git a/core/css/inputs.css.map b/core/css/inputs.css.map
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
@@ -64,7 +64,6 @@ button:not(
 ),
 .button,
 .pager li a {
-	margin: 3px 3px 3px 0;
 	padding: 7px 14px;
 	font-size: 13px;
 	background-color: var(--color-main-background);
@@ -74,21 +73,30 @@ button:not(
 	outline: none;
 	border-radius: var(--border-radius);
 	cursor: text;
-	&:not(:disabled):not(.primary) {
-		&:hover,
-		&:focus,
-		&.active {
-		/* active class used for multiselect */
-			border-color: var(--color-primary-element);
-			outline: none;
-		}
-		&:active {
-			outline: none;
-			background-color: var(--color-main-background);
-			color: var(--color-text-light);
+	&:not(.app-navigation-entry-button) {
+		margin: 3px 3px 3px 0;
+	}
+	&:not(
+		:disabled,
+		.primary
+	) {
+		&:not(.app-navigation-entry-button) {
+			&:hover,
+			&:focus,
+			&.active {
+				/* active class used for multiselect */
+				border-color: var(--color-primary-element);
+				outline: none;
+			}
+			&:active {
+				outline: none;
+				background-color: var(--color-main-background);
+				color: var(--color-text-light);
+			}
 		}
 		&:focus-visible {
-			box-shadow: 0 0 0 2px var(--color-primary-element);
+			box-shadow: 0 0 0 4px var(--color-main-background) !important;
+			outline: 2px solid var(--color-main-text) !important;
 		}
 	}
 	&:disabled {

diff --git a/core/css/server.css b/core/css/server.css