Skip to content

Commit

Permalink
improved ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nokse22
Nokse22 committed Apr 2, 2024
1 parent f2ff7cf commit 90461fb
Show file tree
Hide file tree
Showing 4 changed files with 210 additions and 132 deletions.
11 changes: 5 additions & 6 deletions src/ui/pages_ui/page_template.ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@
<!-- interface-name login.ui -->
<requires lib="gtk" version="4.10"/>
<requires lib="libadwaita" version="1.3"/>
<object class="GtkBox" id="_main">
<property name="orientation">vertical</property>
<child>
<object class="AdwToolbarView" id="_main">
<!-- <property name="orientation">vertical</property> -->
<child type="top">
<object class="AdwHeaderBar">
<property name="css-classes">flat</property>
</object>
</child>
<child>
<property name="content">
<object class="GtkBox" id="_content">
<property name="vexpand">True</property>
<child>
Expand All @@ -26,6 +25,6 @@
</object>
</child>
</object>
</child>
</property>
</object>
</interface>
320 changes: 200 additions & 120 deletions src/ui/pages_ui/tracks_list_template.ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,134 +4,214 @@
<!-- interface-name tracks_list_template.ui -->
<requires lib="gtk" version="4.6"/>
<requires lib="libadwaita" version="1.0"/>
<object class="GtkBox" id="_main">
<property name="orientation">vertical</property>
<property name="vexpand">True</property>
<child>
<object class="AdwClamp">
<property name="maximum-size">1000</property>
<property name="tightening-threshold">700</property>
<property name="valign">start</property>
<property name="vexpand-set">true</property>
<child>
<object class="AdwBreakpointBin">
<property name="width-request">10</property>
<property name="height-request">10</property>
<child>
<object class="AdwBreakpoint">
<condition>max-width: 400px</condition>
<setter object="_image" property="pixel-size">60</setter>
</object>
</child>
<property name="child">
<object class="GtkBox">
<property name="valign">start</property>
<child>
<object class="GtkImage" id="_image">
<property name="icon-name">emblem-music-symbolic</property>
<property name="css-classes">small-image</property>
<property name="overflow">hidden</property>
<property name="margin-bottom">12</property>
<property name="margin-end">12</property>
<property name="margin-start">12</property>
<property name="margin-top">12</property>
<property name="pixel-size">100</property>
</object>
</child>
<child>
<object class="GtkBox">
<property name="hexpand">True</property>
<property name="margin-top">12</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkLabel" id="_title_label">
<property name="css-classes">title-2</property>
<property name="ellipsize">end</property>
<property name="vexpand">True</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkLabel" id="_first_subtitle_label">
<property name="css-classes">dim-label</property>
<property name="ellipsize">end</property>
<property name="vexpand">True</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkLabel" id="_second_subtitle_label">
<property name="css-classes">dim-label</property>
<property name="ellipsize">end</property>
<property name="vexpand">True</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkButton" id="_artist_button">
<property name="visible">false</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkBox">
<property name="halign">end</property>
<property name="margin-end">12</property>
<property name="spacing">6</property>
<property name="valign">center</property>
<child>
<object class="GtkButton" id="_add_to_my_collection_button">
<property name="icon-name">heart-outline-thick-symbolic</property>
<property name="css-classes">flat</property>
</object>
</child>
<child>
<object class="GtkButton" id="_shuffle_button">
<property name="icon-name">media-playlist-shuffle-symbolic</property>
<property name="css-classes">flat</property>
<object class="AdwBreakpointBin" id="_main">
<property name="width-request">10</property>
<property name="height-request">300</property>
<child>
<object class="AdwBreakpoint">
<condition>max-width: 400px</condition>
<!-- <setter object="_image" property="pixel-size">60</setter> -->
<setter object="_vertical_layout_box" property="visible">true</setter>
<setter object="_horizontal_layout_box" property="visible">false</setter>
</object>
</child>
<property name="child">
<object class="GtkScrolledWindow">
<property name="vexpand">True</property>
<property name="hexpand">True</property>
<child>
<object class="GtkBox">
<property name="orientation">vertical</property>
<child>
<object class="AdwClamp">
<property name="maximum-size">1000</property>
<property name="tightening-threshold">700</property>
<property name="valign">start</property>
<property name="vexpand-set">true</property>
<child>
<object class="GtkBox">
<property name="orientation">vertical</property>

<child>
<object class="GtkBox" id="_horizontal_layout_box">
<property name="valign">start</property>
<child>
<object class="GtkImage" id="_image">
<property name="icon-name">emblem-music-symbolic</property>
<property name="css-classes">small-image</property>
<property name="overflow">hidden</property>
<property name="margin-bottom">12</property>
<property name="margin-end">12</property>
<property name="margin-start">12</property>
<property name="margin-top">12</property>
<property name="pixel-size">100</property>
</object>
</child>
<child>
<object class="GtkBox">
<property name="hexpand">True</property>
<property name="margin-top">12</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkLabel" id="_title_label">
<property name="css-classes">title-2</property>
<property name="ellipsize">end</property>
<property name="vexpand">True</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkLabel" id="_first_subtitle_label">
<property name="css-classes">dim-label</property>
<property name="ellipsize">end</property>
<property name="vexpand">True</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkLabel" id="_second_subtitle_label">
<property name="css-classes">dim-label</property>
<property name="ellipsize">end</property>
<property name="vexpand">True</property>
<property name="xalign">0.0</property>
</object>
</child>
<child>
<object class="GtkButton" id="_artist_button">
<property name="visible">false</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkBox">
<property name="halign">end</property>
<property name="margin-end">12</property>
<property name="spacing">6</property>
<property name="valign">center</property>
<child>
<object class="GtkButton" id="_add_to_my_collection_button">
<property name="icon-name">heart-outline-thick-symbolic</property>
<property name="css-classes">flat</property>
</object>
</child>
<child>
<object class="GtkButton" id="_shuffle_button">
<property name="icon-name">media-playlist-shuffle-symbolic</property>
<property name="css-classes">flat</property>
</object>
</child>
<child>
<object class="GtkButton" id="_play_button">
<property name="css-classes">suggested-action</property>
<property name="icon-name">media-playback-start-symbolic</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkButton" id="_play_button">
<property name="css-classes">suggested-action</property>
<property name="icon-name">media-playback-start-symbolic</property>
</object>
</child>
</object>
</child>
</object>
</property>

<child>
<object class="GtkBox" id="_vertical_layout_box">
<property name="height-request">200</property>
<property name="orientation">vertical</property>
<property name="spacing">12</property>
<property name="visible">false</property>
<property name="margin-top">12</property>
<property name="margin-bottom">12</property>
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<child>
<object class="GtkImage">
<property name="css-classes">small-image</property>
<property name="halign">center</property>
<property name="icon-name">emblem-music-symbolic</property>
<property name="pixel-size">160</property>
<property name="overflow">hidden</property>
<property name="file" bind-source="_image" bind-property="file"/>
</object>
</child>
<child>
<object class="GtkLabel" id="_title_label2">
<property name="css-classes">title-1</property>
<property name="valign">start</property>
<property name="label" bind-source="_title_label" bind-property="label"/>
</object>
</child>
<child>
<object class="GtkLabel" id="_first_subtitle_label2">
<property name="css-classes">dim-label</property>
<property name="valign">start</property>
<property name="wrap">true</property>
<property name="justify">center</property>
<property name="label" bind-source="_first_subtitle_label" bind-property="label"/>
</object>
</child>
<child>
<object class="GtkBox">
<property name="halign">center</property>
<property name="spacing">12</property>
<property name="valign">center</property>
<child>
<object class="GtkButton">
<property name="css-classes">pill
suggested-action</property>
<property name="icon-name">media-playback-start-symbolic</property>
</object>
</child>
<child>
<object class="GtkButton">
<property name="css-classes">pill</property>
<property name="icon-name">media-playlist-shuffle-symbolic</property>
</object>
</child>
<child>
<object class="GtkButton">
<property name="css-classes">circular
flat</property>
<property name="icon-name">list-add-symbolic</property>
<property name="valign">center</property>
</object>
</child>
</object>
</child>
</object>
</child>


</object>
</child>
</object>
</child>
<child>
<object class="GtkSeparator">
<property name="valign">start</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkSeparator">
<property name="valign">start</property>
</object>
</child>
<child>
<object class="GtkScrolledWindow">
<property name="vexpand">True</property>
<child>
<object class="AdwClamp">
<property name="vexpand">True</property>
<property name="maximum-size">1000</property>
<property name="tightening-threshold">700</property>
<child>
<object class="GtkListBox" id="_list_box">
<property name="valign">start</property>
<property name="margin-top">12</property>
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<property name="margin-bottom">12</property>
<property name="css-classes">boxed-list</property>
<!-- <object class="GtkScrolledWindow"> -->
<!-- <property name="vexpand">True</property> -->
<!-- <child> -->
<object class="AdwClamp">
<property name="vexpand">True</property>
<property name="maximum-size">1000</property>
<property name="tightening-threshold">700</property>
<child>
<object class="GtkListBox" id="_list_box">
<property name="valign">start</property>
<property name="margin-top">12</property>
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<property name="margin-bottom">12</property>
<property name="css-classes">boxed-list</property>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</property>
</object>
</interface>
2 changes: 1 addition & 1 deletion src/ui/widgets/card_widget.ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<object class="GtkImage" id="image">
<property name="halign">center</property>
<property name="icon-name">emblem-music-symbolic</property>
<property name="pixel-size">180</property>
<property name="pixel-size">155</property>
<property name="valign">center</property>
<property name="css-classes">card-image</property>
</object>
Expand Down
Loading

0 comments on commit 90461fb

Please sign in to comment.