Hi,
One of the proposed GSOC projects is better CSS style sheet support. There are a number of simple things that can be done to improve Inkscape's use of style sheets and there is one big thing... adding a Style editing dialog. I've made a first stab at designing such a dialog.
The dialog presents a list of CSS selectors.
* Clicking on selector
Selects all matching objects in the SVG document.
* Double clicking on selector
Selects all matching objects in the SVG document and opens CSS dialog.
* Dragging selector
Allows reordering selectors.
* Click on object
Selects all matching selectors.
* Modifying property
If "Sheet" enabled: modifies CSS of highlighted selector if only one selector highlighted otherwise produces error message. If "Attribute" selected: modifies inline style attribute.
* Clicking on '+' in front of selector
Adds selected objects to selector.
* Clicking on 'x' in front of object
Removes object from selector.
* Clicking on '+' at bottom
Opens up text dialog to add new selector. If the selector is a Class selector, adds the class attribute to the selected objects with the value of the selector name. If the class attribute already exists, appends the selector name to the class attribute value (the class attribute can include more than one class name).
* Clicking on 'x' at bottom
Removes selected selectors unless selector is a Class selector. If it is a Class selector: if the selector was selected by clicking on it, remove the selector; if the selector was selected by selecting objects, removes the selector name from all selected objects class attribute.
This dialog could replace the "Selection Sets" dialog, using CSS class attributes to define sets.
Please comment on the dialog here or at:
http://wiki.inkscape.org/wiki/index.php/Style_Editor
Tav
This can be improved to handle CSS pre/post-processing?
Cheers, Jabier.
El jue, 10-03-2016 a las 14:44 +0100, Tavmjong Bah escribió:
Hi,
One of the proposed GSOC projects is better CSS style sheet support. There are a number of simple things that can be done to improve Inkscape's use of style sheets and there is one big thing... adding a Style editing dialog. I've made a first stab at designing such a dialog.
The dialog presents a list of CSS selectors.
- Clicking on selector
Selects all matching objects in the SVG document.
- Double clicking on selector
Selects all matching objects in the SVG document and opens CSS dialog.
- Dragging selector
Allows reordering selectors.
- Click on object
Selects all matching selectors.
- Modifying property
If "Sheet" enabled: modifies CSS of highlighted selector if only one selector highlighted otherwise produces error message. If "Attribute" selected: modifies inline style attribute.
- Clicking on '+' in front of selector
Adds selected objects to selector.
- Clicking on 'x' in front of object
Removes object from selector.
- Clicking on '+' at bottom
Opens up text dialog to add new selector. If the selector is a Class selector, adds the class attribute to the selected objects with the value of the selector name. If the class attribute already exists, appends the selector name to the class attribute value (the class attribute can include more than one class name).
- Clicking on 'x' at bottom
Removes selected selectors unless selector is a Class selector. If it is a Class selector: if the selector was selected by clicking on it, remove the selector; if the selector was selected by selecting objects, removes the selector name from all selected objects class attribute.
This dialog could replace the "Selection Sets" dialog, using CSS class attributes to define sets.
Please comment on the dialog here or at:
http://wiki.inkscape.org/wiki/index.php/Style_Editor
Tav
Transform Data into Opportunity. Accelerate data analysis in your applications with Intel Data Analytics Acceleration Library. Click to learn more. http://pubads.g.doubleclick.net/gampad/clk?id=278785111&iu=/4140 _______________________________________________ Inkscape-devel mailing list Inkscape-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-devel
Maybe a good example is http://sass-lang.com%C2%A0anyway I never use it.
El jue, 10-03-2016 a las 16:02 +0100, Tavmjong Bah escribió:
On Thu, 2016-03-10 at 15:24 +0100, Jabier Arraiza wrote:
This can be improved to handle CSS pre/post-processing?
I'm not sure what you mean. Can you give an example?
Tav
Hi Tav,
I'm adding back in my old css ui ideas:
https://inkscape.org/en/~doctormo/%E2%98%85inkscape-css-editing
My thinking is that the less you can show, the better. The one thing that needs adding to the above is adding a css class to a set of objects.
Martin,
On Thu, 2016-03-10 at 14:44 +0100, Tavmjong Bah wrote:
Hi,
One of the proposed GSOC projects is better CSS style sheet support. There are a number of simple things that can be done to improve Inkscape's use of style sheets and there is one big thing... adding a Style editing dialog. I've made a first stab at designing such a dialog.
The dialog presents a list of CSS selectors.
Clicking on selector
Selects all matching objects in the SVG document.
Double clicking on selector
Selects all matching objects in the SVG document and opens CSS
dialog.
Dragging selector
Allows reordering selectors.
Click on object
Selects all matching selectors.
Modifying property
If "Sheet" enabled: modifies CSS of highlighted selector if only one
selector highlighted otherwise produces error message. If "Attribute" selected: modifies inline style attribute.
Clicking on '+' in front of selector
Adds selected objects to selector.
Clicking on 'x' in front of object
Removes object from selector.
Clicking on '+' at bottom
Opens up text dialog to add new selector. If the selector is a Class
selector, adds the class attribute to the selected objects with the value of the selector name. If the class attribute already exists, appends the selector name to the class attribute value (the class attribute can include more than one class name).
Clicking on 'x' at bottom
Removes selected selectors unless selector is a Class selector. If it
is a Class selector: if the selector was selected by clicking on it, remove the selector; if the selector was selected by selecting objects, removes the selector name from all selected objects class attribute.
This dialog could replace the "Selection Sets" dialog, using CSS class attributes to define sets.
Please comment on the dialog here or at:
http://wiki.inkscape.org/wiki/index.php/Style_Editor
Tav
Transform Data into Opportunity. Accelerate data analysis in your applications with Intel Data Analytics Acceleration Library. Click to learn more. http://pubads.g.doubleclick.net/gampad/clk?id=278785111&iu=/4140 _______________________________________________ Inkscape-devel mailing list Inkscape-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-devel
Am Donnerstag, 10. März 2016, 14:44:26 schrieb Tavmjong Bah:
Hi,
Hi.
One of the proposed GSOC projects is better CSS style sheet support. There are a number of simple things that can be done to improve Inkscape's use of style sheets and there is one big thing... adding a Style editing dialog. I've made a first stab at designing such a dialog.
I wonder, would it be worthwhile to try to abstract the CSS nature of these settings away and present something normal people understand? I know that Inkscape is using SVG as its native format, but to me it's not just an SVG editor but a serious vector graphics tool, capable of much more than just making graphics for websites. Having it write SVG is merely a nice side effect to me and I guess many users.
[...]
Tav
Tobias
On Thu, Mar 10, 2016 at 7:14 PM, Tavmjong Bah <tavmjong@...8...> wrote:
Hi,
One of the proposed GSOC projects is better CSS style sheet support. There are a number of simple things that can be done to improve Inkscape's use of style sheets and there is one big thing... adding a Style editing dialog. I've made a first stab at designing such a dialog.
<snip>
This dialog could replace the "Selection Sets" dialog, using CSS class attributes to define sets.
Please comment on the dialog here or at:
http://wiki.inkscape.org/wiki/index.php/Style_Editor
The design and the organisation of user interface looks pretty to me.
Would like to hear what should I dig first so that I can make contributions.
On Thu, Mar 10, 2016 at 7:14 PM, Tavmjong Bah <tavmjong@...8...> wrote:
This dialog could replace the "Selection Sets" dialog, using CSS class attributes to define sets.
Please comment on the dialog here or at:
http://wiki.inkscape.org/wiki/index.php/Style_Editor
I have a few doubts.
Some of the functionality of the Selection Sets dialog will be included in the Style Dialog, for an instance selection of objects in the drawing when selecting a selector from the dialog box. Similarly for dragging selectors and clicking on objects. CSS Dialog has to be created and connected with the style dialog. Correct me if I am wrong.
Will style dialog be wholly created from scratch or some of the previous implementation from Selection Sets dialog can be used too?
Since I have been writing my proposal, I need some guidance for setting up the milestones effectively.
On Thu, Mar 10, 2016 at 7:14 PM, Tavmjong Bah <tavmjong@...8...> wrote: <snip>
Clicking on '+' at bottom
Opens up text dialog to add new selector. If the selector is a Class
selector, adds the class attribute to the selected objects with the value of the selector name. If the class attribute already exists, appends the selector name to the class attribute value (the class attribute can include more than one class name).
I have been able to implement the former functionality in this case.
Discussing the latter case, i.e. when class attribute already exists for an object and say, one selector value has been added to object previously. Now if the user again wishes to add a different selector, will that be appended? Can an object have more than one selectors?
<snip>
This dialog could replace the "Selection Sets" dialog, using CSS class attributes to define sets.
Please comment on the dialog here or at:
http://wiki.inkscape.org/wiki/index.php/Style_Editor
In the design, selectors have been represented in different ways. I believe each has its own significance. Some starting with a '#', others with a '.' and remaining with alphabets. To me, those starting with a # are object ids and those starting with dots look like a group of objects have a similar attribute. If something different, please do mention it.
So does this imply, I will check what type of object is selected, like if a single object, I can give the selector name == object id? Also will the style dialog contain all the objects in the drawing categorised under some selector? For an instance, selectors with object ids will be added to the style dialog as any object is added to the drawing.
On Sat, 2016-06-04 at 12:21 +0530, Kamalpreet Grewal wrote:
On Thu, Mar 10, 2016 at 7:14 PM, Tavmjong Bah <tavmjong@...8...> wrote:
<snip> > > * Clicking on '+' at bottom > > Opens up text dialog to add new selector. If the selector is a > Class > selector, adds the class attribute to the selected objects with the > value of the selector name. If the class attribute already exists, > appends the selector name to the class attribute value (the class > attribute can include more than one class name). I have been able to implement the former functionality in this case.
Discussing the latter case, i.e. when class attribute already exists for an object and say, one selector value has been added to object previously. Now if the user again wishes to add a different selector, will that be appended? Can an object have more than one selectors?
Yes, it is possible to have more than one class value:
class="button red"
<snip> > > This dialog could replace the "Selection Sets" dialog, using CSS > class > attributes to define sets. > > > Please comment on the dialog here or at: > > http://wiki.inkscape.org/wiki/index.php/Style_Editor In the design, selectors have been represented in different ways. I believe each has its own significance. Some starting with a '#', others with a '.' and remaining with alphabets. To me, those starting with a # are object ids and those starting with dots look like a group of objects have a similar attribute. If something different, please do mention it.
# -> Object id's . -> Class id's blank Element (Object) type (i.e. <text>)
See: http://www.w3schools.com/cssref/css_selectors.asp
So does this imply, I will check what type of object is selected, like if a single object, I can give the selector name == object id? Also will the style dialog contain all the objects in the drawing categorised under some selector? For an instance, selectors with object ids will be added to the style dialog as any object is added to the drawing.
This may take some discussions... but a start would be to show only the selectors found in the style element. I don't think we want to add in this view all elements (objects) just because the have an id. (We could add a view that shows the entire document as a tree.) To add an object via its id, one would select the object and then click on the '+' button at the bottom. This could open an entry box (GtkEntry) with the object's id prefilled in. The user could use this default or could change the entry to a class or element type.
Tav
On Sat, Jun 4, 2016 at 1:18 PM, Tavmjong Bah <tavmjong@...8...> wrote:
This may take some discussions... but a start would be to show only the selectors found in the style element. I don't think we want to add in this view all elements (objects) just because the have an id. (We could add a view that shows the entire document as a tree.) To add an object via its id, one would select the object and then click on the '+' button at the bottom. This could open an entry box (GtkEntry) with the object's id prefilled in. The user could use this default or could change the entry to a class or element type.
Can this be extended to a case where a user selects multiple objects and wishes to add them together at a time to one selector class? If so, what would the text in GtkEntry contain?
On Mon, 2016-06-06 at 10:51 +0530, Kamalpreet Grewal wrote:
On Sat, Jun 4, 2016 at 1:18 PM, Tavmjong Bah <tavmjong@...8...> wrote:
This may take some discussions... but a start would be to show only the selectors found in the style element. I don't think we want to add in this view all elements (objects) just because the have an id. (We could add a view that shows the entire document as a tree.) To add an object via its id, one would select the object and then click on the '+' button at the bottom. This could open an entry box (GtkEntry) with the object's id prefilled in. The user could use this default or could change the entry to a class or element type.
Can this be extended to a case where a user selects multiple objects and wishes to add them together at a time to one selector class? If so, what would the text in GtkEntry contain?
Yes, a comma separated list:
#MyRect1, #MyRect2, #MyRect3 { fill: red; }
Tav
On Mon, Jun 6, 2016 at 12:49 PM, Tavmjong Bah <tavmjong@...8...> wrote:
Yes, a comma separated list:
#MyRect1, #MyRect2, #MyRect3 { fill: red; }
For a single selected object as well as selection of multiple objects, this has been implemented. Though there is not much distinction between classes and ids yet, which will be done shortly, ids are separated by commas yet.
A selector can be appended to another if it already exists for an object.
My work can be checked here: https://code.launchpad.net/~grewalkamal005/inkscape/css-support
On Mon, 2016-06-06 at 22:54 +0530, Kamalpreet Grewal wrote:
On Mon, Jun 6, 2016 at 12:49 PM, Tavmjong Bah <tavmjong@...8...> wrote:
Yes, a comma separated list:
#MyRect1, #MyRect2, #MyRect3 { fill: red; }
For a single selected object as well as selection of multiple objects, this has been implemented. Though there is not much distinction between classes and ids yet, which will be done shortly, ids are separated by commas yet.
A selector can be appended to another if it already exists for an object.
My work can be checked here: https://code.launchpad.net/~grewalkamal005/inkscape/css-suppor
Good to see you making progress. I've had a look at your code. A few comments:
1. ID's should not be added to the class attribute. They need to be added to the style sheet which is not easy to do at the moment. The SPStyle class is not very complete.
2. The style dialog should show the selectors from the style sheet so it should show:
1 .red 2 #MyRect1, #MyRect2, #MyRect3
This is so the user immediately know what selectors are defined.
3. The automake build is broken. I've attached a patch.
4. In loops, use 'unsigned' values to prevent warnings about comparing unsigned and signed quantities:
for( unsigned i = 0; i < selected.size(); ++i ) {
Tav
On Tue, Jun 7, 2016 at 2:14 AM, Tavmjong Bah <tavmjong@...8...> wrote:
- ID's should not be added to the class attribute. They need to be
added to the style sheet which is not easy to do at the moment. The SPStyle class is not very complete.
How should I proceed on this?
- The style dialog should show the selectors from the style sheet so
it should show:
1 .red 2 #MyRect1, #MyRect2, #MyRect3
This is so the user immediately know what selectors are defined.
So this would happen when an existing drawing with some stylesheet is opened, if stylesheet exists for the drawing.
- The automake build is broken. I've attached a patch.
Okay, I will apply these changes.
- In loops, use 'unsigned' values to prevent warnings about comparing
unsigned and signed quantities:
for( unsigned i = 0; i < selected.size(); ++i ) {
Changed this. Definitely the value of size is not negative here. Some questions out of curiosity: How using this (i.e. unsigned) affects performance? Or something associated with the software? Why should one prefer it over int?
participants (5)
-
Jabier Arraiza -
Kamalpreet Grewal -
Martin Owens -
Tavmjong Bah -
Tobias Ellinghaus