# Use material design in sao **URL:** \ **Category:** Feature\ **Created:** [August 13, 2018, 2:12pm UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647 "2018-08-13T14:12:15Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![albert](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/albert/32/21_2.png) [@albert](https://discuss.tryton.org/u/albert)\ **Post date:** [August 13, 2018, 2:12pm UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/1 "2018-08-13T14:12:15Z")
## Rational Topic [New theme icon for Tryton - #16 by ced](https://discuss.tryton.org/t/new-theme-icon-for-tryton/507/16) discusses the use of Material icons in both SAO and Tryton clients, but we still have our own approach to some design decisions or we simply leave some decisions to the integrator by creating a very plain interface. ## Proposal The idea is to use Material Design ([https://material.io](https://material.io)) for the whole sao application. This makes it easier for us to make some decisions and can provide a familiar interface for the user while still allowing integrators to make their own refinements yet based on a more user friendly basis. ## Implementation At NaN-tic we already hired a designer to work on a proposal some months ago, so we’ll try to update the patch to latest changes if there’s interest in the feature. Here’re a couple of screenshots so you can get an idea of the result: ![screenshot1](https://discuss-cdn.tryton.org/uploads/default/original/1X/f9e9a8ccda47c0b83d3221e1cccb2a384ec3f215.png) ![screenshot2](https://discuss-cdn.tryton.org/uploads/default/original/1X/780402ff2ec7c7cd6c75943acf63684d01b1986e.png) BTW, the patch is not very large and only adds CSS. ---
**Author:** ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)\ **Post date:** [August 13, 2018, 2:41pm UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/2 "2018-08-13T14:41:05Z")
I do not think we can talk of material design when changing the look of the widgets. Material design is much more about the workflow, the animation and the transition. But I think it will be very long task to actually implement them without reusing an existing implementation framework. So for me, this screenshots are a theming work of the existing Tryton design (which makes it look like the Google theme). But I find that the `Many2One` are not easy to understand. And also flat buttons are difficult to understand neither. Now, why not use an existing [Bootstrap theme](https://themes.getbootstrap.com/)? Indeed I would find better to have use any Bootstrap theme working on sao. Does theme work out of the box? Have we some HTML/CSS that breaks themes? Do we need to rework some part of the HTML/CSS to make it more themable? ---
**Author:** ![albert](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/albert/32/21_2.png) [@albert](https://discuss.tryton.org/u/albert)\ **Post date:** [August 13, 2018, 4:25pm UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/3 "2018-08-13T16:25:36Z")
> [@ced](#): > > So for me, this screenshots are a theming work of the existing Tryton design (which makes it look like the Google theme). But I find that the `Many2One` are not easy to understand. And also flat buttons are difficult to understand neither. Mmm… I guess the screenshots are a bit outdated, I think we made the underline to go under the icon too. Not sure right now. Anyway, I think it’s a matter of taste. For me the standard style looks cluttered because of so many text boxes and so the underline looks better to me. I understand sao tries to be simple so people can apply their own CSS but I think having a more beautiful default would be great for newcommers visiting [demo.tryton.org](http://demo.tryton.org). > [@ced](#): > > Now, why not use an existing [Bootstrap theme](https://themes.getbootstrap.com/)? Indeed I would find better to have use any Bootstrap theme working on sao. Does theme work out of the box? Have we some HTML/CSS that breaks themes? Do we need to rework some part of the HTML/CSS to make it more themable? I must admit we didn’t try that. My guess is that specific widgets (such as Many2One) will probably require custom CSS, but I’m not an expert. What I was happily surprised about, is that we did not need to change any class in order to create the theme. ---
**Author:** ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)\ **Post date:** [August 13, 2018, 5:31pm UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/4 "2018-08-13T17:31:40Z")
> [@albert](#): > > For me the standard style looks cluttered because of so many text boxes and so the underline looks better to me. That’s not false. > [@albert](#): > > I must admit we didn’t try that. My guess is that specific widgets (such as Many2One) will probably require custom CSS, but I’m not an expert. Indeed I just tested with the [paper theme](https://bootswatch.com/3/paper/) and it give a similar rendering and Many2One does not need any customization to already have a good looking: ![image](https://discuss-cdn.tryton.org/uploads/default/original/1X/d9f16dedabccc8fd523ba48a9549cbca05e4231f.png) I’m not against providing an alternative to the minimal default bootstrap theme. But I think it should be based on existing on (or build like a bootstrap theme). sao should still work with the minimal theme. Also we should think that soon we will have to update to Bootstrap 4, but there seems to be similar themes on bootswatch like [Bootswatch: Materia](https://bootswatch.com/materia/) ---
**Author:** ![pokoli](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/pokoli/32/22_2.png) [@pokoli](https://discuss.tryton.org/u/pokoli)\ **Post date:** [August 14, 2018, 10:25am UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/6 "2018-08-14T10:25:16Z")
> [@ced](#): > > Indeed I just tested with the [paper theme](https://bootswatch.com/3/paper/) and it give a similar rendering and Many2One does not need any customization to already have a good looking: How do you included the paper theme in sao? We are currently replacing the bootswrap file and as [already commented on issue7622](https://bugs.tryton.org/msg42905) I’m wondering if it won’t be better to provide some mechanisme to easly override the boostrap.css file to include a custom theme bootstrap css file. ---
**Author:** ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)\ **Post date:** [August 14, 2018, 11:16am UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/7 "2018-08-14T11:16:35Z")
There is [bootswatch-dist](https://github.com/dbtek/bootswatch-dist) and [bootswatch](https://github.com/thomaspark/bootswatch) (but the last one dropped support for bower). Those can be basis for a solution. ---
**Author:** ![albert](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/albert/32/21_2.png) [@albert](https://discuss.tryton.org/u/albert)\ **Post date:** [August 16, 2018, 11:22am UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/8 "2018-08-16T11:22:27Z")
> [@ced](#): > > Indeed I just tested with the [paper theme](https://bootswatch.com/3/paper/) and it give a similar rendering and Many2One does not need any customization to already have a good looking: I think buttons are still to cluttered. Looking at bootstrap + paper theme style I think we should use the btn-link class instead of the btn-default one for the buttons of m2o. Here I add several screenshots comparing how m2o, m2m & o2m widgets look like with btn-link vs btn-default. This is using current style, so the paper or materia styles will remove the clutter from input boxes further: # M2O ## btn-default ![m2o-btn-default](https://discuss-cdn.tryton.org/uploads/default/original/1X/cb0092a2b3d29a7394e7ab17b8bbd5d6741f1831.png) ## btn-link ![m2o-btn-link](https://discuss-cdn.tryton.org/uploads/default/original/1X/89c9af3208843647d29cfa2c3bcf0ab705dd3e11.png) # M2M ## btn-default ![m2m-btn-default](https://discuss-cdn.tryton.org/uploads/default/original/1X/2a868cf090767f15c479e04e2e661dfe736ac4f1.png) ## btn-link ![m2m-btn-link](https://discuss-cdn.tryton.org/uploads/default/original/1X/3c9683536c4f4d140e54c7839c58108e07ab8a3b.png) # O2M ## btn-default ![o2m-btn-default](https://discuss-cdn.tryton.org/uploads/default/original/1X/aafd4ea75b9fba9e1486d2dfe7c14834ffa159f2.png) ## btn-link ![o2m-btn-link](https://discuss-cdn.tryton.org/uploads/default/original/1X/0907b73bfb1e919f7bf80b6982d6db7923a1ea19.png) So I propose that we use “btn-link” for all “btn-default” in [http://hg.tryton.org/sao/file/tip/src/view/form.js](http://hg.tryton.org/sao/file/tip/src/view/form.js) That said, I think that paper or materia styles won’t still be enough to provide a great UI. For example, the underline is probably better that it affects the whole “form-many2one” div, instead of the input only. This way, the underline will be shown under the m2o buttons, making it more obvious that they’re part of the same widget. ---
**Author:** ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)\ **Post date:** [August 16, 2018, 11:51am UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/9 "2018-08-16T11:51:52Z")
> [@albert](#): > > I think buttons are still to cluttered. Looking at bootstrap + paper theme style I think we should use the btn-link class instead of the btn-default one for the buttons of m2o. This is my biggest issue with the trend of making button flat. It is no more visible that it is something to click or push on. > [@albert](#): > > So I propose that we use “btn-link” for all “btn-default” in [sao: 8d412a517d68 src/view/form.js](http://hg.tryton.org/sao/file/tip/src/view/form.js) For me, it is semantically wrong. Button should appear as a link if they behave like a link. And they should not if they have only icons without text. > [@albert](#): > > That said, I think that paper or materia styles won’t still be enough to provide a great UI. For example, the underline is probably better that it affects the whole “form-many2one” div, instead of the input only. This way, the underline will be shown under the m2o buttons, making it more obvious that they’re part of the same widget. This is an issue because you are using link style for button with only icon inside. If you find the button in input-group-btn too cluttered it is their style that must be changed and not the class. ---
**Author:** ![albert](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/albert/32/21_2.png) [@albert](https://discuss.tryton.org/u/albert)\ **Post date:** [August 16, 2018, 1:59pm UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/10 "2018-08-16T13:59:14Z")
> [@ced](#): > > > So I propose that we use “btn-link” for all “btn-default” in [sao: 8d412a517d68 src/view/form.js](http://hg.tryton.org/sao/file/tip/src/view/form.js) > > For me, it is semantically wrong. Button should appear as a link if they behave like a link. And they should not if they have only icons without text. > > > That said, I think that paper or materia styles won’t still be enough to provide a great UI. For example, the underline is probably better that it affects the whole “form-many2one” div, instead of the input only. This way, the underline will be shown under the m2o buttons, making it more obvious that they’re part of the same widget. > > This is an issue because you are using link style for button with only icon inside. > If you find the button in input-group-btn too cluttered it is their style that must be changed and not the class. Ok. Using btn-link would be semantically wrong. Yet, going back to the beginning of the discussion on whether to use material (or at least be inspired by some parts of it) and the question if we can make sao to behave better with themes. I have the impression that we should create specific CSS. For example, if we take a look at text fields: > **[Material Design](https://m2.material.io/design/components/text-fields.html)** > > Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. we’ll see that the right thing to do (according to material) is to use icons (not standard buttons) shown within the container of the text field. Is there really a way to achieve that using bootstrap themes only? My guess (not an expert, as said) is that it is not possible and so we should improve default Sao CSSs. ---
**Author:** ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)\ **Post date:** [August 16, 2018, 2:16pm UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/11 "2018-08-16T14:16:55Z")
> [@albert](#): > > we’ll see that the right thing to do (according to material) is to use icons (not standard buttons) shown within the container of the text field. Is there really a way to achieve that using bootstrap themes only? My guess (not an expert, as said) is that it is not possible and so we should improve default Sao CSSs. Indeed I was looking at that. We use input-group-button because it is the way Bootstrap propose for this. Now it is possible to have custom CSS to make it works like the [form-control-feedback](https://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box). We can not use form-control-feedback because it works only for one icon on the right and in Bootstrap 4 this has been replaced by [standard HTML5 validation](https://getbootstrap.com/docs/4.1/components/forms/#validation). But the big issue with custom CSS is that it may break bootstrap themes if it is not done correctly. The [solution without bootstrap](https://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box) seems to be a good starting point but it should work with `img` (for [New theme icon for Tryton](https://discuss.tryton.org/t/new-theme-icon-for-tryton/507)) and with image on both sides. ---
**Author:** ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)\ **Post date:** [August 28, 2018, 11:43am UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/12 "2018-08-28T11:43:25Z")
I submitted [Move icons in input (#7654) · Issues · Tryton / Tryton · GitLab](https://bugs.tryton.org/issue7654) which replace the group buttons but icons in the input. ---
**Author:** ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)\ **Post date:** [December 30, 2018, 6:23pm UTC](https://discuss.tryton.org/t/use-material-design-in-sao/647/13 "2018-12-30T18:23:54Z")