From 465af55d6ee4400bf485dd27af9347d070f9d52b Mon Sep 17 00:00:00 2001 From: Carlos Soriano Date: Thu, 26 Sep 2013 18:09:55 +0200 Subject: [PATCH] theme: Add hover/active states to indicators Until now we had the same svg for hover, active and checked states in the pagination indicators. Just differentiate between them using differents svg. svg files provided by Jakub Steiner https://bugzilla.gnome.org/show_bug.cgi?id=708852 --- data/Makefile.am | 4 +- data/theme/gnome-shell.css | 12 ++++- data/theme/page-indicator-active.svg | 26 +++++----- data/theme/page-indicator-checked.svg | 67 ++++++++++++++++++++++++++ data/theme/page-indicator-hover.svg | 67 ++++++++++++++++++++++++++ data/theme/page-indicator-inactive.svg | 8 +-- 6 files changed, 166 insertions(+), 18 deletions(-) create mode 100644 data/theme/page-indicator-checked.svg create mode 100644 data/theme/page-indicator-hover.svg diff --git a/data/Makefile.am b/data/Makefile.am index 439b849fd..13df74ef3 100644 --- a/data/Makefile.am +++ b/data/Makefile.am @@ -45,8 +45,10 @@ dist_theme_DATA = \ theme/message-tray-background.png \ theme/more-results.svg \ theme/noise-texture.png \ - theme/page-indicator-active.svg \ + theme/page-indicator-active.svg \ theme/page-indicator-inactive.svg \ + theme/page-indicator-checked.svg \ + theme/page-indicator-hover.svg \ theme/panel-button-border.svg \ theme/panel-button-highlight-narrow.svg \ theme/panel-button-highlight-wide.svg \ diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 62a7eae20..829d42bb7 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -950,11 +950,19 @@ StScrollBar StButton#vhandle:active { background-image: url(page-indicator-inactive.svg); } -.page-indicator:hover .page-indicator-icon, -.page-indicator:checked .page-indicator-icon { +.page-indicator:hover .page-indicator-icon { + background-image: url(page-indicator-hover.svg); +} + +.page-indicator:active .page-indicator-icon, +.page-indicator:checked:active .page-indicator-icon { background-image: url(page-indicator-active.svg); } +.page-indicator:checked .page-indicator-icon { + background-image: url(page-indicator-checked.svg); +} + .no-frequent-applications-label { font-size: 18pt; color: #999999; diff --git a/data/theme/page-indicator-active.svg b/data/theme/page-indicator-active.svg index 38b720f86..51a76024e 100644 --- a/data/theme/page-indicator-active.svg +++ b/data/theme/page-indicator-active.svg @@ -14,7 +14,7 @@ id="svg4703" version="1.1" inkscape:version="0.48.4 r9939" - sodipodi:docname="page-indicator-active.svg"> + sodipodi:docname="page-indicator-pushed.svg"> + inkscape:window-maximized="1"> + + @@ -44,7 +48,7 @@ image/svg+xml - + @@ -54,14 +58,14 @@ inkscape:groupmode="layer" transform="translate(0,2)"> diff --git a/data/theme/page-indicator-checked.svg b/data/theme/page-indicator-checked.svg new file mode 100644 index 000000000..38b720f86 --- /dev/null +++ b/data/theme/page-indicator-checked.svg @@ -0,0 +1,67 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/data/theme/page-indicator-hover.svg b/data/theme/page-indicator-hover.svg new file mode 100644 index 000000000..a4ea72ffd --- /dev/null +++ b/data/theme/page-indicator-hover.svg @@ -0,0 +1,67 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/data/theme/page-indicator-inactive.svg b/data/theme/page-indicator-inactive.svg index 3048f5628..4ff2246c8 100644 --- a/data/theme/page-indicator-inactive.svg +++ b/data/theme/page-indicator-inactive.svg @@ -25,14 +25,14 @@ inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:zoom="11.313709" - inkscape:cx="13.381365" + inkscape:cx="-2.307566" inkscape:cy="17.859535" inkscape:current-layer="layer1" showgrid="true" inkscape:grid-bbox="true" inkscape:document-units="px" - inkscape:window-width="1920" - inkscape:window-height="1021" + inkscape:window-width="2560" + inkscape:window-height="1374" inkscape:window-x="0" inkscape:window-y="27" inkscape:window-maximized="1" /> @@ -55,7 +55,7 @@ transform="translate(0,2)">