[libadwaita/wip/exalm/browsing-view: 11/18] demo: Port style class demo to adaptive states
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/browsing-view: 11/18] demo: Port style class demo to adaptive states
- Date: Fri, 14 Oct 2022 20:14:35 +0000 (UTC)
commit cfdc4ae35bb4183a036f833d4bb671b7813ccea9
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Tue Oct 4 12:38:29 2022 +0400
demo: Port style class demo to adaptive states
demo/pages/styles/adw-style-demo-window.ui | 536 +++++++++++++----------------
demo/style.css | 6 -
2 files changed, 245 insertions(+), 297 deletions(-)
---
diff --git a/demo/pages/styles/adw-style-demo-window.ui b/demo/pages/styles/adw-style-demo-window.ui
index 8ad6519e..fa104778 100644
--- a/demo/pages/styles/adw-style-demo-window.ui
+++ b/demo/pages/styles/adw-style-demo-window.ui
@@ -7,6 +7,8 @@
<property name="title" translatable="yes">Style Classes</property>
<property name="default-width">800</property>
<property name="default-height">640</property>
+ <property name="width-request">360</property>
+ <property name="height-request">150</property>
<property name="content">
<object class="GtkBox">
<property name="orientation">vertical</property>
@@ -44,19 +46,13 @@
The "opaque" style class allows to create buttons with custom colors that look similar to
"suggested-action".</property>
<child>
- <object class="GtkFlowBox">
- <property name="min-children-per-line">1</property>
- <property name="max-children-per-line">6</property>
- <property name="column-spacing">6</property>
- <property name="row-spacing">6</property>
- <property name="selection-mode">none</property>
- <property name="homogeneous">True</property>
- <style>
- <class name="inline"/>
- </style>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="spacing">6</property>
<child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
+ <object class="GtkBox" id="button_box_1">
+ <property name="spacing">6</property>
+ <property name="homogeneous">True</property>
<child>
<object class="GtkBox">
<property name="spacing">6</property>
@@ -77,11 +73,6 @@ The "opaque" style class allows to create buttons with custom colors that look s
</child>
</object>
</child>
- </object>
- </child>
- <child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
<child>
<object class="GtkBox">
<property name="spacing">6</property>
@@ -109,8 +100,9 @@ The "opaque" style class allows to create buttons with custom colors that look s
</object>
</child>
<child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
+ <object class="GtkBox" id="button_box_2">
+ <property name="spacing">6</property>
+ <property name="homogeneous">True</property>
<child>
<object class="GtkBox">
<property name="spacing">6</property>
@@ -129,11 +121,6 @@ The "opaque" style class allows to create buttons with custom colors that look s
</child>
</object>
</child>
- </object>
- </child>
- <child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
<child>
<object class="GtkBox">
<property name="spacing">6</property>
@@ -165,88 +152,69 @@ The "opaque" style class allows to create buttons with custom colors that look s
</object>
</child>
<child>
- <object class="GtkFlowBox">
- <property name="min-children-per-line">1</property>
- <property name="max-children-per-line">3</property>
- <property name="column-spacing">6</property>
- <property name="row-spacing">6</property>
- <property name="selection-mode">none</property>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
<property name="margin-top">12</property>
- <style>
- <class name="inline"/>
- </style>
<child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
+ <property name="hexpand">True</property>
+ <property name="tooltip-text">circular</property>
<child>
- <object class="GtkBox">
- <property name="spacing">6</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
+ <object class="GtkButton">
+ <property name="icon-name">list-add-symbolic</property>
+ <style>
+ <class name="circular"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="label">A</property>
<property name="tooltip-text">circular</property>
- <child>
- <object class="GtkButton">
- <property name="icon-name">list-add-symbolic</property>
- <style>
- <class name="circular"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkButton">
- <property name="label">A</property>
- <property name="tooltip-text">circular</property>
- <style>
- <class name="circular"/>
- </style>
- </object>
- </child>
+ <style>
+ <class name="circular"/>
+ </style>
</object>
</child>
</object>
</child>
<child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
+ <object class="GtkButton">
+ <property name="label" translatable="yes">Pill Button</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
+ <property name="hexpand">True</property>
+ <property name="tooltip-text">pill</property>
+ <style>
+ <class name="pill"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
+ <property name="hexpand">True</property>
<child>
<object class="GtkButton">
- <property name="label" translatable="yes">Pill Button</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <property name="tooltip-text">pill</property>
+ <property name="icon-name">go-previous-symbolic</property>
+ <property name="tooltip-text">osd</property>
<style>
- <class name="pill"/>
+ <class name="osd"/>
</style>
</object>
</child>
- </object>
- </child>
- <child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
<child>
- <object class="GtkBox">
- <property name="spacing">6</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <child>
- <object class="GtkButton">
- <property name="icon-name">go-previous-symbolic</property>
- <property name="tooltip-text">osd</property>
- <style>
- <class name="osd"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkButton">
- <property name="icon-name">go-next-symbolic</property>
- <property name="tooltip-text">osd</property>
- <style>
- <class name="osd"/>
- </style>
- </object>
- </child>
+ <object class="GtkButton">
+ <property name="icon-name">go-next-symbolic</property>
+ <property name="tooltip-text">osd</property>
+ <style>
+ <class name="osd"/>
+ </style>
</object>
</child>
</object>
@@ -259,18 +227,14 @@ The "opaque" style class allows to create buttons with custom colors that look s
<object class="AdwPreferencesGroup">
<property name="title" translatable="yes">Entries</property>
<child>
- <object class="GtkFlowBox">
- <property name="min-children-per-line">1</property>
- <property name="max-children-per-line">3</property>
- <property name="column-spacing">6</property>
- <property name="row-spacing">6</property>
- <property name="selection-mode">none</property>
- <style>
- <class name="inline"/>
- </style>
+ <object class="GtkBox">
+ <property name="spacing">6</property>
+ <property name="orientation">vertical</property>
<child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
+ <object class="GtkBox" id="entry_box_1">
+ <property name="spacing">6</property>
+ <property name="homogeneous">True</property>
+ <property name="hexpand">True</property>
<child>
<object class="GtkEntry">
<property name="placeholder-text" translatable="yes">Regular</property>
@@ -278,11 +242,6 @@ The "opaque" style class allows to create buttons with custom colors that look s
<property name="secondary-icon-name">edit-copy-symbolic</property>
</object>
</child>
- </object>
- </child>
- <child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
<child>
<object class="GtkEntry">
<property name="placeholder-text" translatable="yes">Success</property>
@@ -297,8 +256,10 @@ The "opaque" style class allows to create buttons with custom colors that look s
</object>
</child>
<child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
+ <object class="GtkBox" id="entry_box_2">
+ <property name="spacing">6</property>
+ <property name="homogeneous">True</property>
+ <property name="hexpand">True</property>
<child>
<object class="GtkEntry">
<property name="placeholder-text" translatable="yes">Warning</property>
@@ -310,11 +271,6 @@ The "opaque" style class allows to create buttons with custom colors that look s
</style>
</object>
</child>
- </object>
- </child>
- <child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
<child>
<object class="GtkEntry">
<property name="placeholder-text" translatable="yes">Error</property>
@@ -447,192 +403,177 @@ The "opaque" style class allows to create buttons with custom colors that look s
<object class="AdwPreferencesGroup">
<property name="title" translatable="yes">Labels</property>
<child>
- <object class="GtkFlowBox">
- <property name="min-children-per-line">1</property>
- <property name="max-children-per-line">2</property>
- <property name="column-spacing">12</property>
- <property name="row-spacing">18</property>
- <property name="selection-mode">none</property>
- <style>
- <class name="inline"/>
- </style>
+ <object class="GtkBox" id="label_box">
+ <property name="spacing">18</property>
<child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="spacing">12</property>
+ <property name="hexpand">True</property>
<child>
- <object class="GtkBox">
- <property name="orientation">vertical</property>
- <property name="spacing">12</property>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Title 1</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">title-1</property>
- <style>
- <class name="title-1"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Title 2</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">title-2</property>
- <style>
- <class name="title-2"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Title 3</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">title-3</property>
- <style>
- <class name="title-3"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Title 4</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">title-4</property>
- <style>
- <class name="title-4"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Monospace</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">monospace</property>
- <style>
- <class name="monospace"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Numeric (1234567890)</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">numeric</property>
- <style>
- <class name="numeric"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Accent</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">accent</property>
- <style>
- <class name="accent"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Success</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">success</property>
- <style>
- <class name="success"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Warning</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">warning</property>
- <style>
- <class name="warning"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Error</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">error</property>
- <style>
- <class name="error"/>
- </style>
- </object>
- </child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Title 1</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">title-1</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Title 2</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">title-2</property>
+ <style>
+ <class name="title-2"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Title 3</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">title-3</property>
+ <style>
+ <class name="title-3"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Title 4</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">title-4</property>
+ <style>
+ <class name="title-4"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Monospace</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">monospace</property>
+ <style>
+ <class name="monospace"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Numeric (1234567890)</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">numeric</property>
+ <style>
+ <class name="numeric"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Accent</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">accent</property>
+ <style>
+ <class name="accent"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Success</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">success</property>
+ <style>
+ <class name="success"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Warning</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">warning</property>
+ <style>
+ <class name="warning"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Error</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">error</property>
+ <style>
+ <class name="error"/>
+ </style>
</object>
</child>
</object>
</child>
<child>
- <object class="GtkFlowBoxChild">
- <property name="focusable">False</property>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="spacing">12</property>
+ <property name="hexpand">True</property>
<child>
- <object class="GtkBox">
- <property name="orientation">vertical</property>
- <property name="spacing">12</property>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Heading</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">heading</property>
- <style>
- <class name="heading"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">This is a paragraph of a body
copy. You would use this style for most text in interfaces. It can also include <b>styling</b> or
<a href="https://os.gnome.org/";>links</a>.</property>
- <property name="use-markup">True</property>
- <property name="xalign">0</property>
- <property name="wrap">True</property>
- <property name="wrap-mode">word-char</property>
- <property name="max-width-chars">25</property>
- <property name="tooltip-text">body</property>
- <style>
- <class name="body"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Caption Heading</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="tooltip-text">caption-heading</property>
- <style>
- <class name="caption-heading"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel">
- <property name="label" translatable="yes">Caption body text, to be used
for body copy on image captions and the like.</property>
- <property name="xalign">0</property>
- <property name="wrap">True</property>
- <property name="wrap-mode">word-char</property>
- <property name="max-width-chars">25</property>
- <property name="tooltip-text">caption</property>
- <style>
- <class name="caption"/>
- </style>
- </object>
- </child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Heading</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">heading</property>
+ <style>
+ <class name="heading"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">This is a paragraph of a body
copy. You would use this style for most text in interfaces. It can also include <b>styling</b> or
<a href="https://os.gnome.org/";>links</a>.</property>
+ <property name="use-markup">True</property>
+ <property name="xalign">0</property>
+ <property name="wrap">True</property>
+ <property name="wrap-mode">word-char</property>
+ <property name="max-width-chars">25</property>
+ <property name="tooltip-text">body</property>
+ <style>
+ <class name="body"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Caption Heading</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="tooltip-text">caption-heading</property>
+ <style>
+ <class name="caption-heading"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Caption body text, to be used for
body copy on image captions and the like.</property>
+ <property name="xalign">0</property>
+ <property name="wrap">True</property>
+ <property name="wrap-mode">word-char</property>
+ <property name="max-width-chars">25</property>
+ <property name="tooltip-text">caption</property>
+ <style>
+ <class name="caption"/>
+ </style>
</object>
</child>
</object>
@@ -1133,6 +1074,19 @@ The "raised" style class can be used to make a button inside a toolbar use defau
</child>
</object>
</property>
+ <child>
+ <object class="AdwAdaptiveState">
+ <conditions>
+ <condition type="max-width">600</condition>
+ </conditions>
+ <setter object="button_box_1" property="orientation">vertical</setter>
+ <setter object="button_box_2" property="orientation">vertical</setter>
+ <setter object="entry_box_1" property="orientation">vertical</setter>
+ <setter object="entry_box_2" property="orientation">vertical</setter>
+ <setter object="label_box" property="orientation">vertical</setter>
+ <setter object="label_box" property="spacing">12</setter>
+ </object>
+ </child>
</template>
<object class="GtkWindow" id="header_bar_window">
<property name="modal">True</property>
diff --git a/demo/style.css b/demo/style.css
index 6f4e5d08..a96a87ec 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -18,12 +18,6 @@ stacksidebar {
margin-bottom: 36px;
}
-flowbox.inline flowboxchild {
- padding: 0;
- background: none;
- color: inherit;
-}
-
#custom-button-1 {
color: @red_3;
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
