add popup widget and controls quick view (openDsh#46)

* adding simple popup widget

* apply overlay to modal as background

* positioning dialog

* close instead of reject

* style when transparency not supported

* update dark style

* fix config file style

* refactoring and cleanup

* adding volume setting and brightness quick view (will refactor this later)

* reset timeout when interacted with; show value for brightness and volume ; connect popups to buttons

* ~update~ popup theme to scale; move values closer to buttons

* hold volume button to mute

* merge gst stuff in

* only perform actions when slider is at final position

Author: rsjudka

CMakeLists.txt

@@ -1,7 +1,7 @@
 cmake_minimum_required(VERSION 3.5.1)
 project(ia CXX)
-add_subdirectory(aasdk)
 
+add_subdirectory(aasdk)
 set(AASDK_INCLUDE_DIRS ${aasdk_SOURCE_DIR}/include)
 set(AASDK_LIBRARIES ${aasdk_SOURCE_DIR}/lib/libaasdk.so)
 set(AASDK_PROTO_INCLUDE_DIRS ${aasdk_BINARY_DIR})
@@ -54,10 +54,11 @@ endif(RPI_BUILD AND NOT GST_BUILD)
 if(GST_BUILD)
     find_package(Qt5GStreamer)
     find_package(PkgConfig REQUIRED)
-    pkg_check_modules(GST REQUIRED gstreamer-1.0>=1.4
-    gstreamer-sdp-1.0>=1.4
-    gstreamer-video-1.0>=1.4
-    gstreamer-app-1.0>=1.4)
+    pkg_check_modules(GST REQUIRED
+                      gstreamer-1.0>=1.4
+                      gstreamer-sdp-1.0>=1.4
+                      gstreamer-video-1.0>=1.4
+                      gstreamer-app-1.0>=1.4)
     add_definitions(-DUSE_GST)
     if(RPI_BUILD)
         add_definitions(-DRPI)

assets/icons/dark/dark_mode.svg

@@ -18,7 +18,7 @@
         <file>icons/dark/fast_forward.svg</file>
         <file>icons/dark/fast_rewind.svg</file>
         <file>icons/dark/volume_off.svg</file>
-        <file>icons/dark/save.svg</file>
+        <file>icons/dark/save_alt.svg</file>
         <file>icons/dark/bluetooth_searching.svg</file>
         <file>icons/dark/playlist_add_check.svg</file>
         <file>icons/dark/playlist_add.svg</file>
@@ -28,9 +28,11 @@
         <file>icons/dark/arrow_right.svg</file>
         <file>icons/dark/wifi.svg</file>
         <file>icons/dark/widgets.svg</file>
+        <file>icons/dark/refresh.svg</file>
         <file>icons/dark/developer_board.svg</file>
         <file>icons/dark/keyboard.svg</file>
         <file>icons/dark/linked_camera.svg</file>
+        <file>icons/dark/dark_mode.svg</file>
         <file>icons/light/play.svg</file>
         <file>icons/light/pause.svg</file>
         <file>icons/light/brightness_low.svg</file>
@@ -48,7 +50,7 @@
         <file>icons/light/fast_forward.svg</file>
         <file>icons/light/fast_rewind.svg</file>
         <file>icons/light/volume_off.svg</file>
-        <file>icons/light/save.svg</file>
+        <file>icons/light/save_alt.svg</file>
         <file>icons/light/bluetooth_searching.svg</file>
         <file>icons/light/playlist_add_check.svg</file>
         <file>icons/light/playlist_add.svg</file>
@@ -58,9 +60,11 @@
         <file>icons/light/arrow_right.svg</file>
         <file>icons/light/wifi.svg</file>
         <file>icons/light/widgets.svg</file>
+        <file>icons/light/refresh.svg</file>
         <file>icons/light/developer_board.svg</file>
         <file>icons/light/keyboard.svg</file>
         <file>icons/light/linked_camera.svg</file>
+        <file>icons/light/dark_mode.svg</file>
         <file>stylesheets/light.qss</file>
         <file>stylesheets/dark.qss</file>
         <file>fonts/Titillium_Web/TitilliumWeb-Regular.ttf</file>

assets/icons/dark/refresh.svg

@@ -1,3 +1,4 @@
+QMainWindow,
 QMainWindow > QFrame {
     background-color: rgb(18, 18, 18);
     border-radius: 8px;
@@ -239,6 +240,12 @@ Tuner::sub-page {
     background-color: rgb(224, 224, 224);
 }
 
+QDialog,
+QDialog > QFrame {
+    background-color: rgb(36, 36, 36);
+    border-radius: 8px;
+}
+
 *[add_hint="true"] {
     background-color: rgba(255, 255, 255, 8);
 }

assets/icons/dark/save.svg

@@ -1,3 +1,4 @@
+QMainWindow,
 QMainWindow > QFrame {
     background-color: rgb(238, 238, 238);
     border-radius: 8px;
@@ -239,6 +240,12 @@ Tuner::sub-page {
     background-color: rgb(0, 0, 0);
 }
 
+QDialog,
+QDialog > QFrame {
+    background-color: rgb(252, 252, 252);
+    border-radius: 8px;
+}
+
 *[add_hint="true"] {
     background-color: rgba(0, 0, 0, 8);
 }

assets/icons/dark/save_alt.svg

@@ -21,7 +21,11 @@ class Config : public QObject {
     void save();
 
     inline int get_volume() { return this->volume; }
-    inline void set_volume(int volume) { this->volume = volume; }
+    inline void set_volume(int volume)
+    {
+        this->volume = volume;
+        emit volume_changed(this->volume);
+    }
 
     inline bool get_dark_mode() { return this->dark_mode; }
     inline void set_dark_mode(bool dark_mode) { this->dark_mode = dark_mode; }
@@ -154,12 +158,14 @@ class Config : public QObject {
     QMap<QString, bool> pages;
 
    signals:
+    void volume_changed(int volume);
     void brightness_changed(unsigned int brightness);
     void si_units_changed(bool si_units);
     void quick_view_changed(QString quick_view);
     void controls_bar_changed(bool controls_bar);
     void scale_changed(double scale);
     void page_changed(QWidget *page, bool enabled);
+    void save_status(bool status);
 };
 
 #endif

assets/icons/light/dark_mode.svg

@@ -37,6 +37,8 @@ class GeneralSettingsSubTab : public QWidget {
     QWidget *color_row_widget();
     QWidget *color_select_widget();
     QWidget *mouse_row_widget();
+    QWidget *volume_row_widget();
+    QWidget *volume_widget();
 
     Config *config;
     Theme *theme;

assets/icons/light/refresh.svg

@@ -23,9 +23,11 @@ class Theme : public QObject {
    public:
     enum Orientation { BOTTOM, RIGHT };
 
+    static const QFont font_12;
     static const QFont font_14;
     static const QFont font_16;
     static const QFont font_18;
+    static const QFont font_24;
     static const QFont font_36;
 
     static const QSize icon_16;

assets/icons/light/save.svg

@@ -0,0 +1,85 @@
+#ifndef DIALOG_HPP_
+#define DIALOG_HPP_
+
+#include <QApplication>
+#include <QDialog>
+#include <QLabel>
+#include <QPainter>
+#include <QPushButton>
+#include <QTimer>
+#include <QVBoxLayout>
+
+#include <app/theme.hpp>
+
+class Overlay : public QWidget {
+    Q_OBJECT
+
+   public:
+    Overlay(QWidget *parent = nullptr) : QWidget(parent) { this->setAttribute(Qt::WA_NoSystemBackground, true); }
+
+   protected:
+    inline void paintEvent(QPaintEvent *) { QPainter(this).fillRect(this->rect(), {0, 0, 0, 108}); }
+    inline void mouseReleaseEvent(QMouseEvent *) { emit close(); }
+
+   signals:
+    void close();
+};
+
+class Dialog : public QDialog {
+    Q_OBJECT
+
+   public:
+    Dialog(bool fullscreen, QWidget *parent = nullptr);
+    void open(int timeout = 0);
+
+    inline void set_title(QString str)
+    {
+        QLabel *label = new QLabel(str, this);
+        label->setFont(QFont("Montserrat", 18, QFont::Bold));
+        this->title->addWidget(label);
+        qApp->processEvents();
+        Theme::get_instance()->update();
+    }
+    inline void set_body(QWidget *widget)
+    {
+        this->body->addWidget(widget);
+        qApp->processEvents();
+        Theme::get_instance()->update();
+    }
+    inline void set_button(QPushButton *button)
+    {
+        if (!this->overlay_enabled && this->fullscreen) this->add_cancel_button();
+        button->setFont(Theme::font_16);
+        button->setFlat(true);
+        this->buttons->addWidget(button, 0, Qt::AlignRight);
+        qApp->processEvents();
+        Theme::get_instance()->update();
+    }
+
+   protected:
+    void showEvent(QShowEvent *event);
+    void keyPressEvent(QKeyEvent *event);
+    bool eventFilter(QObject *object, QEvent *event);
+
+   private:
+    QVBoxLayout *title;
+    QVBoxLayout *body;
+    QHBoxLayout *buttons;
+    QTimer *timer;
+    bool fullscreen;
+    bool overlay_enabled = false;
+
+    QWidget *content_widget();
+    void set_position();
+
+    inline void add_cancel_button()
+    {
+        QPushButton *button = new QPushButton("cancel", this);
+        button->setFont(Theme::font_16);
+        button->setFlat(true);
+        connect(button, &QPushButton::clicked, [this]() { this->close(); });
+        this->buttons->addWidget(button, 0, Qt::AlignRight);
+    }
+};
+
+#endif

assets/icons/light/save_alt.svg

@@ -15,6 +15,7 @@ class ProgressIndicator : public QFrame {
 
    public:
     ProgressIndicator(QWidget* parent = nullptr);
+    QSize sizeHint();
 
     inline int get_angle() { return this->angle; }
     inline void set_angle(int angle) { this->angle = angle; }
@@ -29,6 +30,7 @@ class ProgressIndicator : public QFrame {
     {
         this->pen_width = std::ceil(BASE_PEN_WIDTH * scale);
         this->ellipse_point = std::ceil(BASE_ELLIPSE_POINT * scale);
+        this->setMinimumSize(this->sizeHint());
     }
 
    public slots:

assets/resources.qrc

@@ -32,6 +32,7 @@ class Switch : public QAbstractButton {
     void paintEvent(QPaintEvent *event) override;
     void resizeEvent(QResizeEvent *event) override;
     void mouseReleaseEvent(QMouseEvent *event) override;
+    void checkStateSet() override;
     void nextCheckState() override;
 
    private:

assets/stylesheets/dark.qss

@@ -36,9 +36,13 @@ class MainWindow : public QMainWindow {
     static void update_system_volume(int position);
     QWidget *window_widget();
     QTabWidget *tabs_widget();
-    QWidget *controls_widget();
+    QWidget *controls_bar_widget();
     QWidget *quick_view_widget();
-    QWidget *volume_widget();
+    QWidget *volume_widget(bool skip_buttons = false);
+    QWidget *brightness_widget(bool skip_buttons = false);
+    QWidget *controls_widget();
+    QWidget *power_control_widget();
+    QWidget *save_control_widget();
 
     Config *config;
     Theme *theme;

assets/stylesheets/light.qss

@@ -47,6 +47,8 @@ Config::Config()
 
 void Config::save()
 {
+    emit save_status(true);
+
     if (this->volume != this->ia_config.value("volume", 50).toInt())
         this->ia_config.setValue("volume", this->volume);
     if (this->dark_mode != this->ia_config.value("dark_mode", false).toBool())
@@ -104,6 +106,9 @@ void Config::save()
 
     this->openauto_config->setButtonCodes(this->openauto_button_codes);
     this->openauto_config->save();
+
+    this->ia_config.sync();
+    emit save_status(false);
 }
 
 Config *Config::get_instance()

include/app/config.hpp

@@ -312,19 +312,24 @@ QWidget *LocalPlayerSubTab::seek_widget()
     QHBoxLayout *layout = new QHBoxLayout(widget);
 
     QSlider *slider = new QSlider(Qt::Orientation::Horizontal, widget);
+    slider->setTracking(false);
     slider->setRange(0, 0);
-    QLabel *value = new QLabel(LocalPlayerSubTab::durationFmt(slider->sliderPosition()), widget);
+    QLabel *value = new QLabel(LocalPlayerSubTab::durationFmt(slider->value()), widget);
     value->setFont(Theme::font_14);
-    connect(slider, &QSlider::valueChanged,
-            [value](int position) { value->setText(LocalPlayerSubTab::durationFmt(position)); });
     connect(slider, &QSlider::sliderReleased,
-            [player = this->player, slider]() { player->setPosition(slider->value()); });
+            [player = this->player, slider]() { player->setPosition(slider->sliderPosition()); });
+    connect(slider, &QSlider::sliderMoved,
+            [value](int position) { value->setText(LocalPlayerSubTab::durationFmt(position)); });
     connect(this->player, &QMediaPlayer::durationChanged, [slider](qint64 duration) {
-        slider->setSliderPosition(0);
+        slider->setValue(0);
         slider->setRange(0, duration);
     });
-    connect(this->player, &QMediaPlayer::positionChanged,
-            [slider](qint64 position) { slider->setSliderPosition(position); });
+    connect(this->player, &QMediaPlayer::positionChanged, [slider, value](qint64 position) {
+        if (!slider->isSliderDown()) {
+            slider->setValue(position);
+            value->setText(LocalPlayerSubTab::durationFmt(position));
+        }
+    });
 
     layout->addStretch(4);
     layout->addWidget(slider, 28);