mirror of
https://github.com/zulip/zulip.git
synced 2025-11-04 22:13:26 +00:00
a8146916aa
This commit adds the redesigned button styles to the codebase along with with a storybook-style page in `/devtools/buttons` to view and test the redesigned button component. The redesigned button component, uses the `action-button` class to follow Zulip's no-abbreviation policy, and to avoid conflicts with the pre-existing `button` and bootstrap `btn` classes. A button using the new redesigned styles, required two classes, - First, the base `action-button` class which defines the structure and behavior of the button. - Second, a modifier class like `action-button-primary-neutral` which defines the styles for the particular action button type.
35 lines
1.2 KiB
Python
35 lines
1.2 KiB
Python
import os
|
|
|
|
from django.http import HttpRequest, HttpResponse
|
|
from django.shortcuts import render
|
|
|
|
background_colors = [
|
|
{"name": "Default background", "css_var": "--color-background"},
|
|
{"name": "Popover background", "css_var": "--color-background-popover-menu"},
|
|
{"name": "Modal background", "css_var": "--color-background-modal"},
|
|
{"name": "Compose background", "css_var": "--color-compose-box-background"},
|
|
]
|
|
|
|
|
|
def get_svg_filenames() -> list[str]:
|
|
icons_dir = os.path.join(os.path.dirname(__file__), "../../../web/shared/icons")
|
|
|
|
# Get all .svg file names from the directory
|
|
svg_files = [f for f in os.listdir(icons_dir) if f.endswith(".svg")]
|
|
|
|
# Remove the .svg extension from the file names
|
|
icon_names = [os.path.splitext(f)[0] for f in svg_files]
|
|
|
|
# Sort the list alphabetically
|
|
return sorted(icon_names)
|
|
|
|
|
|
def dev_buttons_design_testing(request: HttpRequest) -> HttpResponse:
|
|
context = {
|
|
"background_colors": background_colors,
|
|
"icons": get_svg_filenames(),
|
|
# We set isolated_page to avoid clutter from footer/header.
|
|
"isolated_page": True,
|
|
}
|
|
return render(request, "zerver/development/design_testing/buttons.html", context)
|