[UI] Made loop/shuffle aligned

src/ui/approot/templates.xml

@@ -318,6 +318,13 @@
 	</div>
 </message>
 
+<message id="mediaplayer-loopshuffle">
+	<div class="btn-group" role="group" aria-label="...">
+		${loop}
+		${shuffle}
+	</div>
+</message>
+
 </messages>
 
 

src/ui/audio/AudioMediaPlayer.cpp

@@ -56,17 +56,21 @@ AudioMediaPlayer::AudioMediaPlayer( Wt::WContainerWidget *parent)
 
 	Wt::WPushButton *prevBtn = new Wt::WPushButton("<<");
 	t->bindWidget("prev", prevBtn);
+	prevBtn->setStyleClass("mediaplayer-controls");
 
 	_playBtn = new Wt::WPushButton("Play");
 	t->bindWidget("play", _playBtn);
 	_playBtn->setWidth(70);
+	_playBtn->setStyleClass("mediaplayer-controls");
 
 	_pauseBtn = new Wt::WPushButton("Pause");
 	t->bindWidget("pause", _pauseBtn);
 	_pauseBtn->setWidth(70);
+	_pauseBtn->setStyleClass("mediaplayer-controls");
 
 	Wt::WPushButton *nextBtn = new Wt::WPushButton(">>");
 	t->bindWidget("next", nextBtn);
+	nextBtn->setStyleClass("mediaplayer-controls");
 
 	controlsLayout->addWidget(btnContainer);
 
@@ -75,25 +79,42 @@ AudioMediaPlayer::AudioMediaPlayer( Wt::WContainerWidget *parent)
 	_volumeSlider->setWidth(60);
 	_volumeSlider->setMinimumSize(60, Wt::WLength::Auto);
 	_volumeSlider->setHeight(30);
-	controlsLayout->addWidget(_volumeSlider);
+	controlsLayout->addWidget(_volumeSlider, 1);
 
-/*	Wt::WText* name = new Wt::WText("My track name");
-	controlsLayout->addWidget(name, 1);*/
+	{
+		Wt::WContainerWidget *loopShuffleContainer = new Wt::WContainerWidget();
 
-	   Wt::WCheckBox *loop = new Wt::WCheckBox("Loop", controlsContainer);
-	   loop->changed().connect(std::bind([=] ()
+		Wt::WTemplate *tLoopShuffle = new Wt::WTemplate(Wt::WString::tr("mediaplayer-loopshuffle"), loopShuffleContainer);
+
+
+	   Wt::WPushButton *loop = new Wt::WPushButton("Loop");
+	   tLoopShuffle->bindWidget("loop", loop);
+	   loop->setCheckable(true);
+	   loop->setStyleClass("btn-sm");
+	   loop->checked().connect(std::bind([=] ()
 	   {
-	   _loop.emit( loop->checkState() == Wt::Checked);
+		   _loop.emit( true );
+	   }));
+	   loop->unChecked().connect(std::bind([=] ()
+	   {
+		   _loop.emit( false );
 	   }));
 
-	   Wt::WCheckBox *shuffle = new Wt::WCheckBox("Shuffle", controlsContainer);
-	   shuffle->changed().connect(std::bind([=] ()
+	   Wt::WPushButton *shuffle = new Wt::WPushButton("Shuffle");
+	   tLoopShuffle->bindWidget("shuffle", shuffle);
+	   shuffle->setCheckable(true);
+	   shuffle->setStyleClass("btn-sm");
+	   shuffle->checked().connect(std::bind([=] ()
 	   {
-	   _shuffle.emit( shuffle->checkState() == Wt::Checked);
+		   _shuffle.emit( true );
+	   }));
+	   shuffle->unChecked().connect(std::bind([=] ()
+	   {
+		   _shuffle.emit( false );
 	   }));
 
-	   controlsLayout->addWidget(loop);
-	   controlsLayout->addWidget(shuffle);
+	   controlsLayout->addWidget(loopShuffleContainer);
+	}
 
 	_mediaPlayer = new Wt::WMediaPlayer( Wt::WMediaPlayer::Audio, this );
 	_mediaPlayer->addSource( Wt::WMediaPlayer::OGA, "" );
@@ -119,7 +140,6 @@ AudioMediaPlayer::AudioMediaPlayer( Wt::WContainerWidget *parent)
 				_playPrevious.emit();
 				}));
 	   _timeSlider->valueChanged().connect(this, &AudioMediaPlayer::handlePlayOffset);
-//	_timeSlider->sliderMoved().connect(this, &AudioMediaPlayer::handleSliderMoved);
 	_timeSlider->setDisabled(true);
 
 	_volumeSlider->sliderMoved().connect(this, &AudioMediaPlayer::handleVolumeSliderMoved);

src/ui/docroot/css/lms.css

@@ -47,3 +47,7 @@ div.contents {
 	border-radius: 10px;
 }
 
+.mediaplayer-controls {
+	font-weight: bold;
+}
+