View Issue Details

Related ChangesetsJump to NotesJump to History
IDProjectCategoryView StatusDate SubmittedLast Update
0004500SOGoGUIpublic2018-07-02 08:022019-01-24 14:55
Reporteramair Assigned Tofrancis  
PrioritynormalSeverityminorReproducibilityalways
Status assignedResolutionreopened 
Product Version4.0.0 
Fixed in Version4.0.2 
Summary0004500: SOGo v4 Themes: not all colors applied
Description

I tried to change the SOGo colors but they are not applied like expected.
In sogo.conf I added the line "SOGoUIAdditionalJSFiles = (js/theme.js);". I modified the original theme.js like this:

 43     $mdThemingProvider.theme('default')
 44       .primaryPalette('deep-orange', {
 45         'default': '400',  // top toolbar
 46         'hue-1': '400',
 47         'hue-2': '600',    // sidebar toolbar
 48         'hue-3': 'A700'
 49       })
 50       .accentPalette('orange', {
 51         'default': '600',  // fab buttons
 52         'hue-1': '50',     // center list toolbar
 53         'hue-2': '300',
 54         'hue-3': 'A700'
 55       })
 56       .backgroundPalette('grey', {
 57         'default': '50',   // center list background
 58         'hue-1': '200',
 59         'hue-2': '300',
 60         'hue-3': '500'
 61       });

What works: orange in login screen, some orange text in calendar and address book, orange background of selected mail and contact
NOT working: toolbar and sidebar still using default color, "+" buttons to create mail, contact or calendar entry.

TagsNo tags attached.

Activities

francis

francis

2018-07-06 13:45

administrator   ~0012940

Set/add the following attribute in your sogo.conf:

SOGoUIxDebugEnabled = YES;
amair

amair

2018-07-09 11:25

reporter   ~0012941

@francis: Yes, that works, but I think it should work with SOGoUIxDebugEnabled being disabled. Will this be fixed?

BTW: there's one place where green color is still used: Preferences / Calendar / Week days to display
I'd expected accent palette. Will this be changed?
francis

francis

2018-07-09 15:35

administrator   ~0012942

I've updated the documentation with some solution if you don't want to enable UI debugging:

https://sogo.nu/files/docs/SOGoDevelopersGuide.html#_defining_an_alternate_color_theme
amair

amair

2018-07-11 08:33

reporter   ~0012947

There are some more location where green/blue color is used:

  • calendar view: hours
  • edit calendar item:
    • selected hour and minute in time picker
    • time picker icon while time picker is open
  • .attendees .event

Not sure if there are more.
amair

amair

2018-09-13 12:55

reporter   ~0013023

Last edited: 2019-01-24 09:19

There's at least one left:
If you focus text inputs, dropdowns etc. the item's bottom border changes to one of my palette's color. This isn't true for the time pickers when adding/editing a calender event.
amair

amair

2019-01-24 14:55

reporter   ~0013279

I've now updated to v4.0.5 where I found more color usages that don't use theme colors:

  • UI/WebServerResources/scss/views/SchedulerUI.scss uses sg-color($sogoPaper, ...)
  • UI/WebServerResources/scss/views/MailerUI.scss uses sg-color($sogoBlue, 600)
  • UI/WebServerResources/scss/components/list/list-theme.scss uses sg-color($sogoPaper, ...) and sg-color($sogoBlue, ...)
  • UI/WebServerResources/scss/components/card/card-theme.scss uses sg-color($sogoPaper, 50)
  • UI/WebServerResources/scss/components/toolbar/toolbar-theme.scss uses sg-color($sogoPaper, 100)
  • UI/WebServerResources/scss/components/timepicker/timepicker.scss uses sg-color($sogoBlue, 900)
  • UI/WebServerResources/scss/components/content/content-theme.scss uses sg-color($sogoGreen, 100)
  • UI/WebServerResources/scss/components/content/content.scss uses sg-color($sogoGreen, 100)
  • UI/WebServerResources/scss/components/bottomSheet/bottom-sheet.scss uses sg-color($sogoBlue, 800)

From my understanding I'd say none of them should be used, at least $sogoBlue and $sogoGreen. They should be using colors from the theme's primary or accent palette. Don't know about $sogoPaper, shouldn't that be themeable too?

In the .scss files one can also find many references to $colorGrey... colors. I wonder if those shouldn't use the theme's background palette.

Related Changesets

sogo: master d6f85efa

2018-07-09 10:59

francis


Details Diff		 (css) Respect theme in sg-toggle-grid

Fixes 0004500		 Affected Issues
0004500
mod - UI/WebServerResources/js/Common/sgToggleGrid.directive.js Diff File
mod - UI/WebServerResources/scss/components/gridList/grid-list.scss Diff File

sogo: master c3271dd2

2018-08-23 12:00

francis


Details Diff		 (css) Respect theme in time picker and freebusy

Fixes 0004500		 Affected Issues
0004500
mod - UI/WebServerResources/js/Common/Common.app.js Diff File
mod - UI/WebServerResources/js/Common/sgTimepicker.directive.js Diff File
mod - UI/WebServerResources/js/Scheduler/Scheduler.app.js Diff File
mod - UI/WebServerResources/js/theme.js Diff File
mod - UI/WebServerResources/scss/components/timepicker/timepicker.scss Diff File
mod - UI/WebServerResources/scss/views/SchedulerUI.scss Diff File

Issue History

Date Modified Username Field Change
2018-07-02 08:02 amair New Issue
2018-07-06 13:45 francis Note Added: 0012940
2018-07-09 11:25 amair Note Added: 0012941
2018-07-09 15:01 francis Changeset attached => sogo master d6f85efa
2018-07-09 15:01 francis Assigned To => francis
2018-07-09 15:01 francis Resolution open => fixed
2018-07-09 15:35 francis Note Added: 0012942
2018-07-09 15:35 francis Status new => resolved
2018-07-09 15:35 francis Fixed in Version => 4.0.1
2018-07-11 08:33 amair Note Added: 0012947
2018-07-11 08:33 amair Status resolved => feedback
2018-07-11 08:33 amair Resolution fixed => reopened
2018-08-23 16:02 francis Changeset attached => sogo master c3271dd2
2018-08-23 16:03 francis Status feedback => resolved
2018-08-23 16:03 francis Fixed in Version 4.0.1 => 4.0.2
2018-08-23 16:03 francis Resolution reopened => fixed
2018-09-13 12:55 amair Note Added: 0013023
2018-09-13 12:55 amair Status resolved => feedback
2018-09-13 12:55 amair Resolution fixed => reopened
2019-01-24 09:19 amair Note Edited: 0013023
2019-01-24 14:55 amair Note Added: 0013279
2019-01-24 14:55 amair Status feedback => assigned