Commit Graph

7 Commits

Author SHA1 Message Date
sayamsamal
e9d53b6bb4 tooltips: Fix line height for non-English characters.
Some non-English characters overflow when the line height is reduced
for the tooltip text. This commit increases the line height of the
tooltips to accommodate these non-English characters and fixes the
hotkey hint margins for the same.
2023-02-06 18:41:31 -08:00
sayamsamal
c15c2157f7 tooltips: Set font-feature-settings to "ss01" for stylistic variant of "I".
This commit enables the stylistic set "ss01" in Source Sans 3
font family which contains stylistic variant of the upper-case
character "I", which contains two bars, one each on the top and
bottom of the letter. This provides a uniform look across all
the characters when used in the hotkey hints of the tooltips.
2023-02-06 18:41:31 -08:00
sayamsamal
9b1d4ca81e tooltips: Add italics styling to description of multi-line tooltips.
The second line of a multi-line tooltip generally desctribes the
additional information which helps the major text, i.e. the first
line of the multi-line tooltip, hence it would be a good idea to
add italics styling, to differentiate it from the main title. We
describe a simple ".italic" class for the same.

We also add a shorter line height to this description using the
".tooltip-inner-content" class.
2023-02-06 18:41:31 -08:00
sayamsamal
d66f2d900f tooltips: Add hotkey hints support for tooltips.
We add the support for hotkey hints for the tippyjs tooltips through
the hotkey_hints handlebar helper.

The hotkey_hints helper takes space seperated string arguments and
returns a span containing all the hotkeys with the required classes
for styling.

We also add a simple node test for the hotkey_hints handlebar helper.

Part of #21753
2023-02-06 18:41:31 -08:00
sayamsamal
8e1d537430 tooltips: Change tooltips arrow size to small.
We scale the tippy arrows to the same size as used by the tippyjs
documentation for the small arrow size example.

Part of #21753
2023-02-06 18:41:31 -08:00
sayamsamal
7d5d151b99 tooltips: Change tooltips styling to incorporate the redesign.
We use hsla(0, 0%, 20%, 1) for the light theme background color and
hsla(0, 0%, 0%, 1) for the dark theme. The text inside the tooltips
should be white in color, 14px in size and have a line height of 15px.

With one line of text, we want the height of the tooltips to be 25px,
i.e, line height (15px) + padding (5px + 5px = 10px).

Part of #21753
2023-02-06 18:41:31 -08:00
sayamsamal
a93b95f158 tooltips: Move tooltips styling to a dedicated .css file.
We want to seperate the tooltips styling into a dedicated .css file for
general readability and decluttering of the zulip.css file.
2023-02-06 18:41:31 -08:00