Skip to content

Commit

Permalink
Studio levels
Browse files Browse the repository at this point in the history
  • Loading branch information
@TigerHix
TigerHix committed Jun 9, 2019
1 parent c2d31e8 commit f73dd6d
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 29 deletions.
38 changes: 36 additions & 2 deletions src/assets/styles/theme.less
View file
Expand Up @@ -28,8 +28,8 @@
@disabled-color: rgba(255, 255, 255, .4); // disable state color
@body-background: @shade1;
@component-background : @shade3;
@border-color-base: @shade5; // base border outline a component
@border-color-split: @shade4; // split border inside a component
@border-color-base: @shade1; // base border outline a component
@border-color-split: @shade2; // split border inside a component
@background-color-light: @shade4; // background of header and selected item
@background-color-base: @shade2; // Default grey background color
@item-hover-bg: @shade1;
Expand Down Expand Up @@ -212,6 +212,24 @@
border-color: white;
}

.ant-modal-header {
padding: 24px;
border-bottom: none;
}

.ant-modal-title {
font-weight: bold;
}

.ant-modal-body {
padding: 0 24px;
}

.ant-modal-footer {
padding: 24px;
border-top: none;
}

// Custom styles

body {
Expand Down Expand Up @@ -357,3 +375,19 @@ h2 {
background: linear-gradient(to right bottom, @shade4, @shade5);
color: white;
}

.icon-button {
padding: 0 8px;
opacity: .3;
border: none;
background: none;
transition: 0.4s @hoverEasing;
&:hover {
opacity: 1;
color: @theme5;
}
&:active {
opacity: 0.7;
transform: scale(0.9, 0.9);
}
}
1 change: 1 addition & 0 deletions src/components/level/LevelCard.vue
View file
Expand Up @@ -147,6 +147,7 @@ p {
}
.card-wrap {
margin: 8px;
transform: perspective(800px);
transform-style: preserve-3d;
cursor: default;
Expand Down
23 changes: 19 additions & 4 deletions src/components/studio/UploadLevel.vue
View file
Expand Up @@ -6,10 +6,11 @@ a-upload-dragger(
:remove="removeUploadedFile"
@change="uploadStatusChanged"
)
p.ant-upload-drag-icon
a-icon(type="inbox")
p.ant-upload-text Click or drag your .cytoidlevel to this area
p.ant-upload-hint Some other descriptions
font-awesome-icon(:icon="['fas', 'upload']" fixed-width style="font-size: 32px; margin-top: 16px; margin-bottom: 16px;")
p.ant-upload-text(style="font-weight: bold;") Click or drag a Cytoid level to this area
p.ant-upload-hint(style="color: rgba(255, 255, 255, 0.3);") Don't know how to create one? Read our
a(href="https://github.com/Cytoid/Cytoid/wiki/a.-Creating-a-level") wiki
span !
</template>

<script>
Expand Down Expand Up @@ -71,3 +72,17 @@ export default {
},
}
</script>
<style lang="less">
.ant-upload.ant-upload-drag {
transition: 0.4s @hoverEasing;
border: none;
background-color: #FF3CAC;
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
box-shadow: 0 0 0 0 hsla(226, 68%, 67%, 0.5);
&:hover {
transition: 0.4s @hoverEasing;
box-shadow: 0 0 0 2px hsla(226, 68%, 67%, 0.5);
}
}
</style>
4 changes: 4 additions & 0 deletions src/pages/levels/_id/index.vue
View file
Expand Up @@ -282,5 +282,9 @@ export default {
background-position: -180px;
transition: all 0.4s @hoverEasing;
}
&:active {
transform: scale(0.95, 0.95);
box-shadow: @ele1;
}
}
</style>
12 changes: 10 additions & 2 deletions src/pages/levels/index.vue
View file
Expand Up @@ -10,8 +10,16 @@
a-select-option(value="rating") Rating
a-button(@click="(filters.order = (filters.order === 'asc' ? 'desc' : 'asc')) && updateRoute()" :disabled="loading" style="margin-left: 8px;")
font-awesome-icon(:icon="filters.order === 'asc' ? 'sort-up' : 'sort-down'")
.level-card-container
level-card(v-for="level in levels" :key="level.id" :level="level")
a-row(type="flex" justify="center" style="margin-left: -8px; margin-right: -8px;")
a-col(
v-for="level in levels"
:key="level.id"
:xs="{ span: 24 }"
:sm="{ span: 12 }"
:lg="{ span: 8 }"
:xxl="{ span: 6 }"
)
level-card(:level="level")
a-pagination(
:disabled="loading"
v-model="page"
Expand Down
2 changes: 1 addition & 1 deletion src/pages/studio.vue
View file
Expand Up @@ -15,7 +15,7 @@
li: a
font-awesome-icon(:icon="['far', 'file-signature']" fixed-width)
span.menu-text Posts
.column: nuxt
.column.is-three-quarters: nuxt
</template>

<script>
Expand Down
148 changes: 128 additions & 20 deletions src/pages/studio/levels.vue
View file
@@ -1,21 +1,62 @@
<template lang="pug">
a-list(
itemLayout="vertical"
:data-source="levels"
:loading="levels_loading"
@change="handleTableChange"
)
upload-level(slot="header")
a-list-item(slot="renderItem" slot-scope="item, index" key="item.id")
img(slot="extra" width="128" height="80" :src="item.bundle.background")
a-list-item-meta(
description="Test desc"
:title="item.title"
div
a-modal(
title="Change level visibility"
v-model="change_visibility_modal_visible"
:closable="false"
@ok="changeVisibility"
)
template(slot="actions")
span
font-awesome-icon(icon="heart").icon
| {{item.rating || 'Unknown' }}
a-radio-group(v-model="change_visibility_value" size="large")
a-radio-button(:value="'public'") Public
a-radio-button(:value="'unlisted'") Unlisted
div(style="padding-top: 16px;")
template(v-if="change_visibility_value === 'public'")
p This level is visible to everybody.
template(v-if="change_visibility_value === 'unlisted'")
p(style="font-weight: bold;") This level is only visible to anybody who has the link.
p This level won't appear to viewers who visit the level listing or your profile. It also won't appear in the search results.
span(style="font-weight: bold;") However, it is visible in a public collection which contains the level.
div(style="color: rgba(255, 255, 255, 0.7); font-weight: bold; margin-bottom: 16px;")
p Upload
upload-level(slot="header")
div(style="color: rgba(255, 255, 255, 0.7); font-weight: bold; margin-top: 16px; margin-bottom: 16px")
p Manage
a-card(class="studio-levels-card ele2")
a-table(
class="studio-levels-table"
:columns="columns"
:row-key="level => level.id"
:data-source="levels"
:pagination="levels_pagination"
:loading="levels_loading"
:scroll="{ x: 800 }"
@change="handleTableChange"
)
template(slot="metadata" slot-scope="text, record")
div(style="display: flex; flex-direction: row;")
a(class="level-thumbnail" :href="'/levels/' + record.uid")
img(:src="record.bundle.background" style="width: 128px; height: 80px; object-fit: cover; border-radius: 4px;")
div(style="margin-left: 8px")
p(style="margin-left: 8px; padding-top: 8px; margin-bottom: 0;") {{ record.title }}
p(style="margin-left: 8px; font-size: 10px; color: rgba(255, 255, 255, 0.3);") {{ 'ID: ' + record.uid }}
div
a-button(class="icon-button")
font-awesome-icon(:icon="['fas', 'download']" fixed-width)
a-button(class="icon-button")
font-awesome-icon(:icon="['fas', 'edit']" fixed-width)
a-button(class="icon-button")
font-awesome-icon(:icon="['fas', 'trash']" fixed-width)
template(v-slot:unlisted="unlisted")
a.ant-dropdown-link(href="#" @click="showChangeVisibilityModel")
span {{ unlisted ? "Unlisted" : "Public" }}
font-awesome-icon(:icon="['fas', 'caret-down']" fixed-width)
template(v-slot:creation_date="creation_date") {{ creation_date }}
template(v-slot:rating="rating")
div(style="display: flex;")
font-awesome-icon(:icon="['fas', 'star']" fixed-width style="margin-top: 2px; margin-right: 4px;")
span(style="white-space: nowrap;") {{ (Math.floor(10 * 0.5 * 100) / 100).toFixed(2) + ' (' + 27 + ')' }}
template(v-slot:downloads="downloads") {{ downloads }}
template(v-slot:plays="plays") {{ plays }}
</template>

<script>
Expand All @@ -25,6 +66,49 @@ export default {
UploadLevel,
},
data() {
const columns = [
{
title: 'Level',
scopedSlots: {
customRender: 'metadata'
}
},
{
title: 'Visibility',
dataIndex: 'unlisted',
scopedSlots: {
customRender: 'unlisted'
}
},
{
title: 'Downloads',
dataIndex: 'downloads',
scopedSlots: {
customRender: 'downloads'
}
},
{
title: 'Plays',
dataIndex: 'plays',
scopedSlots: {
customRender: 'plays'
}
},
{
title: 'Rating',
dataIndex: 'rating',
scopedSlots: {
customRender: 'rating'
}
},
{
title: 'Date',
dataIndex: 'creation_date',
scopedSlots: {
customRender: 'creation_date'
}
},
]
return {
levels: [],
levels_pagination: {
Expand All @@ -34,20 +118,30 @@ export default {
current: 1,
},
levels_loading: false,
change_visibility_modal_visible: false,
change_visibility_value: null,
columns
}
},
mounted() {
this.fetchLevels()
},
methods: {
showChangeVisibilityModel() {
this.change_visibility_modal_visible = true
},
changeVisibility() {
// TODO: API request
this.change_visibility_modal_visible = false
},
handleTableChange(pagination, filters, sorter) {
this.levels_pagination = pagination
this.fetchLevels()
},
fetchLevels() {
this.levels_loading = true
this.$axios.get(`/levels`, { params: {
uploader: this.$auth.user.id,
// uploader: this.$auth.user.id,
page: this.levels_pagination.current - 1,
limit: this.levels_pagination.pageSize,
sort: 'creation_date',
Expand All @@ -63,14 +157,28 @@ export default {
}
</script>

<style scoped>
<style lang="less" scoped>
.ant-list-item-extra img {
width: 128px;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
.icon {
margin-right: 0.5rem;
.level-thumbnail {
display: flex;
align-items: center;
transition: 0.4s @hoverEasing;
&:hover {
filter: brightness(50%);
}
}
</style>

<style lang="less">
.studio-levels-card .ant-card-body {
padding: 24px 16px;
}
.studio-levels-table .ant-table-thead > tr > th, .studio-levels-table .ant-table-tbody > tr > td {
padding: 8px;
}
</style>

0 comments on commit f73dd6d

Please sign in to comment.