Added Play and Shuffle icons to the list view
for making it more Apple-like
This commit is contained in:
parent
f275883728
commit
82b745a735
2 changed files with 41 additions and 16 deletions
|
@ -2062,6 +2062,31 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
|
||||
.md-ico-play {
|
||||
content:url("./assets/playPng.png");
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
margin-right: 1px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.md-ico-shuffle {
|
||||
content:url("./assets/shufflePng.png");
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
margin-right: 1px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.md-ico-remove {
|
||||
content:url("./assets/feather/x-circlePng.png");
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 1px;
|
||||
margin-bottom: -1.5px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.md-select {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
|
|
|
@ -62,20 +62,20 @@
|
|||
</div>
|
||||
</template>
|
||||
<div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
|
||||
<button class="md-btn" style="min-width: 120px;"
|
||||
@click="app.mk.shuffleMode = 0; play()">
|
||||
<button class="md-btn" style="min-width: 100px;"
|
||||
@click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
|
||||
Play
|
||||
</button>
|
||||
<button class="md-btn" style="min-width: 120px;"
|
||||
@click="app.mk.shuffleMode = 1;play()">
|
||||
<button class="md-btn" style="min-width: 100px;"
|
||||
@click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
|
||||
Shuffle
|
||||
</button>
|
||||
<button class="md-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
|
||||
@click="confirmButton()">
|
||||
<button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
|
||||
@click="confirmButton()"> <img class="md-ico-remove">
|
||||
{{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
|
||||
</button>
|
||||
<button class="md-btn" style="min-width: 120px;" v-if="confirm==true"
|
||||
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
|
||||
<button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
|
||||
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img class="md-ico-remove">
|
||||
Confirm?
|
||||
</button>
|
||||
<button class="more-btn-round" style="float:right;" @click="menu">
|
||||
|
@ -98,20 +98,20 @@
|
|||
</div>
|
||||
<div class="col-auto flex-center">
|
||||
<div>
|
||||
<button class="md-btn" style="min-width: 120px;"
|
||||
@click="app.mk.shuffleMode = 0; play()">
|
||||
<button class="md-btn" style="min-width: 100px;"
|
||||
@click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
|
||||
Play
|
||||
</button>
|
||||
<button class="md-btn" style="min-width: 120px;"
|
||||
@click="app.mk.shuffleMode = 1;play()">
|
||||
<button class="md-btn" style="min-width: 100px;"
|
||||
@click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
|
||||
Shuffle
|
||||
</button>
|
||||
<button class="md-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
|
||||
@click="confirmButton()">
|
||||
<button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
|
||||
@click="confirmButton()"> <img class="md-ico-remove">
|
||||
{{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
|
||||
</button>
|
||||
<button class="md-btn" style="min-width: 120px;" v-if="confirm==true"
|
||||
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
|
||||
<button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
|
||||
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img class="md-ico-remove">
|
||||
Confirm?
|
||||
</button>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue