paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +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 %}

1
zerver/tests/test_urls.py
View File

@@ -60,6 +60,7 @@ class PublicURLTest(ZulipTestCase):
urls = {
"/devtools/buttons/": "Button styles browser",
"/devtools/banners/": "Banner styles browser",
"/devtools/inputs/": "Input styles browser",
}
for url, expected_content in urls.items():

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

@@ -48,3 +48,16 @@ def showroom_component_banners(request: HttpRequest) -> HttpResponse:
"isolated_page": True,
}
return render(request, "zerver/development/showroom/banners.html", context)
def showroom_component_inputs(request: HttpRequest) -> HttpResponse:
context = {
"background_colors": background_colors,
"icons": get_svg_filenames(),
"page_is_showroom": True,
"showroom_component": "inputs",
"doc_root_title": "Input styles browser",
# We set isolated_page to avoid clutter from footer/header.
"isolated_page": True,
}
return render(request, "zerver/development/showroom/inputs.html", context)

7
zproject/dev_urls.py
View File

@@ -31,7 +31,11 @@ from zerver.views.development.registration import (
register_development_realm,
register_development_user,
)
from zerver.views.development.showroom import showroom_component_banners, showroom_component_buttons
from zerver.views.development.showroom import (
showroom_component_banners,
showroom_component_buttons,
showroom_component_inputs,
)
from zerver.views.errors import config_error
# These URLs are available only in the development environment
@@ -101,6 +105,7 @@ urls = [
# Endpoints for Showroom components.
path("devtools/buttons/", showroom_component_buttons),
path("devtools/banners/", showroom_component_banners),
path("devtools/inputs/", showroom_component_inputs),
]
v1_api_mobile_patterns = [