Customization

Styles

MeetingDoctors UI styles can be customized by creating an instance that complies with the 'MeetingDoctorsStyleType' protocol, modifying its properties and then linking it to the 'style' property of the library.

By default, the 'style' property is already configured with initial values that fit with the MeetingDoctors brand and are used if the style value is not overwritten or simply initialized to nil.

Properties

Colors:

// Common

// UIColor: Primary color (default: #4FA6FF).
MeetingDoctors.style?.colors.common.primary

// Chat

// Outgoing bubble

// UIColor: Bubble outgoing text colors (default: #555555).
MeetingDoctors.style?.colors.chat.messageTextOutgoing

// UIColor: Bubble outgoing date colors (default: #999999).
MeetingDoctors.style?.colors.chat.messageDateOutgoing

// UIColor: Bubble outgoing bubble colors (default: #xFFFFFF).
MeetingDoctors.style?.colors.chat.bubbleBackgroundOutgoing

// Incoming bubble

// UIColor: Bubble incoming text colors (default: #4FA6FF).
MeetingDoctors.style?.colors.chat.messageTextIncoming

// UIColor: Bubble incoming date colors (default: #FFFFFF).
MeetingDoctors.style?.colors.chat.messageDateIncoming

// UIColor: Bubble incoming bubble colors (default: #FFFFFF).
MeetingDoctors.style?.colors.chat.bubbleBackgroundIncoming

Flags:

// Common

// Bool: Show notification permission screen (default: true).
MeetingDoctors.style?.flags.common.showNotificationPermission

// ProfessionalList

// Bool: Show title of the professional list ("Chat") (default: true)
MeetingDoctors.style?.flags.professionalList.showHeader

// Bool: Whether the collegiate number should appear next to the speciality (default: false).
MeetingDoctors.style?.flags.professionalList.showCollegiateNumber

// Bool: Hiddes the navigation bar of the professional list (default: false).
MeetingDoctors.style?.flags.professionalList.isNavigationBarHidden

Features:

// Videocall - Information

// String?: First bullet of the information view, nil to hide (default: We will look for your professional straight away)
MeetingDoctors.style?.feature.videocall.information.firstItem

// String?: Second bullet of the information view, nil to hide (default: Connect to your video consultation once the professional is ready for you)
MeetingDoctors.style?.feature.videocall.information.secondItem

// String?: Third bullet of the information view, nil to hide (default: Receive your medical report and your prescription if necessary)
MeetingDoctors.style?.feature.videocall.information.thirdItem

Others:

// Inbox cell style for contact list (classic / meetingDoctors / complete)
MeetingDoctors.style?.inboxCellStyle: MeetingDoctorsInboxCellStyle

// View used as background in chat screen.
MeetingDoctors.style?.chatBackgroundView: UIView?

/// String of the literal for usser banned
MeetingDoctors.style?.supportMailBanned: String?

Usage:

MeetingDoctors.style?.colors.common.primary = .blue
MeetingDoctors.updateStyle()

Divider configuration

Using MeetingDoctorsDivider generic builder we can configure a divider view group style and behavior.

Take for instance a DividerContentView which is a custom view we want to inject inside a divider cell. We would configure a style divider like this:

MeetingDoctors.style?.divider = MeetingDoctorsDivider<DividerContentView>(view: divider)
    .add(configuration: { (cell, view) -> Void in
        view.button.setTitle("I'm interested", for: .normal)
        view.label.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    })
    .add(selector: { (speciality, authorized) -> Bool in
        NSLog("[LaunchScreenViewController] Inbox item '\(String(describing: speciality))' selected and authorized '\(authorized)'")
        return true
    })

Configuration closure will be called every time the divider cell appears in the list so the user can update view values.

Selector will be called on every user interaction over the cell (i.e. did select row). If user is allowed to talk with the professional, return value can override chat access.

Both values are optional and it is not mandatory to implement them.

Header configuration

Using MeetingDoctorsDividerType builder you can configure view for header inside doctor list. With MeetingDoctorsDividerType you can configure the view for header and the size for this view. If the frame width is higher than screen width, the header width will be same as screen widt. Example:

MeetingDoctors.style?.topDivider = MeetingDoctorsDivider<TopDividerContentView>(view: inviteBanner())

If you want to remove the header you must set de headerView as nil.

Inbox cell style configuration

Using MeetingDoctorsInboxCellStyle builder you can configure doctor list look.

parameters

• MeetingDoctorsInboxCellStyle
  • Overlay
    • The color for unauthorized cells.
  • Badge
    • The color for pending messages for a conversation.
  • Speciality
    • The color for speciality color text.
  • hideSchedule
    • To allow hide the schedule information of the professionals.

Also you can choose cell style and can select meetingDoctors cell style or classic meetingDoctors cell

Usage for meetingDoctors cell:

MeetingDoctors.style?.inboxCellStyle = .meetingDoctors(
    overlay: .white,
    badge: .cyan,
    specyality: .magenta,
    hideSchedule: false
)

Usage for classic cell:

MeetingDoctors.style?.inboxCellStyle = .classic(
    overlay: .white,
    badge: .cyan, 
    specyality: .magenta, 
    hideSchedule: false
)

Usage for complete cell:

MeetingDoctors.style?.inboxCellStyle = .complete(
    overlay: .white, 
    badge: .cyan, 
    specyality: .magenta, 
    schedule: .cyan, 
    hideSchedule: false
)