At the end there is a tweak for the one I like.
We also need to add a class to the widget box when activate the widget to put in it by css a active state with box-shadow, like the one I remove for spin buttons.
############################CSS TO DEBUG MODE######################## /* You can type here any CSS rule recognised by GTK+. You can temporarily disable this custom CSS by clicking on the “Pause” button above.
Changes are applied instantly and globally, for the whole application. */
/*First hide less liked*/
#MySpinScale4{ opacity:0; } #MySpinScale3{ opacity:0; } #MySpinScale2{ opacity:0; } #MySpinScale1{ opacity:0; }
/*add padding for better look*/ box{ padding:10px; } box box{ padding:0px; }
/*tiny*/ spinbutton, entry, button { min-height: 2px; padding: 2px; margin: 0; }
/*my winner*/
#MySpinScale5 { background: #fff; border:#999; border-style:solid; border-width:1px; border-radius:3px; }
#MySpinScale5 spinbutton { background-color: #fff; border-color:#eee; border-width:0 0 0 1px; border-radius:0 3px 3px 0; box-shadow:none; } #MySpinScale5.activeNotWorkingJet { box-shadow: 0 0 0 1px #8080FF; } #############################################################
Cheers, Jabier.
On Wed, 2017-12-06 at 17:02 +0100, Tavmjong Bah wrote:
Hi all,
I've taken into account all the feedback and have developed a little test program that shows of a number of solutions to replacing the Gimp Spin Scale widget.
A gzipped tar file of the source code is attached so that you can try out the solutions (should be trivial to compile on Linux if you have the Gtk3 libraries). Not all of the solutions fully work as I didn't take the time to make them... but you should be able to get a feel for them. If you run in debug mode (see README) you can interactively add CSS. I've include an example CSS file you can paste into the debug window (ignore the colors, they were just for experimenting).
I've also attached PNGs of the widgets with and without the extra CSS.
The five solutions, from top to bottom, are:
- Custom Gtk::Range widget couple with Gtk::Spinbutton:
This is my current favorite. It works quite well, methinks. Use the 'Alt' key to get into fine adjustment mode. It was rather simple to implement. Could be refined further (add styling properties, rounded corners, etc.).
- Gtk::Scrollbar coupled with Gtk::Spinbutton:
Works rather well, but doesn't show as well the current value. Using a narrow "slider" prevents it from covering up the text (text not implemented yet). I didn't know it before, but if one clicks on the slider and doesn't move for a second or two it enters into a fine- adjustment mode.
- Gkt::ProgressBar coupled with Gtk::Spinbutton:
CSS can get this looking pretty good but some extra work has to be done as the ProgressBar doesn't have an "adjustment", the class that actually handles tracking a value. The Gtk::Spinbutton actually contains a ProgressBar but while one can style it via CSS one can't directly access it and it overlaps the numerical entry part of the SpinButton (this is how the Gimp widget works).
- Subclassed Gtk::Spinbutton:
This is essentially a modified version of the Gimp widget but it has some major flaws as one cannot access the underlying widgets (ProgressBar, Buttons). In this example, the built in ProgressBar is disabled and new code that simulates a narrower ProgressBar has been added. I could not fine a good way to calculate how much narrower the new bar needs to be to not overlap the numerical entry part. Also, when dragging the bar it is easy to highlight the numerical text. The code to do all this is pretty messy.
- Gtk::Scale coupled with Gtk::Spinbutton:
CSS can make this look reasonable. Reducing the size of the circle will prevent it from covering text (text not implemented yet). Gtk::Scale also has a fine-adjustment mode accessed the same was as for a scrollbar.
Tav
Check out the vibrant tech community on one of the world's most engaging tech sites, Slashdot.org! http://sdm.link/slashdot _______________________________________________ Inkscape-devel mailing list Inkscape-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-devel