New theme icon for Tryton

(Oscar Alvarez) #1

Rational

I think the icons theme on Tryton to require a new design and current it is not unified with the web client (sao), because this use another theme, when the end users switch from desktop version to the web version are confused, because the icons are completely different, this show UX design problems and integrations between versions desktop/web.

Proposal

  • To create a new unified and nice theme icons for Tryton.
  • Using the exactly the same icons in web and sao version.

Implementation

  • Maybe to use to crowfunding campaign for to pay a professional UX designer for that Tryton have its own icon theme.
  • Choose best style for start design process using a survey between community

This is an example style ideas (but I hope another proposals from community):

(Cédric Krier) #2

I quite agree on this but for me all those examples are not qualified for Tryton because of their license.
Indeed I already thought that we could use Material icons which is under Apache License v2.0. I think it is more complete than the Free part of Font Awesome and also it will be easy for designer to extend it (from our current web agency) because they are simple and without shadow.
But I think before starting on this change some work need to be done:

  • Fix IconFactory
  • Rationalize the icon usage:
    • List the minimal set of icons that client must embed
    • List the set of icons that trytond must provide
    • List the extra icons needed for each module
(Oscar Alvarez) #3

Yes you are right, the license is important but the examples are just for designers inspiration :slight_smile:

I will try check out the icon Factory issue, maybe I can help.

(Cédric Krier) #4

I think before choosing Material icons, we should check that FullCalendar will work with it on new version: https://fullcalendar.io/blog/2018/03/bootstrap-4-support

(Cédric Krier) #5

Indeed there is only 5 icons used by FullCalendar: https://fullcalendar.io/docs/bootstrapFontAwesome
It will be easy to write the css rules to use the Material icons equivalent.

(Vincent Bastos) #6

Just thought I would add another resource. Foundation is an alternative to Bootstrap.

https://foundation.zurb.com/icon-fonts.html

(Cédric Krier) #7

Fonts are not useful because we need to display on GTK which require a picture format (ex: PNG, SVG etc.)

(Vincent Bastos) #8

Sorry, I didn’t pay attention.

(Vincent Bastos) #9

Actually there is a svg file:

(Cédric Krier) #10

The IconFactory issue has a patch: Issue 7059: IconFactory deprecated - Tryton issue tracker
But it requires the rework of list of icon to be pushed.

(Cédric Krier) #11

Icon list

Client

  • tryton-ok tryton-ok
  • tryton-cancel tryton-cancel
  • tryton-close tryton-close
  • tryton-menu tryton-menu
  • tryton-bookmarks tryton-bookmarks
  • tryton-exit tryton-exit
  • tryton-switch tryton-switch
  • tryton-back tryton-back
  • tryton-forward tryton-forward
  • tryton-create tryton-create
  • tryton-save tryton-save
  • tryton-refresh tryton-refresh
  • tryton-copy tryton-copy
  • tryton-delete tryton-delete
  • tryton-undo tryton-undo
  • tryton-log tryton-log
  • tryton-history tryton-history
  • tryton-attach tryton-attach
  • tryton-note tryton-note
  • tryton-launch tryton-launch
  • tryton-link tryton-link
  • tryton-open tryton-open
  • tryton-print tryton-print
  • tryton-email tryton-email
  • tryton-public tryton-public
  • tryton-export tryton-export
  • tryton-import tryton-import
  • tryton-filter tryton-filter
  • tryton-search tryton-search
  • tryton-bookmark tryton-bookmark
  • tryton-bookmark-border tryton-bookmark-border
  • tryton-archive tryton-archive
  • tryton-unarchive tryton-unarchive
  • tryton-star tryton-star
  • tryton-star-border tryton-star-border
  • tryton-clear tryton-clear
  • tryton-add tryton-add
  • tryton-remove tryton-remove
  • tryton-date tryton-date
  • tryton-translate tryton-translate
  • tryton-format-bold tryton-format-bold
  • tryton-format-italic tryton-format-italic
  • tryton-format-underline tryton-format-underline
  • tryton-format-align-left tryton-format-align-left
  • tryton-format-align-center tryton-format-align-center
  • tryton-format-align-right tryton-format-align-right
  • tryton-format-align-justify tryton-format-align-justify
  • tryton-format-color-text tryton-format-color-text
  • tryton-info tryton-info
  • tryton-warning tryton-warning
  • tryton-error tryton-error

Server

  • tryton-form tryton-form
  • tryton-list tryton-list
  • tryton-tree tryton-tree
  • tryton-calendar tryton-calendar
  • tryton-graph tryton-graph
  • tryton-board tryton-board
  • tryton-folder tryton-folder
  • tryton-settings tryton-settings

Modules

  • tryton-account tryton-account
  • tryton-bank tryton-bank
  • tryton-carrier tryton-carrier
  • tryton-commission tryton-commission
  • tryton-company tryton-company
  • tryton-country tryton-country
  • tryton-currency tryton-currency
  • tryton-party tryton-party
  • tryton-product tryton-product
  • tryton-production tryton-production
  • tryton-project tryton-project
  • tryton-purchase tryton-purchase
  • tryton-sale tryton-sale
  • tryton-stock tryton-stock
  • tryton-timesheet tryton-timesheet
(Sergio Morillo) #12

If Tryton will use Material icons, what do you think about setting material design as default (or included) sao theme?

(Cédric Krier) #13

That’s the original plan:

(Sergio Morillo) #14

I’m referring not only icons theme but all bootstrap css styling.

(Cédric Krier) #15

I doubt any one will invest on rewriting sao to change the main component library.
Also this is off-topic.

(Cédric Krier) #16

Here is a preview of the desktop client with the new icons:

Desktop client with new icons
2018-08-01-174607_1940x1552_scrot.png1940x1552 323 KB

The color is not fixed, I’m waiting the final design of the website theme.

Use material design in sao
(Cédric Krier) #17

The patch is ready for testing at Issue 474: Use Material icons - Tryton issue tracker

(Cédric Krier) #18

Here is a preview of the web client with the new icons:

image
image.png1866x812 169 KB