AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'emoji-searchbar' into 'master'

Browse Source 
Adwaita: Improve emoji picker styling

See merge request GNOME/gtk!2949
This commit is contained in:
Jakub Steiner 2020-12-14 09:38:45 +00:00
commit fd0a03cf78
3 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
gtk/gtkemojichooser.c
View File

@ -54,6 +54,8 @@
* # CSS nodes
* |[<!-- language="plain" -->
* popover
* ├── box.emoji-searchbar
* │ ╰── entry.search
* ╰── box.emoji-toolbar
* ├── button.image-button.emoji-section
* ├── ...
@ -63,6 +65,8 @@
* Every #GtkEmojiChooser consists of a main node called popover.
* The contents of the popover are largely implementation defined
* and supposed to inherit general styles.
* The top searchbar used to search emoji and gets the .emoji-searchbar
* style class itself.
* The bottom toolbar used to switch between different emoji categories
* consists of buttons with the .emoji-section style class and gets the
* .emoji-toolbar style class itself.

25
gtk/theme/Adwaita/_common.scss
View File

@ -4229,8 +4229,18 @@ stackswitcher.circular {
popover.emoji-picker > contents {
padding: 0;
}
entry.search { margin: 5px; }
.emoji-searchbar {
padding: 6px;
border-spacing: 6px;
border-bottom: 1px solid $borders_color;
}
.emoji-toolbar {
padding: 6px;
border-spacing: 6px;
border-top: 1px solid $borders_color;
}
button.emoji-section {
@ -4239,7 +4249,6 @@ button.emoji-section {
border-style: none none solid;
border-radius: 0;
margin: 2px 8px 4px;
padding: 3px 0 0;
min-width: 32px;
min-height: 28px;
@ -4249,20 +4258,8 @@ button.emoji-section {
box-shadow: none;
text-shadow: none;
&:dir(ltr):not(:last-child) { margin-right: 0; }
&:dir(rtl):not(:last-child) { margin-left: 0; }
&:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
&:checked { border-color: $selected_bg_color; }
label {
padding: 0;
opacity: 0.55;
}
&:hover label { opacity: 0.775; }
&:checked label { opacity: 1; }
}
popover.emoji-picker emoji {

16
gtk/ui/gtkemojichooser.ui
View File

@ -8,9 +8,17 @@
<object class="GtkBox" id="box">
<property name="orientation">vertical</property>
<child>
<object class="GtkSearchEntry" id="search_entry">
<signal name="search-changed" handler="search_changed"/>
<signal name="stop-search" handler="stop_search"/>
<object class="GtkBox">
<style>
<class name="emoji-searchbar"/>
</style>
<child>
<object class="GtkSearchEntry" id="search_entry">
<property name="hexpand">1</property>
<signal name="search-changed" handler="search_changed"/>
<signal name="stop-search" handler="stop_search"/>
</object>
</child>
</object>
</child>
<child>
@ -211,7 +219,7 @@
<child>
<object class="GtkBox">
<style>
<class name="emoji-toolbar" />
<class name="emoji-toolbar"/>
</style>
<child>
<object class="GtkButton" id="recent.button">