mirror of
https://github.com/zulip/zulip.git
synced 2025-11-02 04:53:36 +00:00
banners: Add new redesigned banner component.
This commit adds the redesigned banner component to the codebase along
with a storybook-style page in /devtools/banners to view and test the
redesigned banner component.
Any banner using the new redesigned styles, requires two classes,
- First, the base `banner` class which defines the structure and
behavior of the banner.
- Second, a modifier class like `banner-info` which defines the styles
for the particular banner type.
The navbar alert banners also have a custom class `navbar-alert-banner`
which is used to define the specific style and structure for these
banner types.
This commit also makes the `banner`, `action-button` and `icon-button`
components into handlebar templates to maintain consistency in their
usage in the codebase.
This commit is contained in:
Sayam Samal
Tim Abbott
211
templates/zerver/development/design_testing/banners.html
Normal file
211
templates/zerver/development/design_testing/banners.html
Normal file
@@ -0,0 +1,211 @@
|
||||
{% extends "zerver/base.html" %}
|
||||
{% set entrypoint = "dev-testing" %}
|
||||
|
||||
{% block title %}
|
||||
<title>{{ doc_root_title }} | Zulip Dev</title>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="portico-container" data-platform="{{ platform }}">
|
||||
<div class="portico-wrap">
|
||||
{% include 'zerver/portico-header.html' %}
|
||||
<div class="app portico-page">
|
||||
<div class="banner-wrapper" id="dev_navbar_alerts_wrapper"></div>
|
||||
<div class="app-main portico-page-container">
|
||||
<div class="design-testing-wrapper">
|
||||
<div class="banner-wrapper" id="dev_normal_banner_wrapper"></div>
|
||||
<section class="design-controls-section">
|
||||
<div class="design-testing-controls-label">Theme Settings</div>
|
||||
<div class="design-testing-controls">
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Dark Theme</span>
|
||||
<div role="group" class="tab-picker control-setting">
|
||||
<input type="radio" data-theme="dark" id="dev_enable_dark_theme_banners" class="tab-option" name="dark-theme-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="dev_enable_dark_theme_banners" tabindex="0">
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
<input type="radio" data-theme="light" id="dev_disable_dark_theme_banners" class="tab-option" name="dark-theme-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="dev_disable_dark_theme_banners" tabindex="0">
|
||||
<span>Disable</span>
|
||||
</label>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Select Background</span>
|
||||
<select class="design-testing-control-element control-setting select_background">
|
||||
{% for background in background_colors %}
|
||||
<option value="{{ background.css_var }}" {% if background.css_var == "--color-background" %}selected{% endif %}>{{ background.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="design-testing-controls-label">Banner Settings</div>
|
||||
<div class="design-testing-controls">
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Alert Banner Type</span>
|
||||
<select class="design-testing-control-element control-setting" id="banner_select_type"></select>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Banner Intent</span>
|
||||
<select class="design-testing-control-element control-setting" id="banner_select_intent"></select>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Banner Label</span>
|
||||
<input class="design-testing-control-element control-setting" type="text" id="banner_label" />
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Banner Close Button</span>
|
||||
<div role="group" class="tab-picker control-setting">
|
||||
<input type="radio" id="enable_banner_close_button" class="tab-option" name="banner-close-button-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_banner_close_button" tabindex="0">
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
<input type="radio" id="disable_banner_close_button" class="tab-option" name="banner-close-button-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_banner_close_button" tabindex="0">
|
||||
<span>Disable</span>
|
||||
</label>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="design-testing-controls-label">Primary Button Settings</div>
|
||||
<div class="design-testing-controls">
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Button</span>
|
||||
<div role="group" class="tab-picker control-setting">
|
||||
<input type="radio" id="enable_primary_button" class="tab-option" name="primary-button-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_primary_button" tabindex="0">
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
<input type="radio" id="disable_primary_button" class="tab-option" name="primary-button-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_primary_button" tabindex="0">
|
||||
<span>Disable</span>
|
||||
</label>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Button Icon</span>
|
||||
<div role="group" class="tab-picker control-setting">
|
||||
<input type="radio" id="enable_primary_button_icon" class="tab-option" name="primary-button-icon-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_primary_button_icon" tabindex="0">
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
<input type="radio" id="disable_primary_button_icon" class="tab-option" name="primary-button-icon-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_primary_button_icon" tabindex="0">
|
||||
<span>Disable</span>
|
||||
</label>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Select Icon</span>
|
||||
<select class="design-testing-control-element control-setting" id="primary_button_select_icon">
|
||||
{% for icon in icons %}
|
||||
<option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Button Text</span>
|
||||
<input class="design-testing-control-element control-setting" type="text" id="primary_button_text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="design-testing-controls-label">Quiet Button Settings</div>
|
||||
<div class="design-testing-controls">
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Button</span>
|
||||
<div role="group" class="tab-picker control-setting">
|
||||
<input type="radio" id="enable_quiet_button" class="tab-option" name="quiet-button-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_quiet_button" tabindex="0">
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
<input type="radio" id="disable_quiet_button" class="tab-option" name="quiet-button-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_quiet_button" tabindex="0">
|
||||
<span>Disable</span>
|
||||
</label>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Button Icon</span>
|
||||
<div role="group" class="tab-picker control-setting">
|
||||
<input type="radio" id="enable_quiet_button_icon" class="tab-option" name="quiet-button-icon-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_quiet_button_icon" tabindex="0">
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
<input type="radio" id="disable_quiet_button_icon" class="tab-option" name="quiet-button-icon-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_quiet_button_icon" tabindex="0">
|
||||
<span>Disable</span>
|
||||
</label>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Select Icon</span>
|
||||
<select class="design-testing-control-element control-setting" id="quiet_button_select_icon">
|
||||
{% for icon in icons %}
|
||||
<option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Button Text</span>
|
||||
<input class="design-testing-control-element control-setting" type="text" id="quiet_button_text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="design-testing-controls-label">Borderless Button Settings</div>
|
||||
<div class="design-testing-controls">
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Button</span>
|
||||
<div role="group" class="tab-picker control-setting">
|
||||
<input type="radio" id="enable_borderless_button" class="tab-option" name="borderless-button-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_borderless_button" tabindex="0">
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
<input type="radio" id="disable_borderless_button" class="tab-option" name="borderless-button-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_borderless_button" tabindex="0">
|
||||
<span>Disable</span>
|
||||
</label>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Button Icon</span>
|
||||
<div role="group" class="tab-picker control-setting">
|
||||
<input type="radio" id="enable_borderless_button_icon" class="tab-option" name="borderless-button-icon-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_borderless_button_icon" tabindex="0">
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
<input type="radio" id="disable_borderless_button_icon" class="tab-option" name="borderless-button-icon-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_borderless_button_icon" tabindex="0">
|
||||
<span>Disable</span>
|
||||
</label>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Select Icon</span>
|
||||
<select class="design-testing-control-element control-setting" id="borderless_button_select_icon">
|
||||
{% for icon in icons %}
|
||||
<option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Button Text</span>
|
||||
<input class="design-testing-control-element control-setting" type="text" id="borderless_button_text" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,8 +1,8 @@
|
||||
{% extends "zerver/base.html" %}
|
||||
{% set entrypoint = "dev-buttons" %}
|
||||
{% set entrypoint = "dev-testing" %}
|
||||
|
||||
{% block title %}
|
||||
<title>Button styles browser | Zulip Dev</title>
|
||||
<title>{{ doc_root_title }} | Zulip Dev</title>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
@@ -11,7 +11,6 @@
|
||||
{% include 'zerver/portico-header.html' %}
|
||||
<div class="app portico-page">
|
||||
<div class="app-main portico-page-container">
|
||||
<div class="design-testing-title">Button styles browser</div>
|
||||
<div class="design-testing-wrapper">
|
||||
<div class="dev-buttons-grid">
|
||||
<div class="dev-buttons-variant-group">
|
||||
@@ -169,18 +168,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="action-button-section">
|
||||
<div class="section-heading">Controls</div>
|
||||
<section class="design-controls-section">
|
||||
<div class="design-testing-controls-label">Controls</div>
|
||||
<div class="design-testing-controls">
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Dark Theme</span>
|
||||
<div role="group" class="tab-picker">
|
||||
<input type="radio" id="enable_dark_theme" class="tab-option" name="dark-theme-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_dark_theme" tabindex="0">
|
||||
<input type="radio" data-theme="dark" id="dev_enable_dark_theme_buttons" class="tab-option" name="dark-theme-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="dev_enable_dark_theme_buttons" tabindex="0">
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
<input type="radio" id="disable_dark_theme" class="tab-option" name="dark-theme-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_dark_theme" tabindex="0">
|
||||
<input type="radio" data-theme="light" id="dev_disable_dark_theme_buttons" class="tab-option" name="dark-theme-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="dev_disable_dark_theme_buttons" tabindex="0">
|
||||
<span>Disable</span>
|
||||
</label>
|
||||
<span class="slider"></span>
|
||||
@@ -188,7 +187,7 @@
|
||||
</div>
|
||||
<div class="design-testing-control">
|
||||
<span class="control-label">Select Background</span>
|
||||
<select class="design-testing-control-element" id="button_select_background">
|
||||
<select class="design-testing-control-element select_background">
|
||||
{% for background in background_colors %}
|
||||
<option value="{{ background.css_var }}" {% if background.css_var == "--color-background" %}selected{% endif %}>{{ background.name }}</option>
|
||||
{% endfor %}
|
||||
|
||||
@@ -84,6 +84,11 @@
|
||||
<td>None needed</td>
|
||||
<td>Test button styles</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/devtools/banners">/devtools/banners</a></td>
|
||||
<td>None needed</td>
|
||||
<td>Test banner styles</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Useful management commands</h2>
|
||||
|
||||
@@ -23,6 +23,9 @@
|
||||
{% if page_is_policy_center %}
|
||||
<span class="light portico-header-text"> | <a href="{{ root_domain_url }}/policies/">{{ doc_root_title }}</a></span>
|
||||
{% endif %}
|
||||
{% if page_is_design_testing %}
|
||||
<span class="light portico-header-text"> | <a href="{{ root_domain_url }}/devtools/{{ design_component }}">{{ doc_root_title }}</a></span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user