frontend: Adjust source context bar

frontend/components/BrowserToolbar.cpp

@@ -11,6 +11,11 @@ BrowserToolbar::BrowserToolbar(QWidget *parent, OBSSource source)
 
 BrowserToolbar::~BrowserToolbar() {}
 
+void BrowserToolbar::on_interactButton_clicked()
+{
+	emit interactClicked();
+}
+
 void BrowserToolbar::on_refresh_clicked()
 {
 	OBSSource source = GetSource();

frontend/components/BrowserToolbar.hpp

@@ -13,6 +13,10 @@ class BrowserToolbar : public SourceToolbar {
 	BrowserToolbar(QWidget *parent, OBSSource source);
 	~BrowserToolbar();
 
+signals:
+	void interactClicked();
+
 public slots:
 	void on_refresh_clicked();
+	void on_interactButton_clicked();
 };

frontend/components/ColorSourceToolbar.cpp

@@ -2,6 +2,7 @@
 #include "ui_color-source-toolbar.h"
 
 #include <QColorDialog>
+#include <QStyle>
 
 #include "moc_ColorSourceToolbar.cpp"
 
@@ -37,17 +38,19 @@ ColorSourceToolbar::~ColorSourceToolbar() {}
 void ColorSourceToolbar::UpdateColor()
 {
 	QPalette palette = QPalette(color);
-	ui->color->setFrameStyle(QFrame::Sunken | QFrame::Panel);
-	ui->color->setText(color.name(QColor::HexRgb));
-	ui->color->setPalette(palette);
-	ui->color->setStyleSheet(QString("background-color :%1; color: %2;")
-					 .arg(palette.color(QPalette::Window).name(QColor::HexRgb))
-					 .arg(palette.color(QPalette::WindowText).name(QColor::HexRgb)));
-	ui->color->setAutoFillBackground(true);
-	ui->color->setAlignment(Qt::AlignCenter);
+	ui->colorPreview->setText(color.name(QColor::HexRgb));
+	ui->colorPreview->setPalette(palette);
+	ui->colorPreview->setStyleSheet(QString("background-color :%1; color: %2;")
+						.arg(palette.color(QPalette::Window).name(QColor::HexRgb))
+						.arg(palette.color(QPalette::WindowText).name(QColor::HexRgb)));
+	ui->colorPreview->setAutoFillBackground(true);
+	//ui->colorPreview->setAlignment(Qt::AlignCenter);
+
+	ui->colorPreview->style()->unpolish(ui->colorPreview);
+	ui->colorPreview->style()->polish(ui->colorPreview);
 }
 
-void ColorSourceToolbar::on_choose_clicked()
+void ColorSourceToolbar::on_colorEdit_clicked()
 {
 	OBSSource source = GetSource();
 	if (!source) {

frontend/components/ColorSourceToolbar.hpp

@@ -17,5 +17,5 @@ class ColorSourceToolbar : public SourceToolbar {
 	~ColorSourceToolbar();
 
 public slots:
-	void on_choose_clicked();
+	void on_colorEdit_clicked();
 };

frontend/components/MediaControls.cpp

@@ -1,6 +1,7 @@
 #include "MediaControls.hpp"
 #include "ui_media-controls.h"
 
+#include <qt-wrappers.hpp>
 #include <OBSApp.hpp>
 
 #include <QToolTip>
@@ -196,9 +197,12 @@ void MediaControls::StopMediaTimer()
 void MediaControls::SetPlayingState()
 {
 	ui->slider->setEnabled(true);
-	ui->playPauseButton->setProperty("class", "icon-media-pause");
-	ui->playPauseButton->style()->unpolish(ui->playPauseButton);
-	ui->playPauseButton->style()->polish(ui->playPauseButton);
+
+	addClass(ui->playPauseButton, "icon-media-pause");
+	removeClass(ui->playPauseButton, "icon-media-play");
+	removeClass(ui->playPauseButton, "icon-media-restart");
+	repolish(ui->playPauseButton);
+
 	ui->playPauseButton->setToolTip(QTStr("ContextBar.MediaControls.PauseMedia"));
 
 	prevPaused = false;
@@ -209,19 +213,23 @@ void MediaControls::SetPlayingState()
 
 void MediaControls::SetPausedState()
 {
-	ui->playPauseButton->setProperty("class", "icon-media-play");
-	ui->playPauseButton->style()->unpolish(ui->playPauseButton);
-	ui->playPauseButton->style()->polish(ui->playPauseButton);
+	addClass(ui->playPauseButton, "icon-media-play");
+	removeClass(ui->playPauseButton, "icon-media-pause");
+	removeClass(ui->playPauseButton, "icon-media-restart");
+	repolish(ui->playPauseButton);
+
 	ui->playPauseButton->setToolTip(QTStr("ContextBar.MediaControls.PlayMedia"));
 
 	StopMediaTimer();
 }
 
 void MediaControls::SetRestartState()
 {
-	ui->playPauseButton->setProperty("class", "icon-media-restart");
-	ui->playPauseButton->style()->unpolish(ui->playPauseButton);
-	ui->playPauseButton->style()->polish(ui->playPauseButton);
+	addClass(ui->playPauseButton, "icon-media-restart");
+	removeClass(ui->playPauseButton, "icon-media-play");
+	removeClass(ui->playPauseButton, "icon-media-pause");
+	repolish(ui->playPauseButton);
+
 	ui->playPauseButton->setToolTip(QTStr("ContextBar.MediaControls.RestartMedia"));
 
 	ui->slider->setValue(0);

frontend/components/OBSAdvAudioCtrl.cpp

@@ -86,8 +86,10 @@ OBSAdvAudioCtrl::OBSAdvAudioCtrl(QGridLayout *, obs_source_t *source_) : source(
 
 	bool isActive = obs_source_active(source) && obs_source_audio_active(source);
 	active->setText(isActive ? QTStr("Basic.Stats.Status.Active") : QTStr("Basic.Stats.Status.Inactive"));
-	if (isActive)
+	if (isActive) {
 		setClasses(active, "text-danger");
+		repolish(active);
+	}
 	active->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Fixed);
 
 	volume->setMinimum(MIN_DB - 0.1);
@@ -334,6 +336,8 @@ void OBSAdvAudioCtrl::SourceActiveChanged(bool isActive)
 		active->setText(QTStr("Basic.Stats.Status.Inactive"));
 		setClasses(active, "");
 	}
+
+	repolish(active);
 }
 
 void OBSAdvAudioCtrl::SourceFlagsChanged(uint32_t flags)

frontend/components/TextSourceToolbar.cpp

@@ -38,7 +38,6 @@ TextSourceToolbar::TextSourceToolbar(QWidget *parent, OBSSource source)
 	const char *text = obs_data_get_string(settings, "text");
 
 	bool single_line = !read_from_file && (!text || (strchr(text, '\n') == nullptr));
-	ui->emptySpace->setVisible(!single_line);
 	ui->text->setVisible(single_line);
 	if (single_line)
 		ui->text->setText(text);

frontend/data/locale/en-US.ini

@@ -636,9 +636,9 @@ Basic.Main.Sources.LockDescription="Locks the position and scale of '%1' in the
 # properties window
 Basic.PropertiesWindow="Properties for '%1'"
 Basic.PropertiesWindow.AutoSelectFormat="%1 (autoselect: %2)"
-Basic.PropertiesWindow.SelectColor="Select color"
-Basic.PropertiesWindow.SelectFont="Select font"
-Basic.PropertiesWindow.SelectFont.WindowTitle="Pick a Font"
+Basic.PropertiesWindow.SelectColor="Select Color"
+Basic.PropertiesWindow.SelectFont="Select Font"
+Basic.PropertiesWindow.SelectFont.WindowTitle="Select Font"
 Basic.PropertiesWindow.ConfirmTitle="Settings Changed"
 Basic.PropertiesWindow.Confirm="There are unsaved changes. Do you want to keep them?"
 Basic.PropertiesWindow.NoProperties="No properties available"
@@ -1470,6 +1470,14 @@ LoadProfileNeedsRestart="Profile contains settings that require restarting OBS:\
 # Context Bar
 ContextBar.NoSelectedSource="No source selected"
 ContextBar.ResetTransform="Reset Transform"
+ContextBar.Label.Device="Device"
+ContextBar.Label.Image="Image"
+ContextBar.Label.Mode="Mode"
+ContextBar.Label.Text="Text"
+ContextBar.Label.Window="Window"
+ContextBar.Placeholder.Text="Enter text"
+ContextBar.Placeholder.Window="No window selected"
+ContextBar.Placeholder.Device="No device selected"
 
 # Context Bar Media Controls
 ContextBar.MediaControls.PlayMedia="Play Media"

frontend/data/themes/Yami.obt

@@ -154,6 +154,9 @@
     --input_text_padding: max(calc(6px + var(--padding_base)), 8px);
     --input_height: calc(var(--input_height_base) - calc(var(--input_padding) * 2px));
     --input_height_half: calc(var(--input_height_base) / 2);
+    --input_width: calc(var(--input_height_base) + calc(var(--input_padding) * 2));
+
+    --context_height: calc(var(--input_height) + calc(var(--input_padding) * 4));
 
     --input_bg: var(--grey4);
     --input_bg_hover: var(--grey7);
@@ -350,6 +353,10 @@
     qproperty-icon: url(theme:Dark/save.svg);
 }
 
+.icon-edit {
+    qproperty-icon: url(theme:Dark/edit.svg);
+}
+
 /* Media icons */
 
 .icon-media-play {
@@ -774,29 +781,6 @@ QScrollBar::handle:disabled {
     border-color: transparent;
 }
 
-/* Source Context Bar */
-
-#contextContainer {
-    background-color: var(--bg_base);
-    margin-top: 4px;
-    border-radius: var(--border_radius);
-}
-
-#contextContainer QPushButton {
-    padding-left: 12px;
-    padding-right: 12px;
-}
-
-QPushButton#sourcePropertiesButton {
-    qproperty-icon: url(theme:Dark/settings/general.svg);
-    icon-size: var(--icon_base);
-}
-
-QPushButton#sourceFiltersButton {
-    qproperty-icon: url(theme:Dark/filter.svg);
-    icon-size: var(--icon_base);
-}
-
 /* Scenes and Sources toolbar */
 
 QToolBar {
@@ -1013,8 +997,9 @@ QDoubleSpinBox {
     background-color: var(--input_bg);
     border: 1px solid var(--input_bg);
     border-radius: var(--border_radius);
-    padding: var(--input_padding) var(--input_text_padding);
-    height: var(--input_height);
+    min-width: var(--input_width);
+    padding: var(--input_padding) 0px var(--input_padding) var(--input_padding);
+    padding-left: var(--input_text_padding);
     max-height: var(--input_height);
 }
 
@@ -1719,6 +1704,112 @@ OBSHotkeyWidget QPushButton {
     margin-left: var(--spacing_base);
 }
 
+/* Source Context Bar */
+
+.context-bar {
+    background-color: var(--bg_base);
+    margin-top: 4px;
+    border-radius: var(--border_radius);
+    min-height: var(--context_height);
+    max-height: var(--context_height);
+    padding: 0px;
+    border: 1px solid var(--border_color);
+}
+
+.context-margin,
+.context-frame {
+    margin-left: var(--spacing_base);
+}
+
+.context-frame {
+    border: none;
+    border-right: 1px solid var(--border_color);
+}
+
+.context-padding {
+    padding: 0 var(--padding_large);
+}
+
+.context-bar .context-button {
+    background: var(--grey6);
+    background: var(--grey6);
+    border-color: transparent;
+    padding: var(--padding_xlarge) var(--padding_xlarge);
+    margin: var(--spacing_base) 0;
+    margin-right: var(--spacing_base);
+    font-weight: bold;
+    outline: none;
+    icon-size: 16px;
+}
+
+.context-button:focus {
+    border: 1px solid var(--grey1);
+}
+
+.context-button:hover {
+    background: var(--button_bg_hover);
+    border-color: var(--grey1);
+}
+
+.context-button:pressed,
+.context-button:pressed:hover {
+    background-color: var(--button_bg_down);
+}
+
+.context-combobox,
+.context-lineedit {
+    padding: var(--padding_xlarge) var(--padding_xlarge);
+    margin: var(--spacing_base);
+    max-width: 320px;
+}
+
+.context-combobox {
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.context-combobox::drop-down {
+    border: none;
+    padding-right: var(--padding_large);
+}
+
+.context-combobox:hover {
+    background-color: var(--grey5);
+    border-color: var(--input_border_hover);
+}
+
+.context-combobox:on {
+    background-color: var(--input_bg_focus);
+}
+
+.context-lineedit {
+    background: var(--grey5);
+}
+
+.context-lineedit:hover {
+    background-color: var(--input_bg_hover);
+}
+
+.context-lineedit[readOnly="true"] {
+    background: transparent;
+    border-color: var(--border_color);
+}
+
+.context-label {
+    color: var(--text_muted);
+    padding: 0 var(--padding_xlarge);
+}
+
+.context-bar .color-button {
+    padding: var(--padding_xlarge) var(--padding_wide);
+}
+
+.context-bar .context-separator {
+    min-width: 1px;
+    max-width: 1px;
+    background: var(--border_color);
+    border: none;
+}
 
 /* Sources List Group Collapse Checkbox */