paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

showroom: Rename dev/design-testing -> showroom.

Browse Source
This commit is contained in:
Sayam Samal
2025-01-11 10:50:05 +05:30
committed by Tim Abbott
parent 6c16adc9d8
commit 75dabca291
7 changed files with 209 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
templates/zerver/development/showroom/banners.html
View File

@@ -10,30 +10,30 @@
<div class="portico-wrap"> <div class="portico-wrap">
{% include 'zerver/portico-header.html' %} {% include 'zerver/portico-header.html' %}
<div class="app portico-page"> <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="app-main portico-page-container">
<div class="design-testing-wrapper"> <div class="showroom-wrapper">
<div class="banner-wrapper" id="dev_normal_banner_wrapper"></div> <div class="banner-wrapper" id="showroom_component_banner_default_wrapper"></div>
<section class="design-controls-section"> <section class="showroom-controls-section">
<div class="design-testing-controls-label">Theme Settings</div> <div class="showroom-controls-label">Theme Settings</div>
<div class="design-testing-controls"> <div class="showroom-controls">
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Dark Theme</span> <span class="showroom-control-label">Dark Theme</span>
<div role="group" class="tab-picker control-setting"> <div role="group" class="tab-picker showroom-control-setting">
<input type="radio" data-theme="dark" id="dev_enable_dark_theme_banners" class="tab-option" name="dark-theme-select"/> <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 design-testing-control-element" for="dev_enable_dark_theme_banners" tabindex="0"> <label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_enable_dark_theme_banners" tabindex="0">
<span>Enable</span> <span>Enable</span>
</label> </label>
<input type="radio" data-theme="light" id="dev_disable_dark_theme_banners" class="tab-option" name="dark-theme-select" checked/> <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 design-testing-control-element" for="dev_disable_dark_theme_banners" tabindex="0"> <label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_disable_dark_theme_banners" tabindex="0">
<span>Disable</span> <span>Disable</span>
</label> </label>
<span class="slider"></span> <span class="slider"></span>
</div> </div>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Select Background</span> <span class="showroom-control-label">Select Background</span>
<select class="design-testing-control-element control-setting select_background"> <select class="showroom-control-element showroom-control-setting select_background">
{% for background in background_colors %} {% for background in background_colors %}
<option value="{{ background.css_var }}" {% if background.css_var == "--color-background" %}selected{% endif %}>{{ background.name }}</option> <option value="{{ background.css_var }}" {% if background.css_var == "--color-background" %}selected{% endif %}>{{ background.name }}</option>
{% endfor %} {% endfor %}
@@ -41,29 +41,29 @@
</div> </div>
</div> </div>
<div class="design-testing-controls-label">Banner Settings</div> <div class="showroom-controls-label">Banner Settings</div>
<div class="design-testing-controls"> <div class="showroom-controls">
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Alert Banner Type</span> <span class="showroom-control-label">Alert Banner Type</span>
<select class="design-testing-control-element control-setting" id="banner_select_type"></select> <select class="showroom-control-element showroom-control-setting" id="banner_select_type"></select>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Banner Intent</span> <span class="showroom-control-label">Banner Intent</span>
<select class="design-testing-control-element control-setting" id="banner_select_intent"></select> <select class="showroom-control-element showroom-control-setting" id="showroom_component_banner_select_intent"></select>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Banner Label</span> <span class="showroom-control-label">Banner Label</span>
<input class="design-testing-control-element control-setting" type="text" id="banner_label" /> <input class="showroom-control-element showroom-control-setting" type="text" id="banner_label" />
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Banner Close Button</span> <span class="showroom-control-label">Banner Close Button</span>
<div role="group" class="tab-picker control-setting"> <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"/> <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> <span>Enable</span>
</label> </label>
<input type="radio" id="disable_banner_close_button" class="tab-option" name="banner-close-button-select" checked/> <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> <span>Disable</span>
</label> </label>
<span class="slider"></span> <span class="slider"></span>
@@ -71,135 +71,135 @@
</div> </div>
</div> </div>
<div class="design-testing-controls-label">Primary Button Settings</div> <div class="showroom-controls-label">Primary Button Settings</div>
<div class="design-testing-controls"> <div class="showroom-controls">
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Button</span> <span class="showroom-control-label">Button</span>
<div role="group" class="tab-picker control-setting"> <div role="group" class="tab-picker showroom-control-setting">
<input type="radio" id="enable_primary_button" class="tab-option" name="primary-button-select"/> <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> <span>Enable</span>
</label> </label>
<input type="radio" id="disable_primary_button" class="tab-option" name="primary-button-select" checked/> <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> <span>Disable</span>
</label> </label>
<span class="slider"></span> <span class="slider"></span>
</div> </div>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Button Icon</span> <span class="showroom-control-label">Button Icon</span>
<div role="group" class="tab-picker control-setting"> <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"/> <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> <span>Enable</span>
</label> </label>
<input type="radio" id="disable_primary_button_icon" class="tab-option" name="primary-button-icon-select" checked/> <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> <span>Disable</span>
</label> </label>
<span class="slider"></span> <span class="slider"></span>
</div> </div>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Select Icon</span> <span class="showroom-control-label">Select Icon</span>
<select class="design-testing-control-element control-setting" id="primary_button_select_icon"> <select class="showroom-control-element showroom-control-setting" id="primary_button_select_icon">
{% for icon in icons %} {% for icon in icons %}
<option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option> <option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Button Text</span> <span class="showroom-control-label">Button Text</span>
<input class="design-testing-control-element control-setting" type="text" id="primary_button_text" /> <input class="showroom-control-element showroom-control-setting" type="text" id="primary_button_text" />
</div> </div>
</div> </div>
<div class="design-testing-controls-label">Quiet Button Settings</div> <div class="showroom-controls-label">Quiet Button Settings</div>
<div class="design-testing-controls"> <div class="showroom-controls">
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Button</span> <span class="showroom-control-label">Button</span>
<div role="group" class="tab-picker control-setting"> <div role="group" class="tab-picker showroom-control-setting">
<input type="radio" id="enable_quiet_button" class="tab-option" name="quiet-button-select"/> <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> <span>Enable</span>
</label> </label>
<input type="radio" id="disable_quiet_button" class="tab-option" name="quiet-button-select" checked/> <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> <span>Disable</span>
</label> </label>
<span class="slider"></span> <span class="slider"></span>
</div> </div>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Button Icon</span> <span class="showroom-control-label">Button Icon</span>
<div role="group" class="tab-picker control-setting"> <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"/> <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> <span>Enable</span>
</label> </label>
<input type="radio" id="disable_quiet_button_icon" class="tab-option" name="quiet-button-icon-select" checked/> <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> <span>Disable</span>
</label> </label>
<span class="slider"></span> <span class="slider"></span>
</div> </div>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Select Icon</span> <span class="showroom-control-label">Select Icon</span>
<select class="design-testing-control-element control-setting" id="quiet_button_select_icon"> <select class="showroom-control-element showroom-control-setting" id="quiet_button_select_icon">
{% for icon in icons %} {% for icon in icons %}
<option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option> <option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Button Text</span> <span class="showroom-control-label">Button Text</span>
<input class="design-testing-control-element control-setting" type="text" id="quiet_button_text" /> <input class="showroom-control-element showroom-control-setting" type="text" id="quiet_button_text" />
</div> </div>
</div> </div>
<div class="design-testing-controls-label">Borderless Button Settings</div> <div class="showroom-controls-label">Borderless Button Settings</div>
<div class="design-testing-controls"> <div class="showroom-controls">
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Button</span> <span class="showroom-control-label">Button</span>
<div role="group" class="tab-picker control-setting"> <div role="group" class="tab-picker showroom-control-setting">
<input type="radio" id="enable_borderless_button" class="tab-option" name="borderless-button-select"/> <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> <span>Enable</span>
</label> </label>
<input type="radio" id="disable_borderless_button" class="tab-option" name="borderless-button-select" checked/> <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> <span>Disable</span>
</label> </label>
<span class="slider"></span> <span class="slider"></span>
</div> </div>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Button Icon</span> <span class="showroom-control-label">Button Icon</span>
<div role="group" class="tab-picker control-setting"> <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"/> <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> <span>Enable</span>
</label> </label>
<input type="radio" id="disable_borderless_button_icon" class="tab-option" name="borderless-button-icon-select" checked/> <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> <span>Disable</span>
</label> </label>
<span class="slider"></span> <span class="slider"></span>
</div> </div>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Select Icon</span> <span class="showroom-control-label">Select Icon</span>
<select class="design-testing-control-element control-setting" id="borderless_button_select_icon"> <select class="showroom-control-element showroom-control-setting" id="borderless_button_select_icon">
{% for icon in icons %} {% for icon in icons %}
<option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option> <option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Button Text</span> <span class="showroom-control-label">Button Text</span>
<input class="design-testing-control-element control-setting" type="text" id="borderless_button_text" /> <input class="showroom-control-element showroom-control-setting" type="text" id="borderless_button_text" />
</div> </div>
</div> </div>
</section> </section>

106
templates/zerver/development/showroom/buttons.html
View File

@@ -11,15 +11,15 @@
{% include 'zerver/portico-header.html' %} {% include 'zerver/portico-header.html' %}
<div class="app portico-page"> <div class="app portico-page">
<div class="app-main portico-page-container"> <div class="app-main portico-page-container">
<div class="design-testing-wrapper"> <div class="showroom-wrapper">
<div class="dev-buttons-grid"> <div class="showroom-button-grid">
<div class="dev-buttons-variant-group"> <div class="showroom-component-button-intent-group">
<div class="dev-action-buttons-label">Action Buttons</div> <div class="showroom-component-action-button-label">Action Buttons</div>
<div class="dev-icon-buttons-label">Icon Buttons</div> <div class="showroom-component-icon-button-label">Icon Buttons</div>
</div> </div>
<div class="dev-buttons-variant-group"> <div class="showroom-component-button-intent-group">
<div class="dev-buttons-variant-label">Neutral Variant</div> <div class="showroom-component-button-intent-label">Neutral Variant</div>
<div class="dev-action-buttons-group"> <div class="showroom-component-action-button-group">
<button class="action-button action-button-primary-neutral" tabindex=0> <button class="action-button action-button-primary-neutral" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
@@ -33,7 +33,7 @@
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
</button> </button>
</div> </div>
<div class="dev-icon-buttons-group"> <div class="showroom-component-icon-button-group">
<button class="icon-button icon-button-neutral" tabindex=0> <button class="icon-button icon-button-neutral" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
</button> </button>
@@ -42,9 +42,9 @@
</button> </button>
</div> </div>
</div> </div>
<div class="dev-buttons-variant-group"> <div class="showroom-component-button-intent-group">
<div class="dev-buttons-variant-label">Brand Variant</div> <div class="showroom-component-button-intent-label">Brand Variant</div>
<div class="dev-action-buttons-group"> <div class="showroom-component-action-button-group">
<button class="action-button action-button-primary-brand" tabindex=0> <button class="action-button action-button-primary-brand" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
@@ -58,7 +58,7 @@
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
</button> </button>
</div> </div>
<div class="dev-icon-buttons-group"> <div class="showroom-component-icon-button-group">
<button class="icon-button icon-button-brand" tabindex=0> <button class="icon-button icon-button-brand" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
</button> </button>
@@ -67,9 +67,9 @@
</button> </button>
</div> </div>
</div> </div>
<div class="dev-buttons-variant-group"> <div class="showroom-component-button-intent-group">
<div class="dev-buttons-variant-label">Info Variant</div> <div class="showroom-component-button-intent-label">Info Variant</div>
<div class="dev-action-buttons-group"> <div class="showroom-component-action-button-group">
<button class="action-button action-button-primary-info" tabindex=0> <button class="action-button action-button-primary-info" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
@@ -83,7 +83,7 @@
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
</button> </button>
</div> </div>
<div class="dev-icon-buttons-group"> <div class="showroom-component-icon-button-group">
<button class="icon-button icon-button-info" tabindex=0> <button class="icon-button icon-button-info" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
</button> </button>
@@ -92,9 +92,9 @@
</button> </button>
</div> </div>
</div> </div>
<div class="dev-buttons-variant-group"> <div class="showroom-component-button-intent-group">
<div class="dev-buttons-variant-label">Success Variant</div> <div class="showroom-component-button-intent-label">Success Variant</div>
<div class="dev-action-buttons-group"> <div class="showroom-component-action-button-group">
<button class="action-button action-button-primary-success" tabindex=0> <button class="action-button action-button-primary-success" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
@@ -108,7 +108,7 @@
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
</button> </button>
</div> </div>
<div class="dev-icon-buttons-group"> <div class="showroom-component-icon-button-group">
<button class="icon-button icon-button-success" tabindex=0> <button class="icon-button icon-button-success" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
</button> </button>
@@ -117,9 +117,9 @@
</button> </button>
</div> </div>
</div> </div>
<div class="dev-buttons-variant-group"> <div class="showroom-component-button-intent-group">
<div class="dev-buttons-variant-label">Warning Variant</div> <div class="showroom-component-button-intent-label">Warning Variant</div>
<div class="dev-action-buttons-group"> <div class="showroom-component-action-button-group">
<button class="action-button action-button-primary-warning" tabindex=0> <button class="action-button action-button-primary-warning" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
@@ -133,7 +133,7 @@
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
</button> </button>
</div> </div>
<div class="dev-icon-buttons-group"> <div class="showroom-component-icon-button-group">
<button class="icon-button icon-button-warning" tabindex=0> <button class="icon-button icon-button-warning" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
</button> </button>
@@ -142,9 +142,9 @@
</button> </button>
</div> </div>
</div> </div>
<div class="dev-buttons-variant-group"> <div class="showroom-component-button-intent-group">
<div class="dev-buttons-variant-label">Danger Variant</div> <div class="showroom-component-button-intent-label">Danger Variant</div>
<div class="dev-action-buttons-group"> <div class="showroom-component-action-button-group">
<button class="action-button action-button-primary-danger" tabindex=0> <button class="action-button action-button-primary-danger" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
@@ -158,7 +158,7 @@
<span class="action-button-label">Button joy</span> <span class="action-button-label">Button joy</span>
</button> </button>
</div> </div>
<div class="dev-icon-buttons-group"> <div class="showroom-component-icon-button-group">
<button class="icon-button icon-button-danger" tabindex=0> <button class="icon-button icon-button-danger" tabindex=0>
<i class="zulip-icon zulip-icon-move-alt"></i> <i class="zulip-icon zulip-icon-move-alt"></i>
</button> </button>
@@ -168,58 +168,58 @@
</div> </div>
</div> </div>
</div> </div>
<section class="design-controls-section"> <section class="showroom-controls-section">
<div class="design-testing-controls-label">Controls</div> <div class="showroom-controls-label">Controls</div>
<div class="design-testing-controls"> <div class="showroom-controls">
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Dark Theme</span> <span class="showroom-control-label">Dark Theme</span>
<div role="group" class="tab-picker"> <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"/> <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 design-testing-control-element" for="dev_enable_dark_theme_buttons" tabindex="0"> <label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_enable_dark_theme_buttons" tabindex="0">
<span>Enable</span> <span>Enable</span>
</label> </label>
<input type="radio" data-theme="light" id="dev_disable_dark_theme_buttons" class="tab-option" name="dark-theme-select" checked/> <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 design-testing-control-element" for="dev_disable_dark_theme_buttons" tabindex="0"> <label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_disable_dark_theme_buttons" tabindex="0">
<span>Disable</span> <span>Disable</span>
</label> </label>
<span class="slider"></span> <span class="slider"></span>
</div> </div>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Select Background</span> <span class="showroom-control-label">Select Background</span>
<select class="design-testing-control-element select_background"> <select class="showroom-control-element select_background">
{% for background in background_colors %} {% for background in background_colors %}
<option value="{{ background.css_var }}" {% if background.css_var == "--color-background" %}selected{% endif %}>{{ background.name }}</option> <option value="{{ background.css_var }}" {% if background.css_var == "--color-background" %}selected{% endif %}>{{ background.name }}</option>
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Action Button Icon</span> <span class="showroom-control-label">Action Button Icon</span>
<div role="group" class="tab-picker"> <div role="group" class="tab-picker">
<input type="radio" id="enable_button_icon" class="tab-option" name="button-icon-select" checked/> <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> <span>Enable</span>
</label> </label>
<input type="radio" id="disable_button_icon" class="tab-option" name="button-icon-select"/> <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> <span>Disable</span>
</label> </label>
<span class="slider"></span> <span class="slider"></span>
</div> </div>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Select Icon</span> <span class="showroom-control-label">Select Icon</span>
<select class="design-testing-control-element" id="button_select_icon"> <select class="showroom-control-element" id="button_select_icon">
{% for icon in icons %} {% for icon in icons %}
<option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option> <option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<div class="design-testing-control"> <div class="showroom-control">
<span class="control-label">Action Button Text</span> <span class="showroom-control-label">Action Button Text</span>
<div class="control-setting control-setting-multiple"> <div class="showroom-control-setting showroom-control-setting-multiple">
<input class="design-testing-control-element" type="text" id="button_text" /> <input class="showroom-control-element" type="text" id="button_text" />
<button class="design-testing-control-element" id="clear_button_text">Reset</button> <button class="showroom-control-element" id="clear_button_text">Reset</button>
</div> </div>
</div> </div>
</div> </div>

4
templates/zerver/portico-header.html
View File

@@ -23,8 +23,8 @@
{% if page_is_policy_center %} {% if page_is_policy_center %}
<span class="light portico-header-text"> | <a href="{{ root_domain_url }}/policies/">{{ doc_root_title }}</a></span> <span class="light portico-header-text"> | <a href="{{ root_domain_url }}/policies/">{{ doc_root_title }}</a></span>
{% endif %} {% endif %}
{% if page_is_design_testing %} {% if page_is_showroom %}
<span class="light portico-header-text"> | <a href="{{ root_domain_url }}/devtools/{{ design_component }}">{{ doc_root_title }}</a></span> <span class="light portico-header-text"> | <a href="{{ root_domain_url }}/devtools/{{ showroom_component }}">{{ doc_root_title }}</a></span>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}

72
web/src/portico/showroom.ts
View File

@@ -275,10 +275,10 @@ const update_buttons = (buttons: ActionButton[]): void => {
}; };
function update_banner(): void { function update_banner(): void {
$("#dev_navbar_alerts_wrapper").html(banner_html(current_banner)); $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
$("#dev_normal_banner_wrapper").html(banner_html(custom_normal_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()); $("#banner_label").val(current_banner.label.toString());
update_buttons(current_banner.buttons); update_buttons(current_banner.buttons);
if (current_banner.close_button) { if (current_banner.close_button) {
@@ -292,7 +292,7 @@ let current_banner = alert_banners["custom-banner"]!;
$(window).on("load", () => { $(window).on("load", () => {
// Code for /devtools/buttons design testing page. // 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") { if ($(e.target).data("theme") === "dark") {
$(":root").addClass("dark-theme"); $(":root").addClass("dark-theme");
} else { } else {
@@ -341,12 +341,12 @@ $(window).on("load", () => {
$banner_select.append($("<option>").val(key).text(key)); $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) { for (const intent of component_intents) {
$banner_intent_select.append($("<option>").val(intent).text(intent)); $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(); const selected_intent = $(this).val()?.toString();
if (selected_intent === undefined) { if (selected_intent === undefined) {
return; return;
@@ -361,9 +361,9 @@ $(window).on("load", () => {
for (const button of custom_normal_banner.buttons) { for (const button of custom_normal_banner.buttons) {
button.intent = custom_normal_banner.intent; 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) { $banner_select.on("change", function (this: HTMLElement) {
@@ -381,20 +381,20 @@ $(window).on("load", () => {
} else { } else {
current_banner.close_button = false; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.close_button = current_banner.close_button; 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) { $("#banner_label").on("input", function (this: HTMLElement) {
const banner_label = $(this).val()?.toString() ?? ""; const banner_label = $(this).val()?.toString() ?? "";
current_banner.label = banner_label; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.label = banner_label; 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); 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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 { } else {
delete primary_button.icon; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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; return;
} }
primary_button.icon = $(this).val()?.toString() ?? ""; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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; return;
} }
primary_button.label = $(this).val()?.toString() ?? ""; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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", (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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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 { } else {
delete quiet_button.icon; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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; return;
} }
quiet_button.icon = $(this).val()?.toString() ?? ""; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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; return;
} }
quiet_button.label = $(this).val()?.toString() ?? ""; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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", (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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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 { } else {
delete borderless_button.icon; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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; return;
} }
borderless_button.icon = $(this).val()?.toString() ?? ""; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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; return;
} }
borderless_button.label = $(this).val()?.toString() ?? ""; 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") { if (current_banner.process === "custom-banner") {
custom_normal_banner.buttons = current_banner.buttons; 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));
} }
}); });
}); });

54
web/styles/portico/showroom.css
View File

@@ -17,14 +17,14 @@ body {
background-color: var(--color-background); background-color: var(--color-background);
} }
.design-testing-wrapper { .showroom-wrapper {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
gap: 20px; gap: 20px;
padding: 40px 20px; padding: 40px 20px;
} }
.design-controls-section { .showroom-controls-section {
display: grid; display: grid;
grid-template-columns: [control-name-start] max-content [control-name-end control-input-start] 1fr [control-input-end]; grid-template-columns: [control-name-start] max-content [control-name-end control-input-start] 1fr [control-input-end];
gap: 10px; gap: 10px;
@@ -32,7 +32,7 @@ body {
width: min(100%, 500px); width: min(100%, 500px);
} }
.design-testing-controls { .showroom-controls {
display: grid; display: grid;
grid-template-columns: subgrid; grid-template-columns: subgrid;
grid-column: control-name-start / control-input-end; grid-column: control-name-start / control-input-end;
@@ -44,29 +44,29 @@ body {
width: 100%; width: 100%;
} }
.design-testing-control { .showroom-control {
display: grid; display: grid;
grid-template-columns: subgrid; grid-template-columns: subgrid;
grid-column: control-name-start / control-input-end; grid-column: control-name-start / control-input-end;
gap: 10px; gap: 10px;
} }
.design-testing-control-element { .showroom-control-element {
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
} }
.control-label { .showroom-control-label {
cursor: pointer; cursor: pointer;
grid-column: control-name-start / control-name-end; grid-column: control-name-start / control-name-end;
align-self: center; align-self: center;
} }
.control-setting { .showroom-control-setting {
grid-column: control-input-start / control-input-end; grid-column: control-input-start / control-input-end;
} }
.control-setting-multiple { .showroom-control-setting-multiple {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@@ -76,60 +76,60 @@ body {
display: none !important; display: none !important;
} }
.design-testing-controls-label { .showroom-controls-label {
grid-column: control-name-start / control-input-end; grid-column: control-name-start / control-input-end;
margin-top: 10px; margin-top: 10px;
font-size: 1.4em; font-size: 1.4em;
font-weight: 600; font-weight: 600;
} }
.dev-buttons-grid { .showroom-button-grid {
display: 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); grid-template-columns: repeat(3, max-content);
gap: 15px 30px; gap: 15px 30px;
} }
.dev-buttons-variant-group { .showroom-component-button-intent-group {
display: grid; display: grid;
grid-template-columns: subgrid; grid-template-columns: subgrid;
grid-column: 1 / -1; grid-column: 1 / -1;
place-items: center start; place-items: center start;
} }
.dev-buttons-variant-label { .showroom-component-button-intent-label {
grid-area: dev-buttons-variant-name; grid-area: showroom-component-button-intent-label;
} }
.dev-action-buttons-group, .showroom-component-action-button-group,
.dev-action-buttons-label { .showroom-component-action-button-label {
grid-area: dev-action-buttons-group; grid-area: showroom-component-action-button-group;
} }
.dev-icon-buttons-group, .showroom-component-icon-button-group,
.dev-icon-buttons-label { .showroom-component-icon-button-label {
grid-area: dev-icon-buttons-group; grid-area: showroom-component-icon-button-group;
} }
.dev-action-buttons-group, .showroom-component-action-button-group,
.dev-icon-buttons-group { .showroom-component-icon-button-group {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
gap: 15px; gap: 15px;
} }
.dev-buttons-variant-label, .showroom-component-button-intent-label,
.dev-action-buttons-label, .showroom-component-action-button-label,
.dev-icon-buttons-label { .showroom-component-icon-button-label {
font-size: 1.1em; font-size: 1.1em;
font-weight: 500; font-weight: 500;
} }
#banner_select_intent { #showroom_component_banner_select_intent {
text-transform: capitalize; text-transform: capitalize;
} }
#dev_normal_banner_wrapper { #showroom_component_banner_default_wrapper {
width: min(100%, 800px); width: min(100%, 800px);
margin: 0 auto; margin: 0 auto;
} }

8
zerver/views/development/showroom.py
View File

@@ -28,8 +28,8 @@ def showroom_component_buttons(request: HttpRequest) -> HttpResponse:
context = { context = {
"background_colors": background_colors, "background_colors": background_colors,
"icons": get_svg_filenames(), "icons": get_svg_filenames(),
"page_is_design_testing": True, "page_is_showroom": True,
"design_component": "buttons", "showroom_component": "buttons",
"doc_root_title": "Button styles browser", "doc_root_title": "Button styles browser",
# We set isolated_page to avoid clutter from footer/header. # We set isolated_page to avoid clutter from footer/header.
"isolated_page": True, "isolated_page": True,
@@ -41,8 +41,8 @@ def showroom_component_banners(request: HttpRequest) -> HttpResponse:
context = { context = {
"background_colors": background_colors, "background_colors": background_colors,
"icons": get_svg_filenames(), "icons": get_svg_filenames(),
"page_is_design_testing": True, "page_is_showroom": True,
"design_component": "banners", "showroom_component": "banners",
"doc_root_title": "Banner styles browser", "doc_root_title": "Banner styles browser",
# We set isolated_page to avoid clutter from footer/header. # We set isolated_page to avoid clutter from footer/header.
"isolated_page": True, "isolated_page": True,

2
zproject/dev_urls.py
View File

@@ -98,7 +98,7 @@ urls = [
path("flush_caches", remove_caches), path("flush_caches", remove_caches),
# Redirect camo URLs for development # Redirect camo URLs for development
path("external_content/<digest>/<received_url>", handle_camo_url), 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/buttons/", showroom_component_buttons),
path("devtools/banners/", showroom_component_banners), path("devtools/banners/", showroom_component_banners),
] ]