girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-18 06:07:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add "Show Github Icon" option to settings page

Browse source
This commit is contained in:
qier222 2020-10-24 15:02:45 +08:00
parent 61bb636f17
commit defb8fb565
3 changed files with 108 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/views/settings.vue
View file

@ -57,6 +57,22 @@
</select>
</div>
</div>
<div class="item">
<div class="left">
<div class="title"> Show Github Icon </div>
</div>
<div class="right">
<div class="toggle">
<input
type="checkbox"
name="show-github-icon"
id="show-github-icon"
v-model="showGithubIcon"
/>
<label for="show-github-icon"></label>
</div>
</div>
</div>
</div>
</div>
</template>
@ -85,6 +101,18 @@ export default {
this.$store.commit("changeMusicQuality", value);
},
},
showGithubIcon: {
get() {
if (this.settings.showGithubIcon === undefined) return true;
return this.settings.showGithubIcon;
},
set(value) {
this.$store.commit("updateSettings", {
key: "showGithubIcon",
value,
});
},
},
},
methods: {
logout() {
@ -181,6 +209,7 @@ h2 {
.item {
margin: 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
.title {
@ -205,4 +234,72 @@ h2 {
}
}
}
.beforeAnimation {
-webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
}
.afterAnimation {
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04),
0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
-webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
}
.toggle {
margin: auto;
background: white;
}
.toggle input {
opacity: 0;
position: absolute;
}
.toggle input + label {
position: relative;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
height: 32px;
width: 68px;
background: #f5f5f7;
border-radius: 8px;
}
.toggle input + label:before {
content: "";
position: absolute;
display: block;
-webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
height: 32px;
width: 68px;
top: 0;
left: 0;
border-radius: 8px;
}
.toggle input + label:after {
content: "";
position: absolute;
display: block;
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.02), 0 4px 0px 0 hsla(0, 0%, 0%, 0.01),
0 4px 9px hsla(0, 0%, 0%, 0.08), 0 3px 3px hsla(0, 0%, 0%, 0.03);
-webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
background: #fff;
height: 20px;
width: 28px;
top: 6px;
left: 6px;
border-radius: 6px;
}
.toggle input:checked + label:before {
background: #335eea;
-webkit-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
}
.toggle input:checked + label:after {
left: 34px;
}
</style>