Skip to content

frontend: Refactor Idian widgets #13765

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Warchamp7 wants to merge 1 commit into
base: master
Choose a base branch
from
+728 −681
Open

frontend: Refactor Idian widgets #13765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 45 additions & 41 deletions frontend/data/themes/Yami.obt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,6 @@
--action_row_border: 3px;
--action_row_input_width: calc(var(--action_row_base) * 4);
--action_row_collapse: calc(var(--action_row_base) + var(--padding_large));
--action_row_collapse_radius: calc(var(--action_row_collapse) / 2);
--action_row_padding: calc(var(--padding_large) * 1.5);
--action_row_padding_x: calc(var(--action_row_padding) * 2);
--action_row_padding_nested: calc(var(--action_row_padding_x) * 1.5);
Expand Down Expand Up @@ -2489,25 +2488,25 @@ SourceSelectButton:pressed:hover {
}

/* Idian Widgets */
idian--Group {
idian--ListHeader {
border-radius: var(--border_radius);
font-weight: bold;
margin: 0 0 var(--spacing_base);
padding: 0 var(--padding_base);
min-width: 300px;
max-width: 600px;
}

idian--Group .header .title {
idian--ListHeader .title {
font-weight: bold;
padding: var(--padding_large) 0;
}

idian--Group .header .description {
idian--ListHeader .description {
color: var(--text_muted);
padding: var(--spacing_small) 0;
}

idian--PropertiesList {
idian--RowList {
border-width: 0;
padding: 0;
margin: var(--spacing_base) 0;
Expand All @@ -2517,29 +2516,34 @@ idian--Row {
background: var(--grey5);
margin: 0;
padding: var(--action_row_padding) var(--action_row_padding_x);
border-radius: var(--border_radius);
}

idian--Row.keyFocus {
background: var(--grey4);
border: var(--highlight_width) solid var(--grey4);
border: var(--highlight_width) solid var(--highlight_color);
}

idian--Row.cursor-pointer.hover {
background: var(--grey4);
border: var(--highlight_width) solid var(--grey1);
}

idian--Row.first {
idian--RowList idian--Row {
border-radius: 0;
}

idian--RowList idian--Row.first {
border-top-left-radius: var(--border_radius);
border-top-right-radius: var(--border_radius);
}

idian--Row.last {
idian--RowList idian--Row.last {
border-bottom-left-radius: var(--border_radius);
border-bottom-right-radius: var(--border_radius);
}

idian--Row > QLabel.description {
idian--RowInfo QLabel.description {
font-size: var(--font_small);
color: var(--text_muted);
}
Expand Down Expand Up @@ -2636,7 +2640,7 @@ idian--Row QDoubleSpinBox {
padding: var(--padding_base) var(--action_row_padding_x);
}

idian--PropertiesListSpacer {
idian--RowListSpacer {
max-height: var(--spacing_small);
min-height: var(--spacing_small);
background-color: var(--bg_window);
Expand Down Expand Up @@ -2673,35 +2677,54 @@ idian--CheckBox.keyFocus.checked::indicator {
border-color: var(--highlight_color);
}

idian--CollapsibleRow {
idian--CollapsibleGroup {
margin: 0;
padding: 0;
border: none;
}

idian--CollapsibleRow.keyFocus {
idian--CollapsibleGroup.expanded > idian--Row {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

idian--CollapsibleGroup idian--Row.keyFocus {
border: var(--highlight_width) solid var(--highlight_color);
}

idian--CollapsibleRow idian--PropertiesList {
idian--CollapsibleGroup idian--RowList {
border-radius: 0;
border-left: 1px solid var(--grey5);
border-right: 1px solid var(--grey5);
border-bottom: 1px solid var(--grey5);
border-bottom: 1px solid var(--grey5);
margin: var(--spacing_small) 0px 0px;
}

idian--CollapsibleRow idian--PropertiesList idian--Row {
idian--CollapsibleGroup idian--RowList idian--Row {
background-color: var(--grey6);
padding-left: var(--action_row_padding_nested);
}

idian--CollapsibleRow idian--Row.first,
idian--CollapsibleRow idian--Row.last {
idian--CollapsibleGroup idian--RowList idian--Row.first {
border-radius: 0;
}

idian--CollapsibleGroup idian--RowList idian--Row.last {
border-bottom-left-radius: var(--border_radius);
border-bottom-right-radius: var(--border_radius);
}

idian--RowList idian--CollapsibleGroup idian--Row.last {
border-radius: 0;
}

idian--CollapsibleRow idian--PropertiesList idian--ToggleSwitch {
idian--RowList idian--CollapsibleGroup.last idian--Row.last {
border-bottom-left-radius: var(--border_radius);
border-bottom-right-radius: var(--border_radius);
}

idian--CollapsibleGroup idian--RowList idian--ToggleSwitch {
qproperty-background: var(--grey7);
qproperty-background_hover: var(--grey6);
}
Expand All @@ -2717,7 +2740,7 @@ idian--ExpandButton {

idian--ExpandButton::indicator {
background: var(--grey5);
border-radius: var(--action_row_collapse_radius);
border-radius: var(--border_radius);
padding: var(--padding_large);
image: url(theme:Dark/down.svg);
border: var(--highlight_width) solid var(--grey5);
Expand All @@ -2728,32 +2751,13 @@ idian--ExpandButton::indicator:checked {
}

idian--ExpandButton.keyFocus,
idian--ExpandButton.keyFocus::indicator {
idian--Row.keyFocus idian--ExpandButton::indicator {
border-color: var(--highlight_color);
}

idian--RowFrame .btn-frame {
background: var(--grey5);
padding: var(--action_row_padding) var(--action_row_padding_x);
}

idian--RowFrame.hover .btn-frame {
background: var(--grey4);
}

idian--RowFrame.hover idian--Row {
idian--ExpandButton.hover::indicator,
idian--Row.hover idian--ExpandButton.row-buddy::indicator {
background: var(--grey4);
border: var(--highlight_width) solid var(--grey1);
border-right: none;
}

idian--RowFrame.hover .row-buddy {
background: var(--grey4);
border: var(--highlight_width) solid var(--grey1);
border-left: none;
}

idian--RowFrame.hover idian--ExpandButton::indicator {
border-color: var(--grey1);
}

Expand Down
102 changes: 53 additions & 49 deletions frontend/dialogs/OBSIdianPlayground.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@

#include "OBSIdianPlayground.hpp"

#include <Idian/CollapsibleGroup.hpp>
#include <Idian/Idian.hpp>
#include <Idian/ListHeader.hpp>
#include <Idian/RowInfo.hpp>

#include <QTimer>

Expand All @@ -31,39 +34,39 @@ OBSIdianPlayground::OBSIdianPlayground(QWidget *parent) : QDialog(parent), ui(ne

setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::Minimum);

Group *test;
QLayout *contents = ui->scrollAreaWidgetContents->layout();

RowList *rowList;
Row *tmp;

ComboBox *cbox = new ComboBox;
cbox->addItem("Test 1");
cbox->addItem("Test 2");

// Group box 1
test = new Group(this);
rowList = new RowList(this);

tmp = new Row();
tmp->setTitle("Row with a dropdown");
tmp->setSuffix(cbox);
test->properties()->addRow(tmp);
tmp->addWidget(new RowInfo(tmp, "Row with a dropdown"));
tmp->addBuddy(cbox);
rowList->addRow(tmp);

cbox = new ComboBox;
cbox->addItem("Test 3");
cbox->addItem("Test 4");
tmp = new Row();
tmp->setTitle("Row with a dropdown");
tmp->setDescription("And a subtitle!");
tmp->setSuffix(cbox);
test->properties()->addRow(tmp);
tmp->addWidget(new RowInfo(tmp, "Row with a dropdown", "And a subtitle!"));
tmp->addBuddy(cbox);
rowList->addRow(tmp);

tmp = new Row();
tmp->setTitle("Toggle Switch");
tmp->setSuffix(new ToggleSwitch());
test->properties()->addRow(tmp);
ui->scrollAreaWidgetContents->layout()->addWidget(test);
tmp->addWidget(new RowInfo(tmp, "Toggle Switch"));
tmp->addBuddy(new ToggleSwitch());
rowList->addRow(tmp);
contents->addWidget(rowList);

tmp = new Row();
tmp->setTitle("Delayed toggle switch");
tmp->setDescription("The state can be set separately");
tmp->addWidget(new RowInfo(tmp, "Delayed toggle switch", "The state can be set separately"));
auto tswitch = new ToggleSwitch;
tswitch->setDelayed(true);
connect(tswitch, &ToggleSwitch::pendingChecked, this, [=]() {
Expand All @@ -74,64 +77,65 @@ OBSIdianPlayground::OBSIdianPlayground(QWidget *parent) : QDialog(parent), ui(ne
// Do async disable stuff, then set toggle status when complete
QTimer::singleShot(1000, [=]() { tswitch->setStatus(false); });
});
tmp->setSuffix(tswitch);
test->properties()->addRow(tmp);
tmp->addBuddy(tswitch);
rowList->addRow(tmp);

// Group box 2
test = new Group();
test->setTitle("Just a few checkboxes");
contents->addWidget(new ListHeader(rowList, "Just a few checkboxes"));
rowList = new RowList();

tmp = new Row();
tmp->setTitle("Box 1");
tmp->setPrefix(new CheckBox);
test->properties()->addRow(tmp);
tmp->addBuddy(new CheckBox);
tmp->addWidget(new RowInfo(tmp, "Box 1"));
rowList->addRow(tmp);

tmp = new Row();
tmp->setTitle("Box 2");
tmp->setPrefix(new CheckBox);
test->properties()->addRow(tmp);
tmp->addBuddy(new CheckBox);
tmp->addWidget(new RowInfo(tmp, "Box 2"));
rowList->addRow(tmp);

ui->scrollAreaWidgetContents->layout()->addWidget(test);
ui->scrollAreaWidgetContents->layout()->addWidget(rowList);

// Group box 2
test = new Group();
test->setTitle("Another Group");
test->setDescription("With a subtitle");
rowList = new RowList();
contents->addWidget(new ListHeader(rowList, "Another Group", "With a subtitle"));

tmp = new Row();
tmp->setTitle("Placeholder");
tmp->setSuffix(new ToggleSwitch);
test->properties()->addRow(tmp);
tmp->addWidget(new RowInfo(tmp, "Placeholder"));
tmp->addBuddy(new ToggleSwitch);
rowList->addRow(tmp);

CollapsibleRow *tmp2 = new CollapsibleRow(this);
tmp2->setTitle("A Collapsible row!");
CollapsibleGroup *tmp2 = new CollapsibleGroup(this);
tmp2->row()->layout()->insertWidget(0, new RowInfo(tmp, "A Collapsible row!"));
tmp2->setCheckable(true);
test->addRow(tmp2);
rowList->addRow(tmp2);

tmp = new Row();
tmp->setTitle("Spin box demo");
tmp->setSuffix(new DoubleSpinBox());
tmp2->addRow(tmp);
tmp->addWidget(new RowInfo(tmp, "Spin box demo"));
tmp->addBuddy(new DoubleSpinBox());
tmp2->list()->addRow(tmp);

tmp = new Row();
tmp->setTitle("Just another placeholder");
tmp->setSuffix(new ToggleSwitch(true));
tmp2->addRow(tmp);
tmp->addWidget(new RowInfo(tmp, "Just another placeholder"));
tmp->addBuddy(new ToggleSwitch(true));
tmp2->list()->addRow(tmp);

tmp = new Row();
tmp->setTitle("Placeholder 2");
tmp->setSuffix(new ToggleSwitch);
test->properties()->addRow(tmp);
tmp->addWidget(new RowInfo(tmp, "Placeholder 2"));
tmp->addBuddy(new ToggleSwitch);
rowList->addRow(tmp);

ui->scrollAreaWidgetContents->setContentsMargins(0, 0, 0, 0);
ui->scrollAreaWidgetContents->layout()->setContentsMargins(0, 0, 0, 0);
ui->scrollAreaWidgetContents->layout()->addWidget(test);
ui->scrollAreaWidgetContents->layout()->addWidget(rowList);
ui->scrollAreaWidgetContents->layout()->setAlignment(Qt::AlignTop | Qt::AlignHCenter);

// Test Checkable Group
Group *test2 = new Group();
test2->setTitle("Checkable Group");
test2->setDescription("Description goes here");
test2->setCheckable(true);
auto *test2 = new RowList(this);

auto *header = new ListHeader(this, "Checkable Group", "Description goes here");
header->setCheckable(true);
test2->addHeader(header);

ui->scrollAreaWidgetContents->layout()->addWidget(test2);
}
4 changes: 4 additions & 0 deletions frontend/widgets/OBSBasic.hpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -595,6 +595,10 @@ private slots:
QPointer<QWidgetAction> colorWidgetAction;
QPointer<ColorSelect> colorSelect;

#ifdef ENABLE_IDIAN_PLAYGROUND
QPointer<QDialog> playground;
#endif

QList<QDialog *> visDialogs;
QList<QDialog *> modalDialogs;
QList<QMessageBox *> visMsgBoxes;
Expand Down
9 changes: 5 additions & 4 deletions frontend/widgets/OBSBasic_MainControls.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -670,10 +670,11 @@ void OBSBasic::on_stats_triggered()
void OBSBasic::on_idianPlayground_triggered()
{
#ifdef ENABLE_IDIAN_PLAYGROUND
OBSIdianPlayground playground(this);
playground.setModal(true);
playground.show();
playground.exec();
if (!playground) {
playground = new OBSIdianPlayground(this);
playground->setAttribute(Qt::WA_DeleteOnClose);
playground->show();
}
#endif
}

Expand Down
Loading
Loading