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

showroom: Set up devtools/inputs page for showcasing input components.

Browse Source 
This is a prep commit to setup the devtools/inputs page for the
redesigned input components.
This commit is contained in:
Sayam Samal
2025-05-06 15:23:11 +05:30
committed by Tim Abbott
parent 236e595438
commit f8d82775d1
5 changed files with 73 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
templates/zerver/development/dev_tools.html
View File

@@ -89,6 +89,11 @@
<td>None needed</td>
<td>Test banner styles</td>
</tr>
<tr>
<td><a href="/devtools/inputs">/devtools/inputs</a></td>
<td>None needed</td>
<td>Test input styles</td>
</tr>
</tbody>
</table>
<h2>Useful management commands</h2>

48
templates/zerver/development/showroom/inputs.html Normal file
View File

@@ -0,0 +1,48 @@
{% extends "zerver/base.html" %}
{% set entrypoint = "showroom" %}
{% block title %}
<title>{{ doc_root_title }} | Zulip Dev</title>
{% endblock %}
{% block content %}
<div class="portico-container" data-platform="{{ platform }}">
<div class="portico-wrap">
{% include 'zerver/portico-header.html' %}
<div class="app portico-page">
<div class="app-main portico-page-container">
<div class="showroom-wrapper">
<div class="showroom-filter-input-container"></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_inputs" class="tab-option" name="showroom-dark-theme-select"/>
<label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_enable_dark_theme_inputs" tabindex="0">
<span>Enable</span>
</label>
<input type="radio" data-theme="light" id="showroom_disable_dark_theme_inputs" class="tab-option" name="showroom-dark-theme-select" checked/>
<label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_disable_dark_theme_inputs" tabindex="0">
<span>Disable</span>
</label>
<span class="slider"></span>
</div>
</div>
<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 %}
</select>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
{% endblock %}