[UI] Better looking

This commit is contained in:
emeric
2016-01-16 16:36:35 +01:00
parent b68fb38e6e
commit 514e46a724
4 changed files with 41 additions and 17 deletions
+12 -3
View File
@@ -529,11 +529,20 @@
</message> </message>
<message id="wa-audio-player"> <message id="wa-audio-player">
${audio}${prev}${play-pause}${next} ${audio}
<div class="mediaplayer-cover"> ${prev}${play-pause}${next}
<div class="mediaplayer-cover hidden-xs">
${cover} ${cover}
</div> </div>
${artist}${track}${release}${curtime}${seekbar}${duration}${volume}${shuffle}${repeat}${playlist} <div class="mediaplayer-info-container">
<span class="mediaplayer-track">${track}</span> <span class="mediaplayer-artist">${artist}</span> <br/>
${seekbar}
</div>
${curtime}${duration}
<div class="mediaplayer-volume-container visible-lg">
${volume}
</div>
${shuffle}${repeat}${playlist}
</message> </message>
</messages> </messages>
+20
View File
@@ -86,6 +86,26 @@
color: #428bca; color: #428bca;
} }
.mediaplayer-info-container {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
margin: 8px;
}
.mediaplayer-volume-container {
width: 24px;
height: 64px;
margin: 8px;
}
.mediaplayer-volume {
height: 64px;
-webkit-appearance: slider-vertical;
writing-mode: bt-lr;
}
.mobile-search-title { .mobile-search-title {
font-weight: bold; font-weight: bold;
height: 32px; height: 32px;
+9 -12
View File
@@ -45,9 +45,8 @@ AudioPlayer::loadTrack(Database::Track::id_type trackId)
return false; return false;
} }
_trackName->setText(Wt::WString::fromUTF8(track->getName())); bindString("track", Wt::WString::fromUTF8(track->getName()));
_artistName->setText( Wt::WString::fromUTF8(track->getArtist()->getName())); bindString("artist", Wt::WString::fromUTF8(track->getArtist()->getName()));
_releaseName->setText( Wt::WString::fromUTF8(track->getRelease()->getName()));
_cover->setImageLink(SessionCoverResource()->getTrackUrl(trackId, 64)); _cover->setImageLink(SessionCoverResource()->getTrackUrl(trackId, 64));
_trackDuration->setText( boost::posix_time::to_simple_string( track->getDuration() )); _trackDuration->setText( boost::posix_time::to_simple_string( track->getDuration() ));
@@ -111,16 +110,12 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
InputRange *seekbar = new InputRange(); InputRange *seekbar = new InputRange();
bindWidget("seekbar", seekbar); bindWidget("seekbar", seekbar);
_trackName = new Wt::WText(); bindString("track", "Track");
bindWidget("track", _trackName); bindString("artist", "Artist");
_artistName = new Wt::WText();
bindWidget("artist", _artistName);
_releaseName = new Wt::WText();
bindWidget("release", _releaseName);
InputRange *volumeSlider = new InputRange(); InputRange *volumeSlider = new InputRange();
volumeSlider->addStyleClass("mediaplayer-volume");
volumeSlider->setAttributeValue("orient", "vertical"); // firefox
bindWidget("volume", volumeSlider); bindWidget("volume", volumeSlider);
Wt::WText *playlistBtn = new Wt::WText("<i class=\"fa fa-list fa-2x\"></i>", Wt::XHTMLText); Wt::WText *playlistBtn = new Wt::WText("<i class=\"fa fa-list fa-2x\"></i>", Wt::XHTMLText);
@@ -162,7 +157,7 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
})); }));
Wt::WText *prevBtn = new Wt::WText("<i class=\"fa fa-step-backward fa-2x\"></i>", Wt::XHTMLText); Wt::WText *prevBtn = new Wt::WText("<i class=\"fa fa-step-backward fa-2x\"></i>", Wt::XHTMLText);
prevBtn->addStyleClass("mediaplayer-btn"); prevBtn->addStyleClass("mediaplayer-btn hidden-xs");
bindWidget("prev", prevBtn); bindWidget("prev", prevBtn);
prevBtn->clicked().connect(std::bind([=] () prevBtn->clicked().connect(std::bind([=] ()
{ {
@@ -182,9 +177,11 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
bindWidget("play-pause", playPauseBtn); bindWidget("play-pause", playPauseBtn);
Wt::WText *trackCurrentTime = new Wt::WText("00:00"); Wt::WText *trackCurrentTime = new Wt::WText("00:00");
trackCurrentTime->addStyleClass("hidden-xs");
bindWidget("curtime", trackCurrentTime); bindWidget("curtime", trackCurrentTime);
_trackDuration = new Wt::WText("00:00"); _trackDuration = new Wt::WText("00:00");
_trackDuration->addStyleClass("hidden-xs");
bindWidget("duration", _trackDuration); bindWidget("duration", _trackDuration);
this->doJavaScript( this->doJavaScript(
-2
View File
@@ -54,8 +54,6 @@ class AudioPlayer : public Wt::WTemplate
Wt::WAudio* _audio; Wt::WAudio* _audio;
Wt::WText* _trackDuration; Wt::WText* _trackDuration;
Wt::WText* _trackName; Wt::WText* _trackName;
Wt::WText* _artistName;
Wt::WText* _releaseName;
Wt::WImage* _cover; Wt::WImage* _cover;
}; };