Bug 421065

Summary: Improve cantor appearance and castomization via support qss qt files (and maybe settings)
Product: [Applications] cantor Reporter: avlas <jsardid>
Component: generalAssignee: Cantor Bugs <cantor-bugs>
Status: CONFIRMED ---    
Severity: wishlist CC: warquark
Priority: NOR    
Version First Reported In: 20.04   
Target Milestone: ---   
Platform: Other   
OS: Linux   
Latest Commit: Version Fixed/Implemented In:
Sentry Crash Report:
Attachments: Ugly and fast check, if qss will work in Cantor

Description avlas 2020-05-05 16:07:31 UTC
I talked about this a little bit in reddit, but maybe it's good to open a feature request here:

- Jupyter notebooks and others are visually very pleasant. Would you consider improving the looks of Cantor worksheets? Ideally users may like to have something closer to Jupyter / Kaggle/ RStudio notebooks appearance. 

- Also in terms of Markdown entries, they look so plain in Cantor. Would it be possible to add a CSS Markdown style in Cantor (Github style, Markdown-here style, etc)?

- When printing and exporting to PDF, this could be done converting the content of the worksheet to Markdown (using CSS styles again) to make them more pleasant too?
Comment 1 Nikita Sirgienko 2020-05-05 16:35:17 UTC
We have been considering improving the looks of Cantor worksheets, but there are some limitation here: language (C++) and graphical widget stack (Qt). So, i think, flexibility of Jupyter/Kaggle (with possibility to change view of, well, all existed elements via custom css).
So, I don't think, that your request is fully possible. All of this castomizatio comes from flexibility of HTML+CSS, which used in Jupyter and Kaggle.

I am not sure (we still considering using qt web engine in Cantor), but I think, that CSS Markdown styles don't possible in Cantor on this moment- this will work only with fully featured web browser.

Converting worksheet to Markdown is theoretical possible feature, but this is a lot of work and I haven't seen a huge request for this feature, so I don't think, that we will implement this soon.

On this moment, we more focused on improving user expirience, with supporting a good look of program.
Comment 2 avlas 2020-05-05 17:54:34 UTC
(In reply to Nikita Sirgienko from comment #1)
> We have been considering improving the looks of Cantor worksheets, but there
> are some limitation here: language (C++) and graphical widget stack (Qt).
> So, i think, flexibility of Jupyter/Kaggle (with possibility to change view
> of, well, all existed elements via custom css).
> So, I don't think, that your request is fully possible. All of this
> castomizatio comes from flexibility of HTML+CSS, which used in Jupyter and
> Kaggle.
> 
> I am not sure (we still considering using qt web engine in Cantor), but I
> think, that CSS Markdown styles don't possible in Cantor on this moment-
> this will work only with fully featured web browser.
> 
> Converting worksheet to Markdown is theoretical possible feature, but this
> is a lot of work and I haven't seen a huge request for this feature, so I
> don't think, that we will implement this soon.
> 
> On this moment, we more focused on improving user expirience, with
> supporting a good look of program.

I see. Many thanks for the explanation. QtWebEngine seems like a drastic move with pros (the flexibility you talked about) but also some significant cons (security, privacy, "weight" and the effort involved in the transition).

Why not just using nodejs instead? Would this help with the cons?

Alternatively, I wonder if adding an interface in QML could help making it more appealing. Perhaps that is what is needed and people from the design team can help.

Regarding Markdown, I guess you could take a look at projects such as Typora. I think it uses nodejs to allow on-the-fly styling based on CSS files.
Comment 3 Nikita Sirgienko 2020-05-06 11:22:35 UTC
(In reply to avlas from comment #2)
> (In reply to Nikita Sirgienko from comment #1)
> > We have been considering improving the looks of Cantor worksheets, but there
> > are some limitation here: language (C++) and graphical widget stack (Qt).
> > So, i think, flexibility of Jupyter/Kaggle (with possibility to change view
> > of, well, all existed elements via custom css).
> > So, I don't think, that your request is fully possible. All of this
> > castomizatio comes from flexibility of HTML+CSS, which used in Jupyter and
> > Kaggle.
> > 
> > I am not sure (we still considering using qt web engine in Cantor), but I
> > think, that CSS Markdown styles don't possible in Cantor on this moment-
> > this will work only with fully featured web browser.
> > 
> > Converting worksheet to Markdown is theoretical possible feature, but this
> > is a lot of work and I haven't seen a huge request for this feature, so I
> > don't think, that we will implement this soon.
> > 
> > On this moment, we more focused on improving user expirience, with
> > supporting a good look of program.
> 
> I see. Many thanks for the explanation. QtWebEngine seems like a drastic
> move with pros (the flexibility you talked about) but also some significant
> cons (security, privacy, "weight" and the effort involved in the transition).
> 
> Why not just using nodejs instead? Would this help with the cons?
> 
> Alternatively, I wonder if adding an interface in QML could help making it
> more appealing. Perhaps that is what is needed and people from the design
> team can help.
> 
> Regarding Markdown, I guess you could take a look at projects such as
> Typora. I think it uses nodejs to allow on-the-fly styling based on CSS
> files.

Nodejs no help in this situation at all, because the main limitation is that Cantor, without web engine, can't fully render (I mean, from text form to content, visible for user) HTML+CSS. You have been mentioned Typora, but key component of supporting css styles is that Typora application is actually a browser (chromium, to be more precisious, - Typora is based on Electron framework). And because of fully support of HTML+CSS - Typora can have css style for Markdown, and how it manage the styles - via javascript, or something else - is not very important in this situation.
Also, I haven't been mistackend, QML can do only what Qt can do because it is just an another form of UI representation: one form is ordinary (for Qt apps) ui files (and ui files is just a XML) and another form is a more css styled QML markup.
Comment 4 avlas 2020-05-06 12:07:56 UTC
(In reply to Nikita Sirgienko from comment #3)
> (In reply to avlas from comment #2)
> > (In reply to Nikita Sirgienko from comment #1)
> > > We have been considering improving the looks of Cantor worksheets, but there
> > > are some limitation here: language (C++) and graphical widget stack (Qt).
> > > So, i think, flexibility of Jupyter/Kaggle (with possibility to change view
> > > of, well, all existed elements via custom css).
> > > So, I don't think, that your request is fully possible. All of this
> > > castomizatio comes from flexibility of HTML+CSS, which used in Jupyter and
> > > Kaggle.
> > > 
> > > I am not sure (we still considering using qt web engine in Cantor), but I
> > > think, that CSS Markdown styles don't possible in Cantor on this moment-
> > > this will work only with fully featured web browser.
> > > 
> > > Converting worksheet to Markdown is theoretical possible feature, but this
> > > is a lot of work and I haven't seen a huge request for this feature, so I
> > > don't think, that we will implement this soon.
> > > 
> > > On this moment, we more focused on improving user expirience, with
> > > supporting a good look of program.
> > 
> > I see. Many thanks for the explanation. QtWebEngine seems like a drastic
> > move with pros (the flexibility you talked about) but also some significant
> > cons (security, privacy, "weight" and the effort involved in the transition).
> > 
> > Why not just using nodejs instead? Would this help with the cons?
> > 
> > Alternatively, I wonder if adding an interface in QML could help making it
> > more appealing. Perhaps that is what is needed and people from the design
> > team can help.
> > 
> > Regarding Markdown, I guess you could take a look at projects such as
> > Typora. I think it uses nodejs to allow on-the-fly styling based on CSS
> > files.
> 
> Nodejs no help in this situation at all, because the main limitation is that
> Cantor, without web engine, can't fully render (I mean, from text form to
> content, visible for user) HTML+CSS. You have been mentioned Typora, but key
> component of supporting css styles is that Typora application is actually a
> browser (chromium, to be more precisious, - Typora is based on Electron
> framework). And because of fully support of HTML+CSS - Typora can have css
> style for Markdown, and how it manage the styles - via javascript, or
> something else - is not very important in this situation.
> Also, I haven't been mistackend, QML can do only what Qt can do because it
> is just an another form of UI representation: one form is ordinary (for Qt
> apps) ui files (and ui files is just a XML) and another form is a more css
> styled QML markup.

I see, I didn't know Typora was an Electron app.

I'll make just one last comment for the case it might be somehow useful in this context. There are ways to change the look of Qt apps by passing qss files.

The following are two tiny examples of this for Kmail and Konsole:

- Kmail (some people use this to make the html status bar "dissapear"):

```
 MessageViewer--HtmlStatusBar {
    max-width: 0px;
}
```

- Konsole (I use this to have a minimalistic separator between internally tiled terminals):

```
Konsole--TerminalHeaderBar {
  max-width: 0;
  max-height: 0;
}
Konsole--ViewSplitter {
  background-color: #555;
}
```

I wonder if styling in Cantor could benefit of this in things like spacing (margins, paddings
) of components, colors (background color of worksheet, background and foreground color of cells), line style of the cell (I'd personally preferred solid instead of dashed, its width, its color...), the color of ">>>",  etc. You see what I mean.

For instance, similarly to Autorun commands, Cantor's settings could include a text box where to specify these things. These could be saved to a file by Cantor, which Cantor would use at startup to style itself. Then, Cantor could set as example its current style in that text box (so its style wouldn't change) for users to better know how to adjust these things to their like if wanted.

I think it could be great because this would allow the community to in fact create Cantor themes written using css syntax. This could even be supported by "Get Hot New Stuff" infrastructure, saving a list of these themes (alternative configurations), and the active theme could be edited internally within the text box.

This is just an idea that perhaps could be easier to implement and still be useful.

One last suggestion with respect to styling (this one I think it would not be able to change with qss entries, at least not entirely): I'd really like to modify how line numbers and ">>>" is displayed, e.g. "0>>>". I'd like to be able to set the initial counter (e.g., 1 instead of 0, if wanted, or even make it backend dependent; also have the option to put the number within brackets/parentheses...). Similarly for ">>>", I'd like to be able to use ">>", or ">", or any other symbols I may like (again, perhaps being able to change this dependening on backend).

Also, it seems like they are part of the same qt (label?) component. If qss styling would be promoted, it would be a good idea to separate "0" from ">>>" to be able to manage margins/padding between the two from qss entries.

These are a couple of ideas, I hope you can find them somewhat useful.
Comment 5 Nikita Sirgienko 2020-05-06 13:21:50 UTC
Well, qss is a good sujestion. Also, Cantor castomization is in a todo list, for example, we planning to add some font castomization in settings for 20.08 realese
Comment 6 Nikita Sirgienko 2020-05-06 13:23:09 UTC
Created attachment 128194 [details]
Ugly and fast check, if qss will work in Cantor
Comment 7 avlas 2020-05-06 13:33:05 UTC
(In reply to Nikita Sirgienko from comment #5)
> Well, qss is a good sujestion. Also, Cantor castomization is in a todo list,
> for example, we planning to add some font castomization in settings for
> 20.08 realese

Cool!