simple editor for text styles

[lexoyo]

Being able to edit the styles available in the text editor, i.e. Title, Subtitle, Title 1, Title2, ... Normal text, Quotes

And also add other styles

[lexoyo]

I think there is something wrong in the style editor: if one want to change all the texts from black to white, one has to select P and change the color to white, then do the same with H1, H2, H3, A, ...

The solutions I see: 1- keep it like that, it is not an issue 2- add a "All" or "" to change all the tags at once 3- change P to "All or " 4- make it possible to select multiple tags (P and H1, H2, H3) and then when one changes the color, all of them are changed

What do you think?

[BaguetteAgile]

4- make it possible to select multiple tags (P and H1, H2, H3) and then change the color, all of them are changed

Hello

I think it would be more interesting to have the possibility to choose several tag (and not necessarily "all") to change the colors of the text.

When we create a text for its website we do several color tests to find the best and as such we have the opportunity to make a live comparison with the different paragraphs or titles.

I find solution 4 the best.

the multiple selection is possible with such a key combination as Ctrl + click?

[budislav]

I must admit I don't understand how this styling working. That's why I thought it should be the simple as possible and to use presented system we already can see how it works (Webflow for example) so it can be a model for Silex. I think it should automatically apply new style when add new text box, also when select text box on canvas it should show selected style for that box in style editor.

[lexoyo]

I need to explain my mockup little more. There should be only Paragraph, heading, Link and List and what you select you will see new options under them, just like in mockup I made. When headings are selected there are options: h1,h2,h3,h4,h5,h6. When List is selected there are options: ul, ol. Paragraph don't have any options and for link I should design that mockup.

That is a good way of seeing things! I missed that point... It seems complicated to me right now, let me think about it

Also, do you think I should add H4 to H6 ? Or is H1 to H3 enough ?

Also this should be under component settings tab, text box is one component, it's a modular system.

Ok, I start to see that now. It will come at one point but for now the 2 tabs (text styles and properties) are made with a different technology (my other project "Prodotype" for the text styles, and pure JS in silex for the properties). So be patient, we'll get there :)

Bold, underline and Italic are styles for text those buttons should be under style tab. Also on canvas.

Ok this is interesting too... I see them as a way to style part of texts: unlike H1-H3, P and lists, the U, B and I tags can be applied to a portion of the text, not a whole line. So in my mind, one could apply bold to a few words, then italic to other words, and then use the style editor to un-bold the B, un-italic the I and just apply different colors.

But maybe it is wierd... How would you let the user do something like "a few words in red here, a few words in blue here" on 1 line?

Also that mobile icon should be only indicator that will show on what mode you are, so when you are making a style for mobile you need to select mobile editor button to go into that mode, then everything you change from style will be on visible mobile only. I don't understand this concept you made now with mobile only?

Ok so the button should not be clickable?

In Silex, the styles you change in mobile mode, e.g. a background color, is not visible in desktop, but the styles you change in desktop are visible in mobile. Feel free to try to play with background colors in mobile and desktop modes

Yes we need, that's why I made that accordion button "Layout" above Typography :) Just look at Webflow Layout section, that is just what we need.

Ok, same as before here: be patient, we'll get there :)

I must admit I don't understand how this styling working. That's why I thought it should be the simple as possible and to use presented system we already can see how it works (Webflow for example) so it can be a model for Silex. I think it should automatically apply new style when add new text box, also when select text box on canvas it should show selected style for that box in style editor.

Yes ok, I tried that (it is also a bit like grapejs right?) I have found it complicated to understand once I saw it working (it was the version you said you did not have time to test it)

I can do that again at least to test... I'll try to do that soon

---

Just for you to know, now that there is a start of a prototype and the UI design is integrated, I need to spend some time refactoring...

Thank you for your feedback guys! And for helping answering the other issues for "simple" questions, it give me more time to debug and work on this.

[budislav]

Also, do you think I should add H4 to H6 ? Or is H1 to H3 enough ?

It's not enough :( We need H1 to H6, it is the basic of html from it's beginning, everyone using them when designing webpages. They maybe look small but designer can set values for them, they are useful, then we have like 6 presets or style for title.

Ok, I start to see that now. It will come at one point but for now the 2 tabs (text styles and properties) are made with a different technology (my other project "Prodotype" for the text styles, and pure JS in silex for the properties). So be patient, we'll get there :)

I am so happy to know that! :)

Ok this is interesting too... I see them as a way to style part of texts: unlike H1-H3, P and lists, the U, B and I tags can be applied to a portion of the text, not a whole line. So in my mind, one could apply bold to a few words, then italic to other words, and then use the style editor to un-bold the B, un-italic the I and just apply different colors.

We can un-bold those words in inline on canvas. If user want to bold everything b tag is not the way he have font weight for that. Look at video bellow this in zip.

But maybe it is wierd... How would you let the user do something like "a few words in red here, a few words in blue here" on 1 line?

Magic word "span" :) Look at this video how Webflow doing all this things, this is the only, the best and the easiest way, if someone knows better way please I want to know.

vokoscreen-2018-05-04_17-26-09.zip

Ok so the button should not be clickable? In Silex, the styles you change in mobile mode, e.g. a background color, is not visible in desktop, but the styles you change in desktop are visible in mobile.

Exactly. That is not button it have no color in background only outline. This is only indicator. look at the video bellow in zip.

vokoscreen-2018-05-04_17-48-00.zip

Yes ok, I tried that (it is also a bit like grapejs right?)

Yes grapejs have same workflow as webflow. Grapejs also have inline editing on canvas for bold, underline, italic,.. when you double click on word.

I have found it complicated to understand once I saw it working (it was the version you said you did not have time to test it)

Picture says thousand words, so video should be million :) If anyone knows better way I would like to know.

vokoscreen-2018-05-04_18-00-03.zip

Just for you to know, now that there is a start of a prototype and the UI design is integrated, I need to spend some time refactoring...

Of course, whatever it needs to achieve the best app for web design :)

Thank you for your feedback guys! And for helping answering the other issues for "simple" questions, it give me more time to debug and work on this.

At any time!

[lexoyo]

great videos @budislav thx what do you think @ceubri ? this is very close to what i wanted to do at first

[ceubri]

Great !! And specially the vokoscreen-2018-05-04_18-00-03.mp4 and the layout part ;) I try recently https://silex-test-tmp.herokuapp.com/ and it looks better than couple of weeks, good job Lexa, it's usefull.

[lexoyo]

Merci ceubri!! So I finished my "refactoring" and even if I am not at all happy with it I have moved forward

Now on my test instance I have put something a little bit closer to your videos @budislav : when the user selects a text box, if it has a style applied to it, it will be selected in the style editor. The idea is to have a "all texts" style and then each text box can have a specific style

Try it like this:

• open https://silex-test-tmp.herokuapp.com/
• choose the "desktop" blank template (for some reason the mobile one doesn't work)
• open the style editor and add a style (this will be done by default in all the templates but it is not the case yet)
• call your style Body initial
• add a text box, play with this first style
• add a new style with any name and apply it to 1 or many new text boxes
• play with this new style and see how it overrides the 1st style
• select different text boxes and see how the style editor reacts

Then let me know how you feel about this UX?

Thank you for your help!!

[budislav]

@lexoyo This doesn't work good. If I understand you well user need to make a style name for text first, then add a text box? It should set a style name automatically when add a new text box every time. So one default text style and name for example called "text". When I add a new box it should have default text style settings not the same as previous. But it will be automatically named text1. Text box will have the same settings and same style name of text box only when you select than copy and paste it, or when you select a style from select style button. Now if i want to change that particular text box to have a different style I will add a new style with add button, name it and it should automatically apply that new style settings I made to that style. It is not working like that in your test. I need to press on apply button each first time which is not good. It is good that it will make directly every change on text box on canvas in the moment I edit something, that is good! But if I now want to select previous style I made and automatically apply to that button which is selected on canvas it should be easy. I select wanted style from select button and I see those settings are changed in the right panel which is awesome. But it wont apply that style on text box on canvas, because every time I select some style from select button it will deselect that text box on canvas so I can't even apply that style with button but it should be automatically. So it is not working good. I hope you understand everything please ask me if you don't, this is really important to make it to work right, because other css components styling should work on same way, selecting, adding, removing, renaming classes (styles) and applying them. Please to understand how it should work, look at these two short videos about webflow classes, I couldn't explain better than these videos. We should even make the same class selector logic, look how it's easy to make a combo class. :)

https://www.youtube.com/watch?v=zmxo1ywQdVk https://www.youtube.com/watch?v=LPABhi7uC6A

[lexoyo]

Ok so what we want is

• By default (body selected) => edit the style of all text boxes
• Select a text box without a style => edit a generated class name "Text Box 1"
• Select an element with a style => edit this style
• Click on the styles drop-down list and select another style => apply this style to the selected text box(es)

Is this correct? Did I miss something?

Remaining questions

• If I select multiple text boxes with different styles, what should happen?
• If I apply a style to a text box which has been styled, should it loose it's initial styles?
• If I select a text box and then select the "all text style", it would apply it? I should prevent it?

[lexoyo]

Ok, I just finished the new UX inspired by webflow https://silex-test-tmp.herokuapp.com/

Let me know if it is clear, and if you can find bugs (it is supposed to be ok)

Do you find it slower than editor.silex.me on your computers? (it is not on mine but the style editor is kind of a big overhead)

[lexoyo]

Style editor step 2:

[budislav]

Ok so what we want is

By default (body selected) => edit the style of all text boxes
Select a text box without a style => edit a generated class name "Text Box 1"
Select an element with a style => edit this style
Click on the styles drop-down list and select another style => apply this style to the selected text box(es)

Is this correct? Did I miss something?

I don't quite understand this points well so I will try to make scenario and how it should work:

1. User open blank template.
2. He add text element from add elements panel (Silex will auto name that class Text Box1 and every time when user insert new text box Silex will auto increment that number so it will be text box2, text box3,.. But he can rename it to whatever he want).
3. So he made one text box and he want to change his style. No problem whatever he change color line height,.. everything will auto change and show on canvas. Without pressing apply button, we don't need that button. Also everything he change will auto save on that style (class name) in this example text box1.
4. Now user add a new text box from add elements. (silex will auto name it text box2) but he want to change this name so he rename current style to Big title. Settings he see for that new text box are not the same as previous textbox1, but they are default textbox settings, so everything he change will affect only that style he made.
5. User now want to change those style settings like color and other stuff. While that text box is selected whatever he change for example color that will automatically show on canvas and it will be saved to that style Big title. Without touching apply button. So previous textbox1 have it's own settings, nobody want to change that textbox1, user now changing Big title (textbox2)
6. User now copy and paste that big title text box couple of times and he have 3 big titles now. Every one oh them have the same style name "Big title" automatically.
7. Now everything user change with that big title will have same for all big title text boxes (3 of them). For example he touch any of that big title and change text color to red, everyone of them will have red color because they are under same style.
8. Now user want to change the look of one of big text to look of textbox1 (the first text box he made), so while that text box is selected on canvas one of those big title he can just select that style from style select button to textbox1 (because we did't renamed that class, that is auto name). And that big title will have same look like textbox1 and it will get that class textbox1. So that is belong to that class now (textbox1) not to big title class (style).
9. Now everything what he click on canvas any text box for example if he click on one of those 3 big titles now only 2 because we changed one, that style of selected box will appear in style editor, automatically.
10. Now user rename that textbox1 style to "small text" now those two text boxes he have with same style would be named small text.

If I select multiple text boxes with different styles, what should happen?

This is a good question. So if we want that to select multi text boxes with different styles we can change them but to only one style. So if we select three text boxes for example and each of them have different styles (classes) or only two different styles in the moment when user select them, all settings in style editor should disappear and there should be a sentence in style editor "merge styles to one" and button under that "merge". So if user click on merge Silex would automatically made one style for all three text boxes named textboxmerged and incremented number if there are already merged text boxes before. This is just naming, so there should be different name always so not to have same settings as other styles. So on the end user will have three boxes with one default text box style, simple as that. If user select on canvas two or more text boxes with same styles there are no message in style editor because they are having one same style. They share same style. So now those three text boxes share one style but if you user want he can just select a style from select style button and all text boxes will have that same style.

If I apply a style to a text box which has been styled, should it loose it's initial styles?

Yes. They are sharing same style so if you change that text box that have same style as other boxes all boxes will have those new settings. But that's why Webflow have combo classes, like you can see in second video I sent you combo classes are ways to have a new style for that text box you want without worries you will destroy other text boxes. So it should be a way to add a new name to that style (class) you want to change like "combo" and it automatically made a new class. Please try to play with that in Webflow, you will get idea how it working. The most important is to have understandable clean html and css, so we need no complications.

If I select a text box and then select the "all text style", it would apply it? I should prevent it?

I don not understand this option, I think we don't need that. Like I explained if user select one text box with style that all other text boxes have you basically selected everything because they are under the same style but you will see only those settings in style editor they all share not selected all text boxes on canvas. If we have for example 20 text boxes with all different styles and you want to change them all we can select on canvas all of them we want to change, we don't need that option because there should be only names of classes (styles) but all style is not a class. So there should not be hat option to select them all at all. Again please try to play with Webflow you will understand everything within couple of minutes I promise.

[budislav]

@lexoyo Yes! It working good well done!! But it seems to have an bug because sometimes it won't apply settings on canvas

[budislav]

@lexoyo it should automatically name new added textbox, now it gives him a name but only after I made some changes. It should give that textbox name right after he add it on canvas. Also grouping doesn't working, If I want to change I color for both text box because they are grouped and they have the same name it won't apply color for example on any of them.

[budislav]

@lexoyo yeah I think grouped styles don't working good. If you can please read my big answer above I think text boxes with different styles should merge into one, so no groups. That is much easier for user to understand and work.

[lexoyo]

Ok thx again @budislav for the quick answers I'll do that soon (group styles) I just published a version with mobile editor mode = mobile style (as you requested previously)

[budislav]

@lexoyo I just tried responsive template and there is a bug with styles you can see on this video it makes a text style6 but there is only one style. vokoscreen-2018-05-12_21-27-55.zip

[lexoyo]

Hi Budislav, thank you for the test!

I did not manage to reproduce your bug but I had another bug when I clicked the "" style in the list. I fixed it and it may fix your bug too, could you test please? :-/

Also concerning the "style groups", this is just a default name created when you style several text boxes. I think you are talking about multiple classes in webflow? This I did not do yet

[budislav]

Tried, still happening :( Also I can't group different styles only if they are same, look at video. I don't see style settings when select both. vokoscreen-2018-05-13_22-15-49.zip

[lexoyo]

@budislav I published some fixes again I still can't reproduce :-/

Also I can't group different styles only if they are same, look at video. I don't see style settings when select both.

Ok this I did on purpose. As I said I did not implement the edition of multiple css classes, so I prenent it to be edited. In your video though, I see a bug because when I apply a new style to 2 text boxes which have different styles, it should remove the styles before applying the new style

[budislav]

@lexoyo I just tried on windows same here, it makes 65 styles :/ Did you tried on other machine or only on your pc? This is on Firefox I didn't tried other browsers.

[lexoyo]

Did you tried on other machine or only on your pc?

I tried on firefox and chrome Did someone else have such a bug? @ceubri @BaguetteAgile @rapenne-s ?

[lexoyo]

@budislav I don't know how to go forward with this Maybe you could open the browser's developer console and tell me if there are any warnings or errors?

[budislav]

@lexoyo yes, this is all I see there I really believe others can produce this because I tried it on two fresh installed OS but always on Firefox 60.0.1 (64bit) I just tried in chromium and can't reproduce but in firefox always. Do you have an access to some other pc, maybe to try in vm?

[budislav]

Also this

[lexoyo]

Did you apply styles with the developer tools open? I suppose that you did :(

I have 2 fedora computers and can not reproduce :'(

[budislav]

@lexoyo no, first I applied styles then opened developer tools. How should I do this? Just to be sure is this the right address https://silex-test-tmp.herokuapp.com/ ?

I have 2 fedora computers and can not reproduce :'(

I can't believe.. I don't understand how is this possible. I did it again 10 times, 8 of them have the problem, two are not. Try to insert one textbox than change the color only, than add second box and change his color, than click on any of them couple of time and see what number it have. This is how I test.

[lexoyo]

Ok I'll try again Yes the address is correct

[lexoyo]

@budislav just an idea like that: did you empty your browser cache?

[budislav]

@lexoyo no I didn't, should I do that?

[lexoyo]

Yes please

On May 21, 2018 4:37:18 PM GMT+02:00, Budislav notifications@github.com wrote:

@lexoyo no I didn't, should I do that?

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/silexlabs/Silex/issues/52#issuecomment-390673243

[budislav]

Same problem :( Now it made 91 styles for one box.

[lexoyo]

Anyone can help us test on other computers?

[budislav]

@lexoyo I think it is alright to have this bug and it does not interfere with other functions, I believe someone will notice this and provide maybe some useful information in the future.

[ceubri]

All seems to be ok for me (on chrome w10)

[lexoyo]

Ok then, let's wait a little :-/ Thx @ceubri

I have used the style editor to create a landing page (not important but here it is).

A/ Here are the issues I have had

• [x] small bugs I have fixed today
• [ ] sometimes the text editor do not put text in a <p> tag so the style editor P do not style all the texts, maybe we should have * instead of P ?
• [ ] it is anoying to have to change P the H1 then H2... one by one for things like the font family which is usually the same for all styles. I know we said we should be able to select more than 1 "tag" and style them all but it is quite a bit of work and I really need to close this development soon... so I think it is another reason to have * instead of P (because * will also style P the H1 then H2...

What do you want me to do?

1- replace P with *? 2- or add * beside P? 3- leave it named P but style * 4- other ideas?

B/ UX

Last point, very important one, consider this use case:

• I am designing all H2 tags of my website
• I set the font size, so all texts move and text boxes size change
• I want to move a text box so I select it and move it
• Now I want to make the font size a little smaller
• Here, what I often do is to change the font size, not realizing that it automatically creates a new style because a text box is selected... What I wanted to do is press esc key and then change the font size

So it appears that I would rather have the style editor NOT take the selection into account. Then we would have to create styles with a "+" button, and apply it with an "apply" button. I know @budislav you like it as it is but in the case of Silex I find it not as good as in webflow. It is a pitty you can not try it :-/

@all let me know what you think

[BaguetteAgile]

Hello everyone, I'm back again. I just tested the text editor on Linux with Web Chromium, no problem for me.

So it appears that I would rather have the style editor NOT take the selection into account. Then we would have to create styles with a "+" button, and apply it with an "apply" button.

it seems to me that this solution would be a good option to be able to edit differently 2 blocks of the same name.

[budislav]

or add * beside P?

I would say this, but this anyway should be changed in future if we are going to have components, and their settings.

Here, what I often do is to change the font size, not realizing that it automatically creates a new style because a text box is selected... What I wanted to do is press esc key and then change the font size

If user want to select one particular text box and change it he can do that with making a new style I don't see this problem and if user need to select object and apply style every time that would be the hell for them and step back in development, but if you think it's better do what you need. Combo style from webflow is solution I think.. You don't need to erase that code completely if you can put in comment, that would be good.

[lexoyo]

Hi Still not working for you @budislav ? DId someone have time to test this? Should I proceed and push it live? Then I would go ahead and remove the dialog for editing the text (in place editing)

[budislav]

I can't select a color anymore are you changed to old? I have more issue right now,but also my mouse is broken so he double click on something I don't want. But still I have the same problem he makes a lot of empty styles. You need to push it live so you will have more feedback, from users.

[lexoyo]

Releasing this now! It will be live in 5 min, would someone have time to run some more tests on editor.silex.me ? Next step the inline text editor