Skip to content
This repository has been archived by the owner on Nov 1, 2024. It is now read-only.

Commit

Permalink
Improvements to feed items (#125)
Browse files Browse the repository at this point in the history 
* 💄 Improvements to feed items

* 💄 Overlay for thumbnail when playing or downloading

* 💄 Further UI improvements

Moved scroll bar to the right and changed the foreground color.

* 💄 Fix highlighting overflowing from list item

* 🐛 Bug fixes

* 🐛 Fix transition
  • Loading branch information
@Schmiddiii
Schmiddiii authored Apr 15, 2023
1 parent d614993 commit e9612d0
Show file tree
Hide file tree
Showing 9 changed files with 268 additions and 137 deletions.
3 changes: 3 additions & 0 deletions data/resources/resources.gresource.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,7 @@
<file preprocess="xml-stripblanks" alias="scalable/actions/funnel-symbolic.svg">../icons/funnel-symbolic.svg</file>
<file preprocess="xml-stripblanks" alias="scalable/actions/library-artists-symbolic.svg">../icons/library-artists-symbolic.svg</file>
</gresource>
<gresource prefix="/de/schmidhuberj/tubefeeder/">
<file compressed="true">style.css</file>
</gresource>
</gresources>
14 changes: 14 additions & 0 deletions data/resources/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.osd {
/* The osd above the thumbnails are not rounded by default */
border-radius: 6pt;
}

/* For the feed list, the default view class overwrites the card-color. Undo that */
.feed-list {
background-color: @card_bg_color;
color: @card_fg_color;
}

.feed-list row {
transition: background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
230 changes: 122 additions & 108 deletions data/resources/ui/feed_item.ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,11 @@
<property name="spacing">8</property>
<property name="hexpand">True</property>
<property name="halign">GTK_ALIGN_FILL</property>
<property name="margin-start">5</property>
<property name="margin-end">5</property>
<property name="margin-top">5</property>
<property name="margin-bottom">5</property>

<child>
<object class="GtkImage" id="playing">
<property name="icon-name">media-playback-start-symbolic</property>
<binding name="visible">
<lookup name="playing">
<lookup name="video" type="TFFeedItem">
</lookup>
</lookup>
</binding>
</object>
</child>
<child>
<object class="GtkImage" id="downloading">
<property name="icon-name">folder-download-symbolic</property>
<binding name="visible">
<lookup name="downloading">
<lookup name="video" type="TFFeedItem">
</lookup>
</lookup>
</binding>
</object>
</child>
<child>
<object class="TFThumbnail" id="thumbnail">
<binding name="video">
Expand All @@ -38,12 +20,14 @@
</binding>
</object>
</child>

<child>
<object class="GtkBox" id="box_info">
<property name="orientation">GTK_ORIENTATION_VERTICAL</property>
<property name="vexpand">True</property>
<property name="hexpand">True</property>
<property name="spacing">0</property>
<property name="spacing">5</property>

<child>
<object class="GtkLabel" id="label_title">
<binding name="label">
Expand All @@ -60,97 +44,127 @@
<property name="halign">GTK_ALIGN_START</property>
</object>
</child>

<child>
<object class="GtkLabel" id="label_author">
<style>
<class name="caption"/>
</style>
<binding name="label">
<lookup name="author">
<lookup name="video" type="TFFeedItem">
</lookup>
</lookup>
</binding>
<property name="ellipsize">PANGO_ELLIPSIZE_END</property>
<property name="wrap">true</property>
<property name="wrap-mode">PANGO_WRAP_WORD</property>
<property name="lines">2</property>
<property name="justify">GTK_JUSTIFY_LEFT</property>
<property name="halign">GTK_ALIGN_START</property>
</object>
</child>
<child>
<object class="GtkLabel" id="label_platform">
<style>
<class name="caption"/>
</style>
<binding name="label">
<lookup name="platform">
<lookup name="video" type="TFFeedItem">
</lookup>
</lookup>
</binding>
<property name="ellipsize">PANGO_ELLIPSIZE_END</property>
<property name="wrap">true</property>
<property name="wrap-mode">PANGO_WRAP_WORD</property>
<property name="lines">2</property>
<property name="justify">GTK_JUSTIFY_LEFT</property>
<property name="halign">GTK_ALIGN_START</property>
</object>
</child>
<child>
<object class="GtkLabel" id="label_date">
<style>
<class name="caption"/>
</style>
<binding name="label">
<lookup name="date">
<lookup name="video" type="TFFeedItem">
</lookup>
</lookup>
</binding>
<property name="ellipsize">PANGO_ELLIPSIZE_END</property>
<property name="wrap">true</property>
<property name="wrap-mode">PANGO_WRAP_WORD</property>
<property name="lines">2</property>
<property name="justify">GTK_JUSTIFY_LEFT</property>
<property name="halign">GTK_ALIGN_START</property>
</object>
</child>
<child>
<object class="GtkImage" id="is-local">
<property name="halign">GTK_ALIGN_START</property>
<property name="icon-name">folder-download-symbolic</property>
<binding name="visible">
<lookup name="is-local">
<lookup name="video" type="TFFeedItem">
</lookup>
</lookup>
</binding>
<object class="GtkBox">
<property name="orientation">GTK_ORIENTATION_HORIZONTAL</property>
<child>
<object class="GtkBox">
<property name="orientation">GTK_ORIENTATION_VERTICAL</property>
<property name="spacing">5</property>
<child>
<object class="GtkBox">
<property name="spacing">10</property>
<property name="orientation">GTK_ORIENTATION_HORIZONTAL</property>
<child>
<object class="GtkLabel" id="label_author">
<style>
<class name="caption"/>
</style>
<binding name="label">
<lookup name="author">
<lookup name="video" type="TFFeedItem">
</lookup>
</lookup>
</binding>
<property name="ellipsize">PANGO_ELLIPSIZE_END</property>
<property name="wrap">true</property>
<property name="wrap-mode">PANGO_WRAP_WORD</property>
<property name="lines">2</property>
<property name="justify">GTK_JUSTIFY_LEFT</property>
<property name="halign">GTK_ALIGN_START</property>
</object>
</child>
<child>
<object class="GtkLabel" id="label_platform">
<style>
<class name="caption"/>
</style>
<binding name="label">
<lookup name="platform">
<lookup name="video" type="TFFeedItem">
</lookup>
</lookup>
</binding>
<property name="ellipsize">PANGO_ELLIPSIZE_END</property>
<property name="wrap">true</property>
<property name="wrap-mode">PANGO_WRAP_WORD</property>
<property name="lines">2</property>
<property name="justify">GTK_JUSTIFY_LEFT</property>
<property name="halign">GTK_ALIGN_START</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkLabel" id="label_date">
<style>
<class name="caption"/>
</style>
<binding name="label">
<lookup name="date">
<lookup name="video" type="TFFeedItem">
</lookup>
</lookup>
</binding>
<property name="ellipsize">PANGO_ELLIPSIZE_END</property>
<property name="wrap">true</property>
<property name="wrap-mode">PANGO_WRAP_WORD</property>
<property name="lines">2</property>
<property name="justify">GTK_JUSTIFY_LEFT</property>
<property name="halign">GTK_ALIGN_START</property>
</object>
</child>
<child>
<object class="GtkImage" id="is-local">
<property name="halign">GTK_ALIGN_START</property>
<property name="icon-name">folder-download-symbolic</property>
<binding name="visible">
<lookup name="is-local">
<lookup name="video" type="TFFeedItem">
</lookup>
</lookup>
</binding>
</object>
</child>
</object>
</child>

<child>
<object class="GtkBox">
<style>
<class name="linked"/>
</style>
<property name="orientation">GTK_ORIENTATION_HORIZONTAL</property>
<property name="hexpand">true</property>
<property name="halign">end</property>
<child>
<object class="GtkMenuButton">
<property name="menu-model">menu</property>
<property name="halign">center</property>
<property name="valign">center</property>
<property name="hexpand">false</property>
<property name="vexpand">false</property>
</object>
</child>
<child>
<object class="GtkButton" id="watch_later">
<property name="icon-name">appointment-new-symbolic</property>
<property name="halign">center</property>
<property name="valign">center</property>
<property name="vexpand">false</property>
<property name="hexpand">false</property>
<property name="margin-end">7</property>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkMenuButton">
<property name="menu-model">menu</property>
<property name="halign">center</property>
<property name="valign">center</property>
<property name="hexpand">false</property>
<property name="vexpand">false</property>
</object>
</child>
<child>
<object class="GtkButton" id="watch_later">
<property name="icon-name">appointment-new-symbolic</property>
<property name="halign">center</property>
<property name="valign">center</property>
<property name="vexpand">false</property>
<property name="hexpand">false</property>
<property name="margin-end">7</property>
</object>
</child>
</template>

<menu id="menu">
<section>
<item>
Expand Down
58 changes: 37 additions & 21 deletions data/resources/ui/feed_list.ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,48 @@
<object class="GtkScrolledWindow">
<property name="hscrollbar-policy">GTK_POLICY_NEVER</property>
<child>
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="vexpand">True</property>
<property name="valign">GTK_ALIGN_FILL</property>
<property name="hexpand">True</property>
<property name="halign">GTK_ALIGN_FILL</property>
<object class="AdwClamp">
<child>
<object class="GtkListView" id="feed_list">
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="vexpand">True</property>
<property name="valign">GTK_ALIGN_FILL</property>
<property name="hexpand">True</property>
<property name="halign">GTK_ALIGN_FILL</property>
</object>
</child>
<child>
<object class="GtkButton" id="load_more">
<binding name="visible">
<lookup name="more-available" type="TFFeedList">
</lookup>
</binding>
<property name="label" translatable="yes">Load more</property>
<property name="vexpand">False</property>
<property name="valign">GTK_ALIGN_FILL</property>
<property name="hexpand">True</property>
<property name="halign">GTK_ALIGN_FILL</property>
<property name="action-name">feed.more</property>
<child>
<object class="GtkListView" id="feed_list">
<style>
<class name="card"/>
<class name="separators"/>
<class name="feed-list"/>
</style>
<property name="margin-start">5</property>
<property name="margin-end">5</property>
<property name="margin-top">5</property>
<property name="margin-bottom">5</property>

<property name="vexpand">True</property>
<property name="valign">GTK_ALIGN_START</property>
<property name="hexpand">True</property>
<property name="halign">GTK_ALIGN_FILL</property>
<!-- Fix issue where highlighting the first/last item in the list would cut off the highlighting -->
<property name="overflow">visible</property>
</object>
</child>
<child>
<object class="GtkButton" id="load_more">
<binding name="visible">
<lookup name="more-available" type="TFFeedList">
</lookup>
</binding>
<property name="label" translatable="yes">Load more</property>
<property name="vexpand">False</property>
<property name="valign">GTK_ALIGN_FILL</property>
<property name="hexpand">True</property>
<property name="halign">GTK_ALIGN_FILL</property>
<property name="action-name">feed.more</property>
</object>
</child>
</object>
</child>
</object>
Expand Down
Loading

0 comments on commit e9612d0

Please sign in to comment.