mirrors/VueTorrent
1
0
Fork 0
mirror of https://github.com/VueTorrent/VueTorrent.git synced 2025-02-18 00:02:02 +03:00
Code Issues Projects Releases Packages Wiki Activity

small ui fixes

Browse source
This commit is contained in:
Daan Wijns 2021-01-23 13:40:44 +01:00
parent 74db87a304
commit c20cd06547
6 changed files with 61 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/Navbar/CurrentSpeed.vue
View file

@ -1,25 +1,35 @@
<template>
<div v-if="status">
<div class="text-uppercase white--text caption ml-4">
<div class="text-uppercase white--text caption ml-4 font-weight-medium">
current speed
</div>
<v-card color="secondary" flat class="mr-2 ml-2">
<v-layout row wrap class="pa-3 mt-1 project nav_download mx-auto">
<v-icon color="download">
<v-card color="secondary" flat class="mr-2 ml-2 text-center">
<v-layout row wrap class="py-3 px-1 mt-1 project mx-auto">
<v-icon class="mt-2" color="download" size="18px">
{{ mdiChevronDown }}
</v-icon>
<span class="download--text title">
{{ status.dlspeed | getDataValue(1) }}
<span class="font-weight-light caption">
<span
class="download--text title"
style="font-size: 1.1em !important;"
>
204.34
<span class="font-weight-light caption font-weight-regular">
{{ status.dlspeed | getDataUnit(1) }}/s
</span>
</span>
<v-icon class="pl-5" color="upload">
<v-icon
class="pl-2 mt-1"
color="upload"
size="24px"
>
{{ mdiChevronUp }}
</v-icon>
<span class="upload--text title">
{{ status.upspeed | getDataValue }}
<span class="font-weight-light caption">
<span
class="upload--text title"
style="font-size: 1.1em !important;"
>
204.34
<span class="font-weight-light caption font-weight-regular">
{{ status.upspeed | getDataUnit }}/s
</span>
</span>

36
src/components/Navbar/FilterSelect.vue
View file

@ -1,12 +1,16 @@
<template>
<div style="margin-top: 30px">
<div class="mt-1">
<label class="white--text text-uppercase font-weight-medium caption ml-4">
Status
</label>
<v-select
name="state_filter"
aria-label="state_filter"
:value="selectedState"
class="ml-2 mr-2"
label="STATUS"
solo
flat
solo
:items="options"
item-text="name"
color="download"
@ -14,12 +18,15 @@
background-color="secondary"
@input="setState"
/>
<label class="white--text text-uppercase font-weight-medium caption ml-4">
Category
</label>
<v-select
aria-label="category_filter"
:value="selectedCategory"
solo
flat
class="ml-2 mr-2 side-select"
solo
class="ml-2 mr-2"
label="CATEGORIES"
:items="availableCategories"
item-text="name"
@ -29,12 +36,15 @@
@input="setCategory"
/>
<div v-if="showTrackerFilter">
<label class="white--text text-uppercase font-weight-medium caption ml-4">
Tracker
</label>
<v-select
aria-label="tracker_filter"
:value="selectedTracker"
solo
flat
class="ml-2 mr-2 side-select"
solo
class="ml-2 mr-2"
label="TRACKER"
:items="availableTrackers"
item-text="name"
@ -44,12 +54,6 @@
@input="setTracker"
/>
</div>
<div
style="font-size: 0.9em"
class="download--text text-uppercase text-center"
>
{{ torrentCountString }}
</div>
</div>
</template>
@ -78,7 +82,7 @@ export default {
selectedTracker: null
}),
computed: {
...mapGetters(['getCategories', 'getTrackers', 'getTorrentCountString']),
...mapGetters(['getCategories', 'getTrackers']),
...mapState(['sort_options']),
availableCategories() {
const categories = [
@ -105,9 +109,6 @@ export default {
}
return trackers
},
torrentCountString() {
return this.getTorrentCountString()
}
},
mounted() {
@ -148,5 +149,8 @@ export default {
.v-select__slot > label {
color: white !important;
}
#app .v-select .v-text-field__details {
display: none;
}
</style>

14
src/components/Navbar/Navbar.vue
View file

@ -43,6 +43,7 @@
<SpeedGraph v-if="webuiSettings.showSpeedGraph" />
<div class="mt-4" />
<FilterSelect :show-tracker-filter="webuiSettings.showTrackerFilter" />
<SessionStats
v-if="webuiSettings.showSessionStat"
:status="status"
@ -52,7 +53,13 @@
v-if="webuiSettings.showFreeSpace"
:space="status.freeDiskSpace"
/>
<FilterSelect :show-tracker-filter="webuiSettings.showTrackerFilter" />
<div
style="font-size: 0.9em"
class="download--text text-uppercase text-center mt-5"
>
{{ torrentCountString }}
</div>
<div class="mt-auto">
<BottomActions />
</div>
@ -90,12 +97,15 @@ export default {
}
},
computed: {
...mapGetters(['getTheme', 'getWebuiSettings', 'getStatus']),
...mapGetters(['getTheme', 'getWebuiSettings', 'getStatus', 'getTorrentCountString']),
webuiSettings() {
return this.getWebuiSettings()
},
status() {
return this.getStatus()
},
torrentCountString() {
return this.getTorrentCountString()
}
},
created() {

2
src/components/Navbar/NavbarActions.vue
View file

@ -17,7 +17,7 @@
<template #activator="{ on }">
<v-list-item link v-on="on" @click="toggleSpeed">
<v-icon
color="white"
:color="altSpeed ? 'accent' : 'white'"
>
{{ altSpeed ? mdiSpeedometerSlow : mdiSpeedometer }}
</v-icon>

12
src/components/Navbar/SessionStats.vue
View file

@ -1,9 +1,9 @@
<template>
<div v-if="status">
<div class="text-uppercase white--text caption ml-4">
<div v-if="status" class="mt-3">
<label class="text-uppercase white--text caption font-weight-medium ml-4">
Session Stats
</div>
<v-card flat color="secondary" class="mr-2 ml-2">
</label>
<v-card flat color="secondary" class="mr-2 ml-2 mb-4">
<v-layout row wrap class="pa-3 mt-1 project mx-auto">
<v-flex md6>
<div
@ -23,8 +23,8 @@
</v-flex>
</v-layout>
</v-card>
<v-card flat color="secondary" class="ml-2 mr-2 mt-1">
<v-layout row wrap class="pa-3 project mx-auto">
<v-card flat color="secondary" class="ml-2 mr-2">
<v-layout row wrap class="pa-3 mt-1 project mx-auto">
<v-flex md6>
<div
style="margin-top: 6px"

2
src/views/Dashboard.vue
View file

@ -2,7 +2,7 @@
<div class="px-1 px-sm-5 pt-4 background" @click.self="resetSelected">
<v-row no-gutters class="grey--text">
<v-col>
<h1 style="font-size: 1.3em !important" class="subtitle-1 ml-2">
<h1 style="font-size: 1.6em !important" class="subtitle-1 ml-2">
Dashboard
</h1>
</v-col>