mirror of
https://github.com/zulip/zulip.git
synced 2025-11-03 13:33:24 +00:00
6dabfa02cb
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.
233 lines
16 KiB
HTML
233 lines
16 KiB
HTML
{% 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="app-main portico-page-container">
|
|
<div class="design-testing-wrapper">
|
|
<div class="dev-buttons-grid">
|
|
<div class="dev-buttons-variant-group">
|
|
<div class="dev-action-buttons-label">Action Buttons</div>
|
|
<div class="dev-icon-buttons-label">Icon Buttons</div>
|
|
</div>
|
|
<div class="dev-buttons-variant-group">
|
|
<div class="dev-buttons-variant-label">Neutral Variant</div>
|
|
<div class="dev-action-buttons-group">
|
|
<button class="action-button action-button-primary-neutral" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-quiet-neutral" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-borderless-neutral" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
</div>
|
|
<div class="dev-icon-buttons-group">
|
|
<button class="icon-button icon-button-neutral" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
<button class="icon-button icon-button-square icon-button-neutral" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dev-buttons-variant-group">
|
|
<div class="dev-buttons-variant-label">Brand Variant</div>
|
|
<div class="dev-action-buttons-group">
|
|
<button class="action-button action-button-primary-brand" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-quiet-brand" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-borderless-brand" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
</div>
|
|
<div class="dev-icon-buttons-group">
|
|
<button class="icon-button icon-button-brand" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
<button class="icon-button icon-button-square icon-button-brand" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dev-buttons-variant-group">
|
|
<div class="dev-buttons-variant-label">Info Variant</div>
|
|
<div class="dev-action-buttons-group">
|
|
<button class="action-button action-button-primary-info" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-quiet-info" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-borderless-info" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
</div>
|
|
<div class="dev-icon-buttons-group">
|
|
<button class="icon-button icon-button-info" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
<button class="icon-button icon-button-square icon-button-info" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dev-buttons-variant-group">
|
|
<div class="dev-buttons-variant-label">Success Variant</div>
|
|
<div class="dev-action-buttons-group">
|
|
<button class="action-button action-button-primary-success" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-quiet-success" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-borderless-success" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
</div>
|
|
<div class="dev-icon-buttons-group">
|
|
<button class="icon-button icon-button-success" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
<button class="icon-button icon-button-square icon-button-success" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dev-buttons-variant-group">
|
|
<div class="dev-buttons-variant-label">Warning Variant</div>
|
|
<div class="dev-action-buttons-group">
|
|
<button class="action-button action-button-primary-warning" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-quiet-warning" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-borderless-warning" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
</div>
|
|
<div class="dev-icon-buttons-group">
|
|
<button class="icon-button icon-button-warning" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
<button class="icon-button icon-button-square icon-button-warning" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="dev-buttons-variant-group">
|
|
<div class="dev-buttons-variant-label">Danger Variant</div>
|
|
<div class="dev-action-buttons-group">
|
|
<button class="action-button action-button-primary-danger" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-quiet-danger" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
<button class="action-button action-button-borderless-danger" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
<span class="action-button-label">Button joy</span>
|
|
</button>
|
|
</div>
|
|
<div class="dev-icon-buttons-group">
|
|
<button class="icon-button icon-button-danger" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
<button class="icon-button icon-button-square icon-button-danger" tabindex=0>
|
|
<i class="zulip-icon zulip-icon-move-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</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" 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" 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>
|
|
</div>
|
|
</div>
|
|
<div class="design-testing-control">
|
|
<span class="control-label">Select Background</span>
|
|
<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 %}
|
|
</select>
|
|
</div>
|
|
<div class="design-testing-control">
|
|
<span class="control-label">Action Button Icon</span>
|
|
<div role="group" class="tab-picker">
|
|
<input type="radio" id="enable_button_icon" class="tab-option" name="button-icon-select" checked/>
|
|
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_button_icon" tabindex="0">
|
|
<span>Enable</span>
|
|
</label>
|
|
<input type="radio" id="disable_button_icon" class="tab-option" name="button-icon-select"/>
|
|
<label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_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" id="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">Action Button Text</span>
|
|
<div class="control-setting control-setting-multiple">
|
|
<input class="design-testing-control-element" type="text" id="button_text" />
|
|
<button class="design-testing-control-element" id="clear_button_text">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|