Skip to content

Commit

Permalink
Use Bootstrap grid for panel
Browse files Browse the repository at this point in the history 
Use the standard Bootstrap grid system (`row` and `col`) for the music
panel.

This simplifies the template structure as well as the CSS.
  • Loading branch information
@DocMarty84
DocMarty84 committed Sep 30, 2019
1 parent 89a9810 commit d59a2a5
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 122 deletions.
36 changes: 18 additions & 18 deletions static/src/js/panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ var Panel = Widget.extend({
start: function () {
var self = this;
return this._super.apply(this, arguments).then(function() {
self.$el.find('.oom_shuffle_off').closest('li').hide();
self.$el.find('.oom_repeat_off').closest('li').hide();
self.$el.find('.oom_shuffle_off').hide();
self.$el.find('.oom_repeat_off').hide();
self._play(self.init_id, {play_now: false});
self._startPolling();
});
Expand Down Expand Up @@ -123,17 +123,17 @@ var Panel = Widget.extend({
return;
}
this.sound.play();
this.$el.find('.oom_pause').closest('li').show();
this.$el.find('.oom_play').closest('li').hide();
this.$el.find('.oom_pause').show();
this.$el.find('.oom_play').hide();
},

pause: function () {
if (!this.sound) {
return;
}
this.sound.pause();
this.$el.find('.oom_pause').closest('li').hide();
this.$el.find('.oom_play').closest('li').show();
this.$el.find('.oom_pause').hide();
this.$el.find('.oom_play').show();
},

stop: function (play_now, keep_loaded) {
Expand Down Expand Up @@ -267,11 +267,11 @@ var Panel = Widget.extend({
if (params.play_now) {
this.sound_seek_last_played = 0;
this.sound.play();
this.$el.find('.oom_pause').closest('li').show();
this.$el.find('.oom_play').closest('li').hide();
this.$el.find('.oom_pause').show();
this.$el.find('.oom_play').hide();
} else {
this.$el.find('.oom_pause').closest('li').hide();
this.$el.find('.oom_play').closest('li').show();
this.$el.find('.oom_pause').hide();
this.$el.find('.oom_play').show();
}

// Reset next sound
Expand Down Expand Up @@ -461,26 +461,26 @@ var Panel = Widget.extend({

_onClickShuffle: function () {
this.shuffle = true;
this.$el.find('.oom_shuffle_off').closest('li').show();
this.$el.find('.oom_shuffle').closest('li').hide();
this.$el.find('.oom_shuffle_off').show();
this.$el.find('.oom_shuffle').hide();
},

_onClickShuffleOff: function () {
this.shuffle = false;
this.$el.find('.oom_shuffle').closest('li').show();
this.$el.find('.oom_shuffle_off').closest('li').hide();
this.$el.find('.oom_shuffle').show();
this.$el.find('.oom_shuffle_off').hide();
},

_onClickRepeat: function () {
this.repeat = true;
this.$el.find('.oom_repeat_off').closest('li').show();
this.$el.find('.oom_repeat').closest('li').hide();
this.$el.find('.oom_repeat_off').show();
this.$el.find('.oom_repeat').hide();
},

_onClickRepeatOff: function () {
this.repeat = false;
this.$el.find('.oom_repeat').closest('li').show();
this.$el.find('.oom_repeat_off').closest('li').hide();
this.$el.find('.oom_repeat').show();
this.$el.find('.oom_repeat_off').hide();
},

_onClickStar: function () {
Expand Down
72 changes: 22 additions & 50 deletions static/src/scss/panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,65 +11,37 @@ $background_color_1: #F0EEEE;
z-index: 100;
box-shadow: 2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8);

.oom_albumart {
background-color: $background_color_1;
.oom_panel_left {
float: left;
width: 90px;
height: 90px;
left: 0px;
}

.oom_time_holder {
.oom_title {
text-align: center;
}

.oom_current_time {
float: left;
margin-left: 5px;
}

.oom_duration {
float: right;
margin-right: 5px;
}
}

.oom_controls {
position: absolute;
left: 50%;
padding: 0;
margin-left: -180px;

li {
display: inline-block;
.oom_albumart {
background-color: $background_color_1;
width: 90px;
height: 90px;
}
}

.oom_volume_toggles {
position: absolute;
left: 50%;
padding: 0;
.oom_panel_right {
float: none;

li {
display: inline;
.container {
max-width: 100%;

.oom_volume_bar {
position: absolute;
width: 60px;
top: 10px;
// Avoid padding so progressbar takes the whole width.
.oom_nopad {
padding-left: 0px;
padding-right: 0px;
}
@media (min-width: 576px) {
&.oom_nopad_container {
padding-left: 0px;
padding-right: 0px;
}
}
}
}

.oom_toggles {
position: absolute;
left: 50%;
padding: 6px;
margin-left: 80px;

li {
display: inline-block;
.oom_title {
@include o-text-overflow;
}
}
}
}
117 changes: 63 additions & 54 deletions static/src/xml/panel.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,69 +3,78 @@

<t t-name="oomusic.Panel">
<div class="oom_panel">
<t t-call="oomusic.Albumart"/>
<div>
<div>
<div>
<!-- Progress bar -->
<div class="oom_progress progress" style="height:18px">
<div class="oom_progress_bar progress-bar progress-bar-striped"
role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width:0%;height:18px">
<div class="oom_panel_left d-none d-sm-block">
<t t-call="oomusic.Albumart"/>
</div>
<div class="oom_panel_right">
<div class="container oom_nopad_container">
<!-- Progress bar -->
<div class="row">
<div class="col oom_nopad">
<div class="oom_progress oom_nopad progress col-sm" style="height:18px">
<div class="oom_progress_bar progress-bar progress-bar-striped"
role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width:0%;height:18px">
</div>
</div>
</div>
<!-- Duration and Title-->
<div class="oom_time_holder">
<t t-call="oomusic.Title"/>
</div>
<!-- Duration and Title-->
<div class="row">
<div class="col-xs-1">
<t t-call="oomusic.CurrentTime"/>
</div>
<div class="col text-center">
<t t-call="oomusic.Title"/>
</div>
<div class="col-xs-1 text-right d-none d-sm-block">
<t t-call="oomusic.Duration"/>
</div>
</div>
<ul class="oom_controls">
<li><a class="oom_previous btn btn-lg" tabindex="1">
<span class="fa fa-step-backward"></span>
</a></li>
<li><a class="oom_play btn btn-lg" tabindex="1">
<span class="fa fa-play"></span>
</a></li>
<li><a class="oom_pause btn btn-lg" tabindex="1">
<span class="fa fa-pause"></span>
</a></li>
<li><a class="oom_next btn btn-lg" tabindex="1">
<span class="fa fa-step-forward"></span>
</a></li>
<li><a class="oom_stop btn btn-lg" tabindex="1">
<span class="fa fa-stop"></span>
</a></li>
<li>
</li>
</ul>

<ul class="oom_volume_toggles">
<li>
<div class="row">
<!-- Control buttons-->
<div class="col text-right">
<a class="oom_previous btn btn-lg" tabindex="1">
<span class="fa fa-step-backward"></span>
</a>
<a class="oom_play btn btn-lg" tabindex="1">
<span class="fa fa-play"></span>
</a>
<a class="oom_pause btn btn-lg" tabindex="1">
<span class="fa fa-pause"></span>
</a>
<a class="oom_next btn btn-lg" tabindex="1">
<span class="fa fa-step-forward"></span>
</a>
<a class="oom_stop btn btn-lg" tabindex="1">
<span class="fa fa-stop"></span>
</a>
</div>
<!-- Volume-->
<div class="col-1 d-none d-sm-block">
<div class="oom_volume_bar">
<input type="range" min="0" max="100" value="100" class="oom_volume"/>
</div>
</li>
</ul>

<ul class="oom_toggles">
<li><a class="oom_shuffle btn" tabindex="1" title="Turn shuffle on">
<span class="fa fa-random"></span>
</a></li>
<li><a class="oom_shuffle_off btn" tabindex="1" title="Turn shuffle off">
<span class="fa fa-arrow-right"></span>
</a></li>
<li><a class="oom_repeat btn" tabindex="1" title="Activate repeat">
<span class="fa fa-repeat"></span>
</a></li>
<li><a class="oom_repeat_off btn" tabindex="1" title="Deactivate repeat">
<span class="fa fa-arrow-down"></span>
</a></li>
<li><a class="oom_star btn" tabindex="1" title="I Like It!">
<span class="fa fa-star"></span>
</a></li>
</ul>
</div>
<!-- Control toggles-->
<div class="col">
<a class="oom_shuffle btn" tabindex="1" title="Turn shuffle on">
<span class="fa fa-random"></span>
</a>
<a class="oom_shuffle_off btn" tabindex="1" title="Turn shuffle off">
<span class="fa fa-arrow-right"></span>
</a>
<a class="oom_repeat btn" tabindex="1" title="Activate repeat">
<span class="fa fa-repeat"></span>
</a>
<a class="oom_repeat_off btn" tabindex="1" title="Deactivate repeat">
<span class="fa fa-arrow-down"></span>
</a>
<a class="oom_star btn" tabindex="1" title="I Like It!">
<span class="fa fa-star"></span>
</a>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit d59a2a5

Please sign in to comment.