evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

build: updated webui to v1.1.0; style: fixed home "open settings" button; style: updated updateAvailable notification; style: changed default theme to dark; bump: tailwindcss to 1.9

Browse Source
This commit is contained in:
Roberto Tonino 2020-10-13 21:07:56 +02:00
parent be5eb52446
commit 34102101bd
8 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -5326,9 +5326,9 @@
} }
}, },
"tailwindcss": { "tailwindcss": {
"version": "1.8.12", "version": "1.9.1",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.8.12.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.9.1.tgz",
"integrity": "sha512-VChYp+4SduP8hHFAmf75P5Yf0qNQi3oSSnpEMKkC6kWW/9K+SizRgbmllqLJLnTZq+eM3TDwvn1jWXvvg+dfDA==", "integrity": "sha512-3faxlyPlcWN8AoNEIVQFNsDcrdXS/D9nOGtdknrXvZp4D4E3AGPO2KRPiGG69B2ZUO0V6RvYiW91L2/n9QnBxg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@fullhuman/postcss-purgecss": "^2.1.2", "@fullhuman/postcss-purgecss": "^2.1.2",

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "deemix-webui", "name": "deemix-webui",
"version": "1.0.0", "version": "1.1.0",
"homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md", "homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md",
"repository": { "repository": {
"type": "git", "type": "git",
@ -44,7 +44,7 @@
"rollup-plugin-terser": "^6.1.0", "rollup-plugin-terser": "^6.1.0",
"rollup-plugin-vue": "^4.2.0", "rollup-plugin-vue": "^4.2.0",
"sass": "^1.26.8", "sass": "^1.26.8",
"tailwindcss": "^1.8.12", "tailwindcss": "^1.9.1",
"vue-template-compiler": "^2.6.12" "vue-template-compiler": "^2.6.12"
} }
} }

2
public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr" data-theme="light"> <html lang="en" dir="ltr" data-theme="dark">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">

8
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

23
src/components/TheSidebar.vue
View File

@ -13,6 +13,11 @@
> >
<i class="material-icons side_icon">{{ link.icon }}</i> <i class="material-icons side_icon">{{ link.icon }}</i>
<span class="main_tablinks_text">{{ $t(link.label) }}</span> <span class="main_tablinks_text">{{ $t(link.label) }}</span>
<span
v-if="link.name === 'about' && updateAvailable"
id="update-notification"
class="bg-red-600 w-3 h-3 rounded-full"
></span>
</router-link> </router-link>
<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector"> <span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
@ -61,6 +66,12 @@
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
#update-notification {
position: absolute;
left: 30px;
top: 12px;
}
</style> </style>
<script> <script>
@ -73,6 +84,7 @@ export default {
activeTheme: 'light', activeTheme: 'light',
themes: ['purple', 'dark', 'light'], themes: ['purple', 'dark', 'light'],
activeTablink: 'home', activeTablink: 'home',
updateAvailable: false,
links: [ links: [
{ {
id: 'main_home_tablink', id: 'main_home_tablink',
@ -146,7 +158,7 @@ export default {
}) })
/* === Current theme handling === */ /* === Current theme handling === */
this.activeTheme = localStorage.getItem('selectedTheme') || 'light' this.activeTheme = localStorage.getItem('selectedTheme') || 'dark'
this.$router.afterEach((to, from) => { this.$router.afterEach((to, from) => {
const linkInSidebar = this.links.find(link => link.routerName === to.name) const linkInSidebar = this.links.find(link => link.routerName === to.name)
@ -157,13 +169,8 @@ export default {
}) })
/* === Add update notification near info === */ /* === Add update notification near info === */
updateNotification = document.createElement('span') socket.on('updateAvailable', () => {
updateNotification.id = "update-notification" this.updateAvailable = true
updateNotification.className = "hide"
document.getElementById("main_about_tablink").append(updateNotification)
socket.on('updateAvailable', function() {
document.getElementById("update-notification").classList.remove("hide")
}) })
}, },
methods: { methods: {

7
src/components/pages/About.vue
View File

@ -208,20 +208,23 @@ import ethereum from '@/assets/ethereum.svg'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
data: () => ({ data() {
return {
paypal, paypal,
ethereum, ethereum,
current: null, current: null,
latest: null, latest: null,
updateAvailable: false, updateAvailable: false,
deemixVersion: null deemixVersion: null
}), }
},
computed: { computed: {
...mapGetters(['getAboutInfo']) ...mapGetters(['getAboutInfo'])
}, },
methods: { methods: {
initUpdate(data) { initUpdate(data) {
const { currentCommit, latestCommit, updateAvailable, deemixVersion } = data const { currentCommit, latestCommit, updateAvailable, deemixVersion } = data
this.current = currentCommit this.current = currentCommit
this.latest = latestCommit this.latest = latestCommit
this.updateAvailable = updateAvailable this.updateAvailable = updateAvailable

2
src/components/pages/Home.vue
View File

@ -4,7 +4,7 @@
<section class="home_section" ref="notLogged" v-if="!isLoggedIn"> <section class="home_section" ref="notLogged" v-if="!isLoggedIn">
<p id="home_not_logged_text">{{ $t('home.needTologin') }}</p> <p id="home_not_logged_text">{{ $t('home.needTologin') }}</p>
<router-link tag="button" name="button" :to="{ name: 'Settings' }"> <router-link tag="button" name="button" :to="{ name: 'Settings' }" class="btn btn-primary">
{{ $t('home.openSettings') }} {{ $t('home.openSettings') }}
</router-link> </router-link>
</section> </section>

11
src/styles/scss/_sidebar.scss
View File

@ -99,15 +99,8 @@ $sidebar-delay: 75ms;
} }
/* Update Notification */ /* Update Notification */
#main_about_tablink { position:relative; } #main_about_tablink {
#update-notification { position: relative;
background-color: red;
width: 12px;
height: 12px;
border-radius: 6px;
position: absolute;
left: 30px;
top: 12px;
} }
/* Theme selector */ /* Theme selector */