[NEW] Adding the ability to theme by Sameesunkaria · Pull Request #1602 · RocketChat/Rocket.Chat.iOS

Sameesunkaria · 2018-04-25T19:42:04Z

@RocketChat/ios

This PR will focus on adding the ability to theme the application. The theme can be applied under Preferences > Theme. Currently there are three themes on the app, "Light", "Dark" and "Black".

A developer's guide for navigating these changes has been provided below.

Theme

A theme has been described as a class, containing the key colors and attributes which are required to theme the application.

Adapting a view for the theme

UIView conforms to the protocol, ThemeProvider. This protocol has a read-only variable var theme: Theme? { get }. The value of this variable is determined by its superview. In case a superview does not exist, the value is taken from the ThemeManager.

To color the UI components based on the selected theme, override the applyTheme method on UIView. This method comes from the conformance to the Themeable protocol. Here you can set the colors on the UI components. This is usually done in an extension. Accessing the theme property, will enable you to use the key colors associated with that theme.

The base implementation of applyTheme automatically sets the background color of the view, and calls applyTheme on all of its subviews.

Here's an example showing how the theme was applied to ChatMessageAudioView.

Note: It is recommended that you call super whenever overriding applyTheme.

A basic implementation for most of the UIKit view components has already been provided in ThemeableViews.swift.

Exempting a view from theming

A view and all of its subviews can be easily exempted from theming by overriding the theme property and returning nil.

This behaviour can also be adobted from within the Interface Builder, by setting the custom class for the view to NotThemeableView.

Applying a theme

For the theme to take effect, it is required that the view controller or the view add themselves as an observer by calling the addObserver(_:) method on ThemeManager.

ThemeManager expects that the observers conform to the protocol, Themeable. This protocol contains one required method, applyTheme. By default, calling this method on a UIView will theme that view and all of its subviews. And, calling this method on a UIViewController will pass this call to its view.

Using ThemeManager.addObserver(_:), automatically calls the applyTheme method on the object being added. The applyTheme method is also called on all of the observers when the theme changes.

This behaviour has already been implemented for BaseViewController and BaseTableViewController. Any subclass of the aforementioned view controllers are not required to call addObserver(_:) so long as they call super in viewDidLoad.

NOTE: ThemeManager does not hold a strong reference to the observer, so it is not required to the remove the observer from the ThemeManager.

The addObserver(_:) method only calls applyTheme once. This will make it so that all of the subviews added after calling the addObserver(_:) methods, will not be themed.

Updating the view after adding new subviews

You are required to call applyTheme on any of the subviews being added to the view, after the initial call to addObserver(_:).

The whole view is not required to be themed. The applyTheme method should only be called on the newly added subview.

UITableView, UICollectionView & UINavigationBar

UITableView, UICollectionView and UINavigationBar are already extended to accept new subviews and automatically call applyTheme on them.

Dealing with Navigation Bars

Apply theme method on the UINavigationBar will be automatically called when calling the applyTheme method on a BaseViewController or a BaseTableViewController. This behavior can be turned off by either overriding the theme property on the UINavigationBar, or using a NotThemeableNavigationBar.

This can be done inside the Interface Builder by setting the class of the UINavigationBar to NotThemeableNavigationBar.

Screenshots

Chat

Preferences

houndci-bot · 2018-04-25T19:43:18Z

Rocket.Chat/Themeable.swift

+    @objc func applyTheme(_ theme: Theme)
+}
+
+// TODO: These do not belong here


Todo Violation: TODOs should be resolved (These do not belong here). (todo)

houndci-bot · 2018-04-25T19:43:18Z

Rocket.Chat/Controllers/Notification/NotificationViewController.swift

        view.clipsToBounds = true
    }

+    // TODO: This does not belong here


Todo Violation: TODOs should be resolved (This does not belong here). (todo)

houndci-bot · 2018-04-25T19:43:18Z

Rocket.Chat/AppDelegate.swift

    var window: UIWindow?
    var notificationWindow: UIWindow?

+    // TODO: This does not belong here


Todo Violation: TODOs should be resolved (This does not belong here). (todo)

codecov · 2018-04-25T20:25:31Z

Codecov Report

Merging #1602 into develop will increase coverage by 0.99%.
The diff coverage is 59.89%.

@@            Coverage Diff             @@
##           develop   #1602      +/-   ##
==========================================
+ Coverage     34.5%   35.5%   +0.99%     
==========================================
  Files          283     292       +9     
  Lines        13318   13621     +303     
==========================================
+ Hits          4596    4836     +240     
- Misses        8722    8785      +63

Impacted Files	Coverage Δ
...lers/Notification/NotificationViewController.swift	`47.05% <ø> (+2.35%)`	⬆️
...ences/Profile/EditProfileTableViewController.swift	`29.31% <ø> (ø)`	⬆️
...es/ChangeAppIcon/ChangeAppIconViewController.swift	`0% <ø> (ø)`	⬆️
...ences/Profile/NewPasswordTableViewController.swift	`0% <ø> (ø)`	⬆️
.../Preferences/Language/LanguageViewController.swift	`0% <ø> (ø)`	⬆️
...es/Web Browser/WebBrowserTableViewController.swift	`0% <ø> (ø)`	⬆️
...ollers/Preferences/PreferencesViewController.swift	`0% <ø> (ø)`	⬆️
.../Views/Cells/Chat/ChatMessageUnreadSeparator.swift	`0% <0%> (ø)`
...t/Controllers/Chat/MembersListViewController.swift	`0% <0%> (ø)`	⬆️
...Chat/Views/Form/Cells/TextFieldTableViewCell.swift	`0% <0%> (ø)`	⬆️
... and 56 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 25874b7...4892ee0. Read the comment docs.

houndci-bot · 2018-04-25T21:12:42Z

Rocket.Chat/Themeable.swift

+    }
+}
+
+// TODO: The add/insertSubview methods should not be overridden for UICollectionView,


Todo Violation: TODOs should be resolved (The add/insertSubview methods ...). (todo)

houndci-bot · 2018-04-25T22:32:28Z

Rocket.Chat/Helpers/MessageTextFontAttributes.swift

-    static let defaultFontColor = UIColor.darkGray
-    static let systemFontColor = UIColor.lightGray
-    static let failedFontColor = UIColor.lightGray
+    // TODO: Probably should not be changed here


Todo Violation: TODOs should be resolved (Probably should not be changed...). (todo)

houndci-bot · 2018-04-26T20:37:07Z

Rocket.Chat/Themeable.swift

+    var theme: Theme? { get }
+}
+
+// TODO: These do not belong here


Todo Violation: TODOs should be resolved (These do not belong here). (todo)

rafaelks · 2018-06-12T17:00:07Z

Podfile.lock

 PODFILE CHECKSUM: 0af4673565909cbfda00f61124b8286f6433aff3

-COCOAPODS: 1.5.3
+COCOAPODS: 1.5.2


Could you please update your CocoaPods to 1.5.3?

rafaelks · 2018-06-12T19:27:32Z

@Sameesunkaria I enjoyed very much playing with the themes, congrats on the development of it! 👏

Couple of issues I found while testing (on iOS 11.4):

Checkmark is gray, should be blue for light theme.

"Away" should be gray, not black for light theme.

Checkmark is gray, should be blue for light theme.

"open.rocket.chat" is using a different gray color than today. Let's keep the same as today please, to all other grays on the app.

This is not the gray we have today for light theme.

This is not the gray we have today (I'm talking about the last message text) for light theme.

You changed the colors of the messages to black. Let's use the same as we're using today please.

The status screen is like this for Dark & Black themes.

Sameesunkaria · 2018-06-12T20:45:56Z

Fixes

Checkmark is gray, should be blue for light theme.
"Away" should be gray, not black for light theme.
Checkmark is gray, should be blue for light theme.
"open.rocket.chat" is using a different gray color than today. Let's keep the same as today please, to all other grays on the app.
This is not the gray we have today for light theme.
This is not the gray we have today (I'm talking about the last message text) for light theme.
You changed the colors of the messages to black. Let's use the same as we're using today please.
The status screen is like this for Dark & Black themes.

Sameesunkaria · 2018-06-13T06:54:30Z

@rafaelks Addressed those concerns.

rafaelks · 2018-06-14T11:22:17Z

@Sameesunkaria Looking great! Thanks a lot for the hard work on this one!

filipealva · 2018-06-14T13:44:48Z

@Sameesunkaria Just reviewed it post-merge, it's looking awesome! Thank you 🥇

Sameesunkaria added 10 commits March 26, 2018 01:47

basic support for a dark theme

3501955

Merge branch 'develop' into themeable-rc

26878c5

Minor fixes after merge

4922414

Chat text field background color added

43d2b9f

Accent color added

3785cdf

Accent colors applied

1c411af

Fixed theming for the status bar and the text input bar

78c6929

fixed preferences

3cce9ce

Merge upstream

7432ba0

Merge branch 'develop' into themeable-rc

bff5faa

houndci-bot reviewed Apr 25, 2018

View reviewed changes

Fix PreferencesViewController mapping in project

f7b6f62

Sameesunkaria added 3 commits April 26, 2018 02:28

Emoji picker themed

4a5551e

adapted keyboard appearance

ab22b09

TODO comment added

dd24b8a

houndci-bot reviewed Apr 25, 2018

View reviewed changes

updated MessageTextFontAttributes

b050bef

houndci-bot reviewed Apr 25, 2018

View reviewed changes

Changed how the theme is stored.

be28f99

houndci-bot reviewed Apr 26, 2018

View reviewed changes

Sameesunkaria added 9 commits April 27, 2018 02:10

Merge upstream

478ae7a

Merge branch 'develop' into themeable-rc

bec5a83

Resolved conflicts

c91c155

Refactoring

6c81904

Themes added

a4a7320

Merge upstream

1f395cb

Theme observer added

16a347c

Merge branch 'develop' into themeable-rc

6ecdb0e

Fix project files

21f530e

Sameesunkaria added 4 commits June 11, 2018 21:51

Fix incorrectly themed components

a0279af

Minor color fixes

2967c9b

Using the checkmark accessory instead of a text field

85fa142

Theme applied to SubscriptionSectionView

73375f2

rafaelks requested review from filipealva and rafaelks June 12, 2018 16:59

rafaelks added the 👀 needs review label Jun 12, 2018

rafaelks reviewed Jun 12, 2018

View reviewed changes

Updated cocoapods

5382781

Sameesunkaria added 2 commits June 12, 2018 22:39

Minor color fixes

97f9302

Fix theme on StatusTableViewController

42b42e3

Sameesunkaria added 3 commits June 13, 2018 08:00

Added controlText color as a new grey color for text

8835437

Changed the detail text color for ServerInfoCell

3e19b63

Improve colors on the chat view controller

263eb2c

Sameesunkaria added 8 commits June 13, 2018 15:05

Merge branch 'develop' into themeable-rc

512f2c5

Merge develop

c9b9f0c

Scroll view indicators themed

a57cc49

Fix tests

13525ed

Fix minor theming issues

e327445

Merge branch 'develop' into themeable-rc

cbaa851

Fix merge issues

207aefa

Merge branch 'develop' into themeable-rc

4a49d75

rafaelks merged commit 1bbc60e into RocketChat:develop Jun 14, 2018

Sameesunkaria removed the 👀 needs review label Jul 12, 2018

Sameesunkaria deleted the themeable-rc branch August 31, 2018 12:04

Comments

Conversation

Sameesunkaria commented Apr 25, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Theme

Adapting a view for the theme

Exempting a view from theming

Applying a theme

Updating the view after adding new subviews

UITableView, UICollectionView & UINavigationBar

Dealing with Navigation Bars

Screenshots

Chat

Preferences

Uh oh!

houndci-bot Apr 25, 2018

Choose a reason for hiding this comment

Uh oh!

houndci-bot Apr 25, 2018

Choose a reason for hiding this comment

Uh oh!

houndci-bot Apr 25, 2018

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Apr 25, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

houndci-bot Apr 25, 2018

Choose a reason for hiding this comment

Uh oh!

houndci-bot Apr 25, 2018

Choose a reason for hiding this comment

Uh oh!

houndci-bot Apr 26, 2018

Choose a reason for hiding this comment

Uh oh!

rafaelks Jun 12, 2018

Choose a reason for hiding this comment

Uh oh!

rafaelks commented Jun 12, 2018

Uh oh!

Sameesunkaria commented Jun 12, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fixes

Uh oh!

Sameesunkaria commented Jun 13, 2018

Uh oh!

rafaelks commented Jun 14, 2018

Uh oh!

filipealva commented Jun 14, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Sameesunkaria commented Apr 25, 2018 •

edited

Loading

codecov bot commented Apr 25, 2018 •

edited

Loading

Sameesunkaria commented Jun 12, 2018 •

edited

Loading