search

Dolibarr / dolibarr

Dolibarr ERP CRM is a modern software package to manage your company or foundation's activity (contacts, suppliers, invoices, orders, stocks, agenda, accounting, ...). it's an open source Web application (written in PHP) designed for businesses of any sizes, foundations and freelancers.
https://www.dolibarr.org
GNU General Public License v3.0
5.45k stars 2.79k forks source link

Better look and feel #9429

Closed eldy closed 1 year ago

eldy commented 6 years ago

This issue is to follow possible task to enhance Dolibarr look and feel.

Cut and paste of french email (to translate) [] Replace picto of status with a badge with the text and color in background like in this example https://adminlte.io/themes/AdminLTE/pages/tables/simple.html (see table Responsive Hover Table). Can be done by changing function getNomUrl(). [] replace icons with fontawesome (like adminlte) or css. Cela peut être fait aussi dans eldy et ne sera plus à faire. [] alerts in badge in top menu. [] popup on login with logout. Can be done in eldy. [] mise en place de menu déroulant (toutefois la tendance, poussé par le mobile first est à mettre les menu dans la barre du haut en déroulant et sous menu déroulant en mode desktop et de ne plus avoir du tout de menu sur la gauche ou droite en mode deskop, pour laisser le max de place aux listes, et surtout permettre un responsive des liste qui peuvent se déplacer de gauche à droite sans bouger tout le reste pout tout type de taille, comme on a quand on utilise eldy en mode smartphone, mais qu'on a pas en mode desktop à cause de ce menu gauche qui complique la vie au css rendant cela non possible en mode desktop tant qu'on a un menu gauche) [] ajouter plus de widget graphiques [] remplacer les graph de la lib jgraph par ce qui se fait dans admin LTE (graph en svg il me semble) [] component to build small lists [] fil ariane

dolibarr95 commented 6 years ago

+1 for all your ideas Maybe we can have for Dolibarr a free fontawesome pro licence :-p

john-botella commented 6 years ago

I start with a little one for tabs -> https://github.com/Dolibarr/dolibarr/pull/9512

atm-maxime commented 6 years ago

We plan with @atm-john to create a new modern theme with these improvements, goal is to have a first version for the end of the year

john-botella commented 6 years ago

For information I start a theme test here : https://github.com/atm-john/dolibarr_theme_evolution

dolibarr95 commented 6 years ago

Nice! Can you please provide a screenshot ?

john-botella commented 6 years ago

selection_012

menu have font awesome menu hover and active have arrow and border effect

infobulle_014

dolibarr95 commented 6 years ago

+1

ksar-ksar commented 6 years ago

Good!

You still keep the left menu ? For me is the thing that is the most not user friendly in Dolibarr

john-botella commented 6 years ago

step by step, first improuve visual to make Dolibarr "sexy" without lost accustomed user by adding strong changes.

And in future when left menu will disappear, I think we will need to keep left menu with a fall back option. I think really important to keep final user in center of ergonomic choices and do not disturb the habit.

laudeco commented 6 years ago

For information I start a theme test here : https://github.com/atm-john/dolibarr_theme_evolution

@atm-john what is still pending in the list of @eldy ?

dolibarr95 commented 6 years ago

@atm-john do you make a link directly to fontawesome.com or copy paste the theme folder ?

john-botella commented 6 years ago

All :-)

I just start working on it for one day my planning 2 days each 2 week. Actually just one point is done: menu font awesome icon: but still remain to include in eldy, I currently testing

This point is not really finished yet because I'm working on a solution to allow modules to add svg or font icons without load extra style sheet on each page for each modules.

I currently work on this points too :

Globally I work to improuve global look and feel an a new theme call evolution, but I use this same theme to testing somme new visual elements of eldy theme too, and after 2 week of tests I make a Pr in eldy theme to include elements common to both themes.

john-botella commented 6 years ago

@dolibarr95 fontawesome is already in Dolibarr from version 6.0.

dolibarr95 commented 6 years ago

@atm-john oups... /theme/common/fontawesome/css/font-awesome.min.css

laudeco commented 6 years ago

@eldy what do you expect when you say ?

[] replace icons with fontawesome (like adminlte) or css. Cela peut être fait aussi dans eldy et ne sera plus à faire.

You would like all icons will change to fontawesome (FA) or just icons from the menu or ...

Another question, how do you see this ? We change the HTML (it means that not only the eldy theme will be impacted).

john-botella commented 6 years ago

remplacer les graph de la lib jgraph par ce qui se fait dans admin LTE Admin Lte use same version of flot

first step with bars: https://github.com/Dolibarr/dolibarr/pull/9867

Hum my memory is kidding me... someone could tell where I can find line graph in dolibarr ? (not bars but lines)

@laudeco Actualy core modules icon are set by css (show evolution theme)

laudeco commented 6 years ago

I did one step more to font awesome, I migrated to the latest version #9871

eldy commented 6 years ago

@laudeco For the moment, i was thinking in term of priority to the images used for top menu, but other picto may also be concerned

aljawaid commented 5 years ago

I just stumbled upon this and thought maybe my local changes might help you with some ideas? In terms of look and feel I changed the styling of tooltips to include fa-icons with an improved visual experience. I chose a black/white and dark grey contrast to encourage staff productivity. We stare at a screen to look for information even though it may be right in front of us. We chose to highlight our mandatory information. I also managed to integrate a copy to clipboard function (using clipboard.js) for text-type extrafields which helps us a lot when copy/paste text for website/customers/price labels. Our business is all around products. The tooltip design was mentioned in the forum. https://www.dolibarr.org/forum/tips-and-tricks/28574-better-tooltips

image

image

john-botella commented 5 years ago

for info : https://github.com/Dolibarr/dolibarr/pull/10647

john-botella commented 5 years ago

for info #10770

john-botella commented 5 years ago

for info : NEW/FIX Theme sidebarr toggle #10780

john-botella commented 5 years ago

for info : #10812 new dropdown login menu

john-botella commented 5 years ago

for info :#10960 for mobile

john-botella commented 5 years ago

@eldy : you remove MAIN_TESTMENUHIDER global conf and it's usable only for mobile, but it's realy interesting to keep this behavior for PC with small screen. Is it plan ?

john-botella commented 5 years ago

For info : #11026

I working on this : Capture du 2019-04-15 09-20-46 image

My branch : https://github.com/atm-john/dolibarr/tree/new_look_and_feel_title_button

john-botella commented 5 years ago

new hidden conf to use in Dolibarr V10 :

MAIN_STATUS_USES_CSS ► (v10.0+) Change status design using new style MAIN_USE_NEW_TITLE_BUTTON ► (v10.0+) Use new list buttons design

john-botella commented 5 years ago

Work in progress : your feedback are welcome :

the curent develop branch : https://github.com/atm-john/dolibarr/tree/develop_new_dashboard for testing use hidden conf : MAIN_DISPLAY_NEW_OPENED_DASH_BOARD

PC : image TAB : image PHONE : image

hregis commented 5 years ago

un peu de couleurs dans ce monde de brutes ! ;-)

dolibarr95 commented 5 years ago

@atm-john +1

john-botella commented 5 years ago

https://github.com/Dolibarr/dolibarr/pull/11648

john-botella commented 5 years ago

task in develop or Pull request pending

work in progress : some parts are already in Dolibarr

remaining tasks

dolibarr95 commented 5 years ago

@atm-john about the top menu : what about if we have a external module with a top menu link? Is it mandatory to use a font-awesome icon or could we use a png... Tks

john-botella commented 5 years ago

you can use both as you prefer. Actually by default module use png, but you can change this behavior with a little bit of css

dolibarr95 commented 5 years ago

tks!

ariffidaali commented 5 years ago

https://adminlte.io/themes/AdminLTE/pages/tables/simple.html If Dolibarr could look like the above that would be awesome! @eldy how can we accelerate this?

dolibarr95 commented 5 years ago

Hi @ariffidaali by help coding 😋

john-botella commented 5 years ago

11679 improve task list visualisation :-)

maverjk commented 5 years ago

MAIN_DISPLAY_NEW_OPENED_DASH_BOARD

I have tried adding MAIN_DISPLAY_NEW_OPENED_DASH_BOARD but doesn't appears to work on my side... any other option to setup? I'm using Dolibarr 10.0.1

john-botella commented 5 years ago

New dash board is actually in Dolibarr Develop it will be available in Dolibarr 11

john-botella commented 5 years ago

New ticket messaging page design : https://github.com/Dolibarr/dolibarr/pull/11869

dolibarr95 commented 5 years ago

@atm-john Wonderful i love it !!!

john-botella commented 5 years ago

Curent pull request for menu #11792

john-botella commented 5 years ago

Curent pull request for dashboard #11945 #11947

john-botella commented 5 years ago

NEW : dropdown bookmark and search : https://github.com/Dolibarr/dolibarr/pull/11986

dolibarr95 commented 5 years ago

niiiiiice !!

cfoellmann commented 5 years ago

I really love what you are doing @atm-john

How about replacing the "page icon" image with the font awesome icon? See image: 2019-09-30

Thats something I might have time for.

dolibarr95 commented 5 years ago

11963

aspangaro commented 5 years ago

11972 Move a lot of icon to fontawesome

cfoellmann commented 5 years ago

Thanks @aspangaro for your work!

I have 2 more ideas, maybe it can help:

  1. pull in dependencies like "fontawesome" in via composer,yarn or sth similar

  2. use something like https://github.com/lipis/flag-icon-css to replace the flag icons (i am not sure if svg can work in all places)