diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 4 | ||||
| -rw-r--r-- | src/components/list/list.vue | 6 | ||||
| -rw-r--r-- | src/components/list/list_item.style.js | 2 | ||||
| -rw-r--r-- | src/components/selectable_list/selectable_list.vue | 2 | ||||
| -rw-r--r-- | src/components/user_profile/user_profile.vue | 4 |
5 files changed, 14 insertions, 4 deletions
diff --git a/src/App.scss b/src/App.scss index 9e549b86..289add77 100644 --- a/src/App.scss +++ b/src/App.scss @@ -411,6 +411,10 @@ nav { --__horizontal-gap: 0.75em; --__vertical-gap: 0.5em; + &.-non-interactive { + cursor: auto; + } + &.-active, &:hover { border-top-width: 1px; diff --git a/src/components/list/list.vue b/src/components/list/list.vue index b8fcaf9d..c885bacd 100644 --- a/src/components/list/list.vue +++ b/src/components/list/list.vue @@ -7,7 +7,7 @@ v-for="item in items" :key="getKey(item)" class="list-item" - :class="getClass(item)" + :class="[getClass(item), nonInteractive ? '-non-interactive' : '']" role="listitem" > <slot @@ -38,6 +38,10 @@ export default { getClass: { type: Function, default: item => '' + }, + nonInteractive: { + type: Boolean, + default: false } } } diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js index ae8dc5f4..e82a0a83 100644 --- a/src/components/list/list_item.style.js +++ b/src/components/list/list_item.style.js @@ -3,7 +3,7 @@ export default { selector: '.list-item', states: { active: '.-active', - hover: ':hover' + hover: ':hover:not(.-non-interactive)' }, validInnerComponents: [ 'Text', diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index e54132d6..3d3a5ff0 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -29,11 +29,13 @@ <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(item) }" + @click.stop="toggle(!isSelected(item), item)" > <div class="selectable-list-checkbox-wrapper"> <Checkbox :model-value="isSelected(item)" @update:model-value="checked => toggle(checked, item)" + @click.stop /> </div> <slot diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 042d5221..011f32da 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -75,7 +75,7 @@ :label="$t('user_card.followees')" :disabled="!user.friends_count" > - <FriendList :user-id="userId"> + <FriendList :user-id="userId" :non-interactive="true"> <template #item="{item}"> <FollowCard :user="item" /> </template> @@ -87,7 +87,7 @@ :label="$t('user_card.followers')" :disabled="!user.followers_count" > - <FollowerList :user-id="userId"> + <FollowerList :user-id="userId" :non-interactive="true"> <template #item="{item}"> <FollowCard :user="item" |