Skip to content

Commit

Permalink
Merge pull request #70 from RadKod/feature/69
Browse files Browse the repository at this point in the history
feat: ux improvements
  • Loading branch information
selimdoyranli authored Jun 4, 2024
2 parents bea794c + d3c193c commit f99d846
Show file tree
Hide file tree
Showing 15 changed files with 330 additions and 42 deletions.
4 changes: 4 additions & 0 deletions assets/style/css/variables/box-shadow.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:root {
--box-shadow-01: 0 5px 30px rgba(156, 160, 171, 0.25);
}

.dark-mode {
--box-shadow-01: 0 5px 30px rgba(0, 0, 0, 0.25);
}
6 changes: 3 additions & 3 deletions assets/style/css/variables/color.css
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,9 @@
--color-icon-01: #aaa;

/* Interactive */
--color-hover-01: #fafafa;
--color-hover-02: #fff;
--color-active-01: #ededed;
--color-hover-01: #383838;
--color-hover-02: #272727;
--color-active-01: #383838;
--color-selected-01: #121212;
--color-disabled-01: #626262;
--color-highlight-01: #ff7878;
Expand Down
79 changes: 79 additions & 0 deletions components/Dropdown/FilterDropdown/FilterDropdown.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
.filter-dropdown {
$v-dropdown-menu: '.v-dropdown-menu';

#{$v-dropdown-menu} {
&__trigger {
position: relative;
}

&__container {
padding: calc(var(--base-p-y) / 2) calc(var(--base-p-x) / 2);
color: var(--color-text-02);
background-color: var(--color-ui-02);
border: 1px solid var(--color-border-01);
border-radius: var(--border-radius-01);
box-shadow: var(--box-shadow-01);
margin-block-start: $spacer;
}
}

&-trigger-button {
$van-button: '.van-button';

display: flex;
color: var(--color-text-02);
background-color: var(--color-ui-02);
border: 1px solid var(--color-border-02);

#{$van-button} {
&__text {
display: flex;
align-items: center;
}
}

&__icon {
width: 16px;
height: 16px;
margin-inline-end: $spacer;
color: var(--color-icon-02);

svg {
width: 100% !important;
height: 100% !important;
}
}
}

&-nav {
position: relative;

&-item {
display: flex;
align-items: flex-start;
padding: calc(var(--base-p-y) / 2) calc(var(--base-p-x) / 2);
color: var(--color-text-02);
border-radius: var(--border-radius-01);
cursor: pointer;

&:hover {
background-color: var(--color-hover-01);
}

&__icon {
margin-inline-end: calc(var(--base-p-x) / 2);
width: 16px;
height: 16px;

svg {
width: 100% !important;
height: 100% !important;
}
}

&__title {
font-size: var(--font-size-text-9);
}
}
}
}
82 changes: 82 additions & 0 deletions components/Dropdown/FilterDropdown/FilterDropdown.component.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<template lang="pug">
.filter-dropdown.dropdown
DropdownMenu(
v-bind="$attrs"
withDropdownCloser
:direction="$attrs.direction || 'right'"
:overlay="false"
:is-open="isOpen"
@closed="onClose"
)
template(#trigger)
Button.filter-dropdown-trigger-button(size="small" round)
template(v-if="selectedOption && Object.keys(selectedOption).length > 0")
AppIcon.filter-dropdown-trigger-button__icon(:name="selectedOption.icon")
span.filter-dropdown-trigger-button__title {{ selectedOption.label }}
template(v-else)
AppIcon.filter-dropdown-trigger-button__icon(name="tabler:list-details")
span.filter-dropdown-trigger-button__title {{ title }}
template(#body)
nav.filter-dropdown-nav(v-if="options?.length > 0")
template(v-for="(item, index) in options")
.filter-dropdown-nav-item(:key="index" dropdown-closer @click="handleOptionSelect(item)")
AppIcon.filter-dropdown-nav-item__icon(v-if="item.icon" :name="item.icon" :width="20" :height="20")
span.filter-dropdown-nav-item__title {{ item.label }}
</template>

<script>
import { defineComponent, ref, useContext, computed } from '@nuxtjs/composition-api'
import DropdownMenu from 'v-dropdown-menu'
import 'v-dropdown-menu/dist/v-dropdown-menu.css'
import { AppIcon } from '@/components/Icon'
import { Button } from 'vant'
export default defineComponent({
components: {
DropdownMenu,
AppIcon,
Button
},
props: {
title: {
type: String,
required: false,
default: null
},
options: {
type: Array,
required: true,
default: () => []
}
},
setup(props, { emit }) {
const context = useContext()
const isOpen = ref(false)
const onClose = () => {
isOpen.value = false
}
const triggerTitle = computed(() => props.title || context.i18n.t('general.filter'))
const selectedOption = ref({})
const handleOptionSelect = option => {
selectedOption.value = option
emit('on-select-option', option)
}
return {
isOpen,
onClose,
triggerTitle,
selectedOption,
handleOptionSelect
}
}
})
</script>

<style lang="scss" src="./FilterDropdown.component.scss"></style>
1 change: 1 addition & 0 deletions components/Dropdown/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as FilterDropdown } from './FilterDropdown/FilterDropdown.component'
71 changes: 40 additions & 31 deletions components/List/RoomList/RoomList.component.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,40 +22,49 @@
template(v-else)
List
template(v-for="room in list.items")
Cell.room-list-item(v-if="room.isListed" is-link :to="localePath({ name: 'CreatorMode-CreatorModeRoom', query: { id: room.id } })")
template(#title)
span.room-list-item__title {{ room.title }}

template(#label)
.room-list-item-badge.room-list-item-badge--user.d-flex.d-mobile-none(v-if="room.user")
PlayerAvatar(:size="16" :name="room.user.fingerprint")
span.room-list-item-badge__value {{ room.user.username }}

.room-list-item__badges
.room-list-item-badge.room-list-item-badge--user(v-if="room.user")
NuxtLink(
:to="localePath({ name: 'CreatorMode-CreatorModeRoom', query: { id: room.id } })"
:title="room.title"
@click.native.prevent.capture="localePath({ name: 'CreatorMode-CreatorModeRoom', query: { id: room.id } })"
)
Cell.room-list-item(
v-if="room.isListed"
is-link
:to="localePath({ name: 'CreatorMode-CreatorModeRoom', query: { id: room.id } })"
)
template(#title)
span.room-list-item__title {{ room.title }}

template(#label)
.room-list-item-badge.room-list-item-badge--user.d-flex.d-mobile-none(v-if="room.user")
PlayerAvatar(:size="16" :name="room.user.fingerprint")
span.room-list-item-badge__value {{ room.user.username }}

.room-list-item-badge(v-if="room.questionCount")
AppIcon.room-list-item-badge__icon(name="tabler:help-circle" color="var(--color-text-03)" :width="16" :height="16")
span.room-list-item-badge__value {{ room.questionCount }}

.room-list-item-badge(v-if="room.viewCount")
AppIcon.room-list-item-badge__icon(name="tabler:eye" color="var(--color-text-03)" :width="16" :height="16")
span.room-list-item-badge__value {{ room.viewCount }}

.room-list-item-badge.room-list-item-badge--rating(v-if="room.rating")
StarRating(
read-only
inline
:show-rating="false"
:rating="room.rating"
:increment="0.1"
:rounded-corners="false"
:star-size="14"
)
label {{ String(formatRating(room.rating)) }}
span.room-list-item__id ID: {{ room.id }}
.room-list-item__badges
.room-list-item-badge.room-list-item-badge--user(v-if="room.user")
PlayerAvatar(:size="16" :name="room.user.fingerprint")
span.room-list-item-badge__value {{ room.user.username }}

.room-list-item-badge(v-if="room.questionCount")
AppIcon.room-list-item-badge__icon(name="tabler:help-circle" color="var(--color-text-03)" :width="16" :height="16")
span.room-list-item-badge__value {{ room.questionCount }}

.room-list-item-badge(v-if="room.viewCount")
AppIcon.room-list-item-badge__icon(name="tabler:eye" color="var(--color-text-03)" :width="16" :height="16")
span.room-list-item-badge__value {{ room.viewCount }}

.room-list-item-badge.room-list-item-badge--rating(v-if="room.rating")
StarRating(
read-only
inline
:show-rating="false"
:rating="room.rating"
:increment="0.1"
:rounded-corners="false"
:star-size="14"
)
label {{ String(formatRating(room.rating)) }}
span.room-list-item__id ID: {{ room.id }}

InfiniteLoading(@infinite="handleInfiniteLoading")
</template>
Expand Down
10 changes: 9 additions & 1 deletion locales/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ export default {
share: 'Share',
by: 'By',
comments: 'Comments',
noData: 'No data'
noData: 'No data',
filter: 'Filter',
sort: 'Sort'
},
introScene: {
title: 'CHOOSE GAME MODE',
Expand Down Expand Up @@ -242,6 +244,12 @@ export default {
rooms: {
pendingRooms: 'Fetching rooms',
selectFromList: 'SELECT FROM LIST',
filters: {
title: 'FILTERS',
recently: 'Recent rooms',
oldest: 'Old rooms',
byViewCount: 'Most viewed'
},
refresh: 'REFRESH',
searchField: {
placeholder: 'Search room'
Expand Down
10 changes: 9 additions & 1 deletion locales/tr.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ export default {
share: 'Paylaş',
by: 'tarafından',
comments: 'Yorumlar',
noData: 'Veri yok'
noData: 'Veri yok',
filter: 'Filtrele',
sort: 'Sırala'
},
introScene: {
title: 'OYUN MODU SEÇ',
Expand Down Expand Up @@ -241,6 +243,12 @@ export default {
rooms: {
pendingRooms: 'Odalar getiriliyor',
selectFromList: 'LİSTEDEN SEÇ',
filters: {
title: 'SIRALA',
recently: 'En yeni odalar',
oldest: 'En eski odalar',
byViewCount: 'En çok oynanan odalar'
},
refresh: 'TAZELE',
searchField: {
placeholder: 'Oda ara'
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"simple-keyboard": "^3.4.65",
"swiper": "^8.0.6",
"textfit": "^2.4.0",
"v-dropdown-menu": "1.3.2",
"vant": "^2.12.54",
"vue-infinite-loading": "^2.4.5",
"vue-star-rating": "^1.7.0",
Expand Down Expand Up @@ -106,4 +107,4 @@
"path": "cz-conventional-changelog"
}
}
}
}
35 changes: 35 additions & 0 deletions pages/CreatorMode/CreatorModeRooms/CreatorModeRooms.page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,41 @@
}

&-rooms {
&-head {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;

@include media-breakpoint-down(mobile) {
flex-direction: column;
align-items: flex-start;
}

&__actions {
display: flex;
align-items: center;
justify-content: space-between;

@include media-breakpoint-down(mobile) {
margin-block-end: var(--base-m-y);
}

.filter-dropdown {
$v-dropdown-menu: '.v-dropdown-menu';

#{$v-dropdown-menu} {
&__container {
@include media-breakpoint-down(mobile) {
right: auto;
left: 0;
}
}
}
}
}
}

&__refetchButton {
color: var(--color-text-02);
background-color: var(--color-ui-02);
Expand Down
Loading

0 comments on commit f99d846

Please sign in to comment.