mirror of
https://github.com/zulip/zulip.git
synced 2025-11-02 04:53:36 +00:00
showroom: Rename dev/design-testing -> showroom.
This commit is contained in:
Sayam Samal
Tim Abbott
@@ -10,30 +10,30 @@
|
||||
<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="banner-wrapper" id="showroom_component_banner_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">
|
||||
<div class="showroom-wrapper">
|
||||
<div class="banner-wrapper" id="showroom_component_banner_default_wrapper"></div>
|
||||
<section class="showroom-controls-section">
|
||||
<div class="showroom-controls-label">Theme Settings</div>
|
||||
<div class="showroom-controls">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Dark Theme</span>
|
||||
<div role="group" class="tab-picker showroom-control-setting">
|
||||
<input type="radio" data-theme="dark" id="showroom_enable_dark_theme_banners" class="tab-option" name="showroom-dark-theme-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_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">
|
||||
<input type="radio" data-theme="light" id="showroom_disable_dark_theme_banners" class="tab-option" name="showroom-dark-theme-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_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">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Select Background</span>
|
||||
<select class="showroom-control-element showroom-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 %}
|
||||
@@ -41,29 +41,29 @@
|
||||
</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 class="showroom-controls-label">Banner Settings</div>
|
||||
<div class="showroom-controls">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Alert Banner Type</span>
|
||||
<select class="showroom-control-element showroom-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 class="showroom-control">
|
||||
<span class="showroom-control-label">Banner Intent</span>
|
||||
<select class="showroom-control-element showroom-control-setting" id="showroom_component_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 class="showroom-control">
|
||||
<span class="showroom-control-label">Banner Label</span>
|
||||
<input class="showroom-control-element showroom-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">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Banner Close Button</span>
|
||||
<div role="group" class="tab-picker showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-control-element" for="disable_banner_close_button" tabindex="0">
|
||||
<span>Disable</span>
|
||||
</label>
|
||||
<span class="slider"></span>
|
||||
@@ -71,135 +71,135 @@
|
||||
</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">
|
||||
<div class="showroom-controls-label">Primary Button Settings</div>
|
||||
<div class="showroom-controls">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Button</span>
|
||||
<div role="group" class="tab-picker showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Button Icon</span>
|
||||
<div role="group" class="tab-picker showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Select Icon</span>
|
||||
<select class="showroom-control-element showroom-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 class="showroom-control">
|
||||
<span class="showroom-control-label">Button Text</span>
|
||||
<input class="showroom-control-element showroom-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">
|
||||
<div class="showroom-controls-label">Quiet Button Settings</div>
|
||||
<div class="showroom-controls">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Button</span>
|
||||
<div role="group" class="tab-picker showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Button Icon</span>
|
||||
<div role="group" class="tab-picker showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Select Icon</span>
|
||||
<select class="showroom-control-element showroom-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 class="showroom-control">
|
||||
<span class="showroom-control-label">Button Text</span>
|
||||
<input class="showroom-control-element showroom-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">
|
||||
<div class="showroom-controls-label">Borderless Button Settings</div>
|
||||
<div class="showroom-controls">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Button</span>
|
||||
<div role="group" class="tab-picker showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Button Icon</span>
|
||||
<div role="group" class="tab-picker showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Select Icon</span>
|
||||
<select class="showroom-control-element showroom-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 class="showroom-control">
|
||||
<span class="showroom-control-label">Button Text</span>
|
||||
<input class="showroom-control-element showroom-control-setting" type="text" id="borderless_button_text" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -11,15 +11,15 @@
|
||||
{% 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 class="showroom-wrapper">
|
||||
<div class="showroom-button-grid">
|
||||
<div class="showroom-component-button-intent-group">
|
||||
<div class="showroom-component-action-button-label">Action Buttons</div>
|
||||
<div class="showroom-component-icon-button-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">
|
||||
<div class="showroom-component-button-intent-group">
|
||||
<div class="showroom-component-button-intent-label">Neutral Variant</div>
|
||||
<div class="showroom-component-action-button-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>
|
||||
@@ -33,7 +33,7 @@
|
||||
<span class="action-button-label">Button joy</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dev-icon-buttons-group">
|
||||
<div class="showroom-component-icon-button-group">
|
||||
<button class="icon-button icon-button-neutral" tabindex=0>
|
||||
<i class="zulip-icon zulip-icon-move-alt"></i>
|
||||
</button>
|
||||
@@ -42,9 +42,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-buttons-variant-group">
|
||||
<div class="dev-buttons-variant-label">Brand Variant</div>
|
||||
<div class="dev-action-buttons-group">
|
||||
<div class="showroom-component-button-intent-group">
|
||||
<div class="showroom-component-button-intent-label">Brand Variant</div>
|
||||
<div class="showroom-component-action-button-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>
|
||||
@@ -58,7 +58,7 @@
|
||||
<span class="action-button-label">Button joy</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dev-icon-buttons-group">
|
||||
<div class="showroom-component-icon-button-group">
|
||||
<button class="icon-button icon-button-brand" tabindex=0>
|
||||
<i class="zulip-icon zulip-icon-move-alt"></i>
|
||||
</button>
|
||||
@@ -67,9 +67,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-buttons-variant-group">
|
||||
<div class="dev-buttons-variant-label">Info Variant</div>
|
||||
<div class="dev-action-buttons-group">
|
||||
<div class="showroom-component-button-intent-group">
|
||||
<div class="showroom-component-button-intent-label">Info Variant</div>
|
||||
<div class="showroom-component-action-button-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>
|
||||
@@ -83,7 +83,7 @@
|
||||
<span class="action-button-label">Button joy</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dev-icon-buttons-group">
|
||||
<div class="showroom-component-icon-button-group">
|
||||
<button class="icon-button icon-button-info" tabindex=0>
|
||||
<i class="zulip-icon zulip-icon-move-alt"></i>
|
||||
</button>
|
||||
@@ -92,9 +92,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-buttons-variant-group">
|
||||
<div class="dev-buttons-variant-label">Success Variant</div>
|
||||
<div class="dev-action-buttons-group">
|
||||
<div class="showroom-component-button-intent-group">
|
||||
<div class="showroom-component-button-intent-label">Success Variant</div>
|
||||
<div class="showroom-component-action-button-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>
|
||||
@@ -108,7 +108,7 @@
|
||||
<span class="action-button-label">Button joy</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dev-icon-buttons-group">
|
||||
<div class="showroom-component-icon-button-group">
|
||||
<button class="icon-button icon-button-success" tabindex=0>
|
||||
<i class="zulip-icon zulip-icon-move-alt"></i>
|
||||
</button>
|
||||
@@ -117,9 +117,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-buttons-variant-group">
|
||||
<div class="dev-buttons-variant-label">Warning Variant</div>
|
||||
<div class="dev-action-buttons-group">
|
||||
<div class="showroom-component-button-intent-group">
|
||||
<div class="showroom-component-button-intent-label">Warning Variant</div>
|
||||
<div class="showroom-component-action-button-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>
|
||||
@@ -133,7 +133,7 @@
|
||||
<span class="action-button-label">Button joy</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dev-icon-buttons-group">
|
||||
<div class="showroom-component-icon-button-group">
|
||||
<button class="icon-button icon-button-warning" tabindex=0>
|
||||
<i class="zulip-icon zulip-icon-move-alt"></i>
|
||||
</button>
|
||||
@@ -142,9 +142,9 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-buttons-variant-group">
|
||||
<div class="dev-buttons-variant-label">Danger Variant</div>
|
||||
<div class="dev-action-buttons-group">
|
||||
<div class="showroom-component-button-intent-group">
|
||||
<div class="showroom-component-button-intent-label">Danger Variant</div>
|
||||
<div class="showroom-component-action-button-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>
|
||||
@@ -158,7 +158,7 @@
|
||||
<span class="action-button-label">Button joy</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dev-icon-buttons-group">
|
||||
<div class="showroom-component-icon-button-group">
|
||||
<button class="icon-button icon-button-danger" tabindex=0>
|
||||
<i class="zulip-icon zulip-icon-move-alt"></i>
|
||||
</button>
|
||||
@@ -168,58 +168,58 @@
|
||||
</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>
|
||||
<section class="showroom-controls-section">
|
||||
<div class="showroom-controls-label">Controls</div>
|
||||
<div class="showroom-controls">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-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">
|
||||
<input type="radio" data-theme="dark" id="showroom_enable_dark_theme_buttons" class="tab-option" name="showroom-dark-theme-select"/>
|
||||
<label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_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">
|
||||
<input type="radio" data-theme="light" id="showroom_disable_dark_theme_buttons" class="tab-option" name="showroom-dark-theme-select" checked/>
|
||||
<label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_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">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Select Background</span>
|
||||
<select class="showroom-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 class="showroom-control">
|
||||
<span class="showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<label role="menuitemradio" class="tab-option-content showroom-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">
|
||||
<div class="showroom-control">
|
||||
<span class="showroom-control-label">Select Icon</span>
|
||||
<select class="showroom-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 class="showroom-control">
|
||||
<span class="showroom-control-label">Action Button Text</span>
|
||||
<div class="showroom-control-setting showroom-control-setting-multiple">
|
||||
<input class="showroom-control-element" type="text" id="button_text" />
|
||||
<button class="showroom-control-element" id="clear_button_text">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
{% 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>
|
||||
{% if page_is_showroom %}
|
||||
<span class="light portico-header-text"> | <a href="{{ root_domain_url }}/devtools/{{ showroom_component }}">{{ doc_root_title }}</a></span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -275,10 +275,10 @@ const update_buttons = (buttons: ActionButton[]): void => {
|
||||
};
|
||||
|
||||
function update_banner(): void {
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
|
||||
$("#banner_select_intent").val(current_banner.intent);
|
||||
$("#showroom_component_banner_select_intent").val(current_banner.intent);
|
||||
$("#banner_label").val(current_banner.label.toString());
|
||||
update_buttons(current_banner.buttons);
|
||||
if (current_banner.close_button) {
|
||||
@@ -292,7 +292,7 @@ let current_banner = alert_banners["custom-banner"]!;
|
||||
|
||||
$(window).on("load", () => {
|
||||
// Code for /devtools/buttons design testing page.
|
||||
$("input[name='dark-theme-select']").on("change", (e) => {
|
||||
$("input[name='showroom-dark-theme-select']").on("change", (e) => {
|
||||
if ($(e.target).data("theme") === "dark") {
|
||||
$(":root").addClass("dark-theme");
|
||||
} else {
|
||||
@@ -341,12 +341,12 @@ $(window).on("load", () => {
|
||||
$banner_select.append($("<option>").val(key).text(key));
|
||||
}
|
||||
|
||||
const $banner_intent_select = $("#banner_select_intent");
|
||||
const $banner_intent_select = $("#showroom_component_banner_select_intent");
|
||||
for (const intent of component_intents) {
|
||||
$banner_intent_select.append($("<option>").val(intent).text(intent));
|
||||
}
|
||||
|
||||
$("#banner_select_intent").on("change", function (this: HTMLElement) {
|
||||
$("#showroom_component_banner_select_intent").on("change", function (this: HTMLElement) {
|
||||
const selected_intent = $(this).val()?.toString();
|
||||
if (selected_intent === undefined) {
|
||||
return;
|
||||
@@ -361,9 +361,9 @@ $(window).on("load", () => {
|
||||
for (const button of custom_normal_banner.buttons) {
|
||||
button.intent = custom_normal_banner.intent;
|
||||
}
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
});
|
||||
|
||||
$banner_select.on("change", function (this: HTMLElement) {
|
||||
@@ -381,20 +381,20 @@ $(window).on("load", () => {
|
||||
} else {
|
||||
current_banner.close_button = false;
|
||||
}
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.close_button = current_banner.close_button;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
$("#banner_label").on("input", function (this: HTMLElement) {
|
||||
const banner_label = $(this).val()?.toString() ?? "";
|
||||
current_banner.label = banner_label;
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.label = banner_label;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -423,10 +423,10 @@ $(window).on("load", () => {
|
||||
);
|
||||
}
|
||||
sortButtons(current_banner.buttons);
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -440,10 +440,10 @@ $(window).on("load", () => {
|
||||
} else {
|
||||
delete primary_button.icon;
|
||||
}
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -456,10 +456,10 @@ $(window).on("load", () => {
|
||||
return;
|
||||
}
|
||||
primary_button.icon = $(this).val()?.toString() ?? "";
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -469,10 +469,10 @@ $(window).on("load", () => {
|
||||
return;
|
||||
}
|
||||
primary_button.label = $(this).val()?.toString() ?? "";
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -501,10 +501,10 @@ $(window).on("load", () => {
|
||||
(button) => button.type !== "quiet",
|
||||
);
|
||||
}
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -518,10 +518,10 @@ $(window).on("load", () => {
|
||||
} else {
|
||||
delete quiet_button.icon;
|
||||
}
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -534,10 +534,10 @@ $(window).on("load", () => {
|
||||
return;
|
||||
}
|
||||
quiet_button.icon = $(this).val()?.toString() ?? "";
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -547,10 +547,10 @@ $(window).on("load", () => {
|
||||
return;
|
||||
}
|
||||
quiet_button.label = $(this).val()?.toString() ?? "";
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -579,10 +579,10 @@ $(window).on("load", () => {
|
||||
(button) => button.type !== "borderless",
|
||||
);
|
||||
}
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -598,10 +598,10 @@ $(window).on("load", () => {
|
||||
} else {
|
||||
delete borderless_button.icon;
|
||||
}
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -616,10 +616,10 @@ $(window).on("load", () => {
|
||||
return;
|
||||
}
|
||||
borderless_button.icon = $(this).val()?.toString() ?? "";
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -631,10 +631,10 @@ $(window).on("load", () => {
|
||||
return;
|
||||
}
|
||||
borderless_button.label = $(this).val()?.toString() ?? "";
|
||||
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
$("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
|
||||
if (current_banner.process === "custom-banner") {
|
||||
custom_normal_banner.buttons = current_banner.buttons;
|
||||
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
|
||||
$("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -17,14 +17,14 @@ body {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
.design-testing-wrapper {
|
||||
.showroom-wrapper {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 20px;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.design-controls-section {
|
||||
.showroom-controls-section {
|
||||
display: grid;
|
||||
grid-template-columns: [control-name-start] max-content [control-name-end control-input-start] 1fr [control-input-end];
|
||||
gap: 10px;
|
||||
@@ -32,7 +32,7 @@ body {
|
||||
width: min(100%, 500px);
|
||||
}
|
||||
|
||||
.design-testing-controls {
|
||||
.showroom-controls {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: control-name-start / control-input-end;
|
||||
@@ -44,29 +44,29 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.design-testing-control {
|
||||
.showroom-control {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: control-name-start / control-input-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.design-testing-control-element {
|
||||
.showroom-control-element {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
.showroom-control-label {
|
||||
cursor: pointer;
|
||||
grid-column: control-name-start / control-name-end;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.control-setting {
|
||||
.showroom-control-setting {
|
||||
grid-column: control-input-start / control-input-end;
|
||||
}
|
||||
|
||||
.control-setting-multiple {
|
||||
.showroom-control-setting-multiple {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
@@ -76,60 +76,60 @@ body {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.design-testing-controls-label {
|
||||
.showroom-controls-label {
|
||||
grid-column: control-name-start / control-input-end;
|
||||
margin-top: 10px;
|
||||
font-size: 1.4em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dev-buttons-grid {
|
||||
.showroom-button-grid {
|
||||
display: grid;
|
||||
grid-template-areas: "dev-buttons-variant-name dev-action-buttons-group dev-icon-buttons-group";
|
||||
grid-template-areas: "showroom-component-button-intent-label showroom-component-action-button-group showroom-component-icon-button-group";
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
gap: 15px 30px;
|
||||
}
|
||||
|
||||
.dev-buttons-variant-group {
|
||||
.showroom-component-button-intent-group {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: 1 / -1;
|
||||
place-items: center start;
|
||||
}
|
||||
|
||||
.dev-buttons-variant-label {
|
||||
grid-area: dev-buttons-variant-name;
|
||||
.showroom-component-button-intent-label {
|
||||
grid-area: showroom-component-button-intent-label;
|
||||
}
|
||||
|
||||
.dev-action-buttons-group,
|
||||
.dev-action-buttons-label {
|
||||
grid-area: dev-action-buttons-group;
|
||||
.showroom-component-action-button-group,
|
||||
.showroom-component-action-button-label {
|
||||
grid-area: showroom-component-action-button-group;
|
||||
}
|
||||
|
||||
.dev-icon-buttons-group,
|
||||
.dev-icon-buttons-label {
|
||||
grid-area: dev-icon-buttons-group;
|
||||
.showroom-component-icon-button-group,
|
||||
.showroom-component-icon-button-label {
|
||||
grid-area: showroom-component-icon-button-group;
|
||||
}
|
||||
|
||||
.dev-action-buttons-group,
|
||||
.dev-icon-buttons-group {
|
||||
.showroom-component-action-button-group,
|
||||
.showroom-component-icon-button-group {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.dev-buttons-variant-label,
|
||||
.dev-action-buttons-label,
|
||||
.dev-icon-buttons-label {
|
||||
.showroom-component-button-intent-label,
|
||||
.showroom-component-action-button-label,
|
||||
.showroom-component-icon-button-label {
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#banner_select_intent {
|
||||
#showroom_component_banner_select_intent {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#dev_normal_banner_wrapper {
|
||||
#showroom_component_banner_default_wrapper {
|
||||
width: min(100%, 800px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -28,8 +28,8 @@ def showroom_component_buttons(request: HttpRequest) -> HttpResponse:
|
||||
context = {
|
||||
"background_colors": background_colors,
|
||||
"icons": get_svg_filenames(),
|
||||
"page_is_design_testing": True,
|
||||
"design_component": "buttons",
|
||||
"page_is_showroom": True,
|
||||
"showroom_component": "buttons",
|
||||
"doc_root_title": "Button styles browser",
|
||||
# We set isolated_page to avoid clutter from footer/header.
|
||||
"isolated_page": True,
|
||||
@@ -41,8 +41,8 @@ def showroom_component_banners(request: HttpRequest) -> HttpResponse:
|
||||
context = {
|
||||
"background_colors": background_colors,
|
||||
"icons": get_svg_filenames(),
|
||||
"page_is_design_testing": True,
|
||||
"design_component": "banners",
|
||||
"page_is_showroom": True,
|
||||
"showroom_component": "banners",
|
||||
"doc_root_title": "Banner styles browser",
|
||||
# We set isolated_page to avoid clutter from footer/header.
|
||||
"isolated_page": True,
|
||||
|
||||
@@ -98,7 +98,7 @@ urls = [
|
||||
path("flush_caches", remove_caches),
|
||||
# Redirect camo URLs for development
|
||||
path("external_content/<digest>/<received_url>", handle_camo_url),
|
||||
# Endpoints for UI components sandbox.
|
||||
# Endpoints for Showroom components.
|
||||
path("devtools/buttons/", showroom_component_buttons),
|
||||
path("devtools/banners/", showroom_component_banners),
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user