Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS refactor #312

Merged
merged 48 commits into from
May 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
c4b052d
POC styling with modifiers & css files
pierrotsmnrd Feb 3, 2024
fd0f309
Auth page text inputs + modal's selects
pierrotsmnrd Feb 3, 2024
8fa867e
no more raw stylesheets in auth_page
pierrotsmnrd Feb 3, 2024
1a3de42
css in central view, WIP
pierrotsmnrd Feb 3, 2024
3fec363
chat info CSS
pierrotsmnrd Feb 3, 2024
1ca9b8d
source info button resists my method
pierrotsmnrd Feb 3, 2024
917f80f
main chat interface CSS
pierrotsmnrd Feb 3, 2024
200afca
cleanup and comments
pierrotsmnrd Feb 3, 2024
c4c36b5
pull main
pierrotsmnrd Feb 4, 2024
8351d4f
Fix in holoviz/panel#6304 unlocks styling buttons
pierrotsmnrd Feb 7, 2024
b5f8910
Merge remote-tracking branch 'origin/main' into css_refactor
pierrotsmnrd Feb 7, 2024
f744879
Update ragna/deploy/_ui/app.py
pierrotsmnrd Feb 7, 2024
05c8bd7
cleanup after merging suggested change on paths
pierrotsmnrd Feb 7, 2024
66f3cff
keep moving CSS out of python
pierrotsmnrd Feb 7, 2024
2d99aec
Fix CSS rule too large
pierrotsmnrd Feb 7, 2024
aad4b35
consistant naming for css class
pierrotsmnrd Feb 7, 2024
9abb291
central view cleaned of CSS
pierrotsmnrd Feb 8, 2024
4819e26
right sidebar cleaned of CSS
pierrotsmnrd Feb 8, 2024
49afe87
left sidebar cleaned of CSS
pierrotsmnrd Feb 8, 2024
0b8a249
main page cleaned of CSS (except HTML hack)
pierrotsmnrd Feb 8, 2024
3b871db
modal welcome cleaned of CSS
pierrotsmnrd Feb 8, 2024
dfcd45d
modal configuration cleaned of CSS
pierrotsmnrd Feb 8, 2024
23108a8
last CSS cleanups
pierrotsmnrd Feb 8, 2024
d0e8797
Fix in chat buttons to keep UI identical
pierrotsmnrd Feb 8, 2024
831b6d5
factorisation and CSS preload
pierrotsmnrd Feb 8, 2024
bc0f07d
cleanup
pierrotsmnrd Feb 12, 2024
df413b5
Fix type for linter/mypy
pierrotsmnrd Feb 12, 2024
fa18088
Merge branch 'main' into css_refactor
pierrotsmnrd Feb 12, 2024
5575c27
Merge branch 'main' into css_refactor
pierrotsmnrd Feb 12, 2024
0ccc688
Merge branch 'css_refactor' of https://github.com/Quansight/ragna int…
pierrotsmnrd Feb 12, 2024
1618a48
Addressing all the comments from @pmeier
pierrotsmnrd Feb 12, 2024
6e1e6d3
css function simplified
pierrotsmnrd Feb 12, 2024
f943bf5
syntaxic sugar
pierrotsmnrd Feb 12, 2024
bc57632
Fix bug when clicking again selected chat button
pierrotsmnrd Feb 12, 2024
f610efe
Fix in css function
pierrotsmnrd Feb 12, 2024
f7bd9cd
Update ragna/deploy/_ui/styles.py
pierrotsmnrd Feb 20, 2024
32c190f
Fix dividers and rework constants
pierrotsmnrd Feb 20, 2024
fd47a46
Merge branch 'main' into css_refactor
pierrotsmnrd Feb 20, 2024
6ee38e7
Merge branch 'main' into css_refactor
pmeier Apr 2, 2024
ed2f417
Merge branch 'main' into css_refactor
pmeier Apr 24, 2024
23df98b
Squashed commit of merging main
pierrotsmnrd May 3, 2024
c13b66e
CSS fixes for Panel >1.4.0
pierrotsmnrd May 13, 2024
2d8c1b5
Merge branch 'main' into css_refactor
pierrotsmnrd May 13, 2024
2ace44b
bump panel 1.4.2
pierrotsmnrd May 13, 2024
a4424b9
Merge branch 'main' into css_refactor
pierrotsmnrd May 13, 2024
03a8ab5
update docker requirements
pmeier May 13, 2024
d1dc4c6
Merge branch 'css_refactor' of github.com:Quansight/ragna into css_re…
pmeier May 13, 2024
cf64f77
config modal, css for assistant slider
pierrotsmnrd May 13, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion pyproject.toml
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ dependencies = [
"httpx",
"importlib_metadata>=4.6; python_version<'3.10'",
"packaging",
"panel==1.3.8",
"panel==1.4.2",
"pydantic>=2",
"pydantic-core",
"pydantic-settings>=2",
Expand Down
38 changes: 27 additions & 11 deletions ragna/deploy/_ui/app.py
Original file line number Diff line number Diff line change
Expand Up @@ -23,34 +23,47 @@
pn.config.browser_info = True


HERE = Path(__file__).parent
# CSS = HERE / "css"
IMGS = HERE / "imgs"
RES = HERE / "resources"


class App(param.Parameterized):
def __init__(self, *, hostname, port, api_url, origins, open_browser):
super().__init__()
ui.apply_design_modifiers()

# Apply the design modifiers to the panel components
# It returns all the CSS files of the modifiers
self.css_filepaths = ui.apply_design_modifiers()
self.hostname = hostname
self.port = port
self.api_url = api_url
self.origins = origins
self.open_browser = open_browser

def get_template(self):
# A bit hacky, but works.
# we need to preload the css files to avoid a flash of unstyled content, especially when switching between chats.
pmeier marked this conversation as resolved.
Show resolved Hide resolved
# This is achieved by adding <link ref="preload" ...> tags in the head of the document.
# But none of the panel templates allow to add custom link tags in the head.
# the only way I found is to take advantage of the raw_css parameter, which allows to add custom css in the head.
preload_css = "\n".join(
[
f"""<link rel="preload" href="{css_fp}" as="style" />"""
for css_fp in self.css_filepaths
]
)
preload_css = f"""
</style>
{preload_css}
<style type="text/css">
"""

template = pn.template.FastListTemplate(
# We need to set a title to have it appearing on the browser's tab
# but it means we need to hide it from the header bar
title="Ragna",
accent_base_color=ui.MAIN_COLOR,
theme_toggle=False,
collapsed_sidebar=True,
# main_layout=None
raw_css=[ui.APP_RAW],
raw_css=[ui.CSS_VARS, preload_css],
favicon="imgs/ragna_logo.svg",
css_files=["https://rsms.me/inter/inter.css"],
css_files=["https://rsms.me/inter/inter.css", "css/main.css"],
)

template.modal.objects = [
Expand Down Expand Up @@ -129,7 +142,10 @@ def serve(self):
autoreload=True,
profiler="pyinstrument",
allow_websocket_origin=[urlsplit(origin).netloc for origin in self.origins],
static_dirs={"imgs": str(IMGS), "resources": str(RES)}, # "css": str(CSS),
static_dirs={
dir: str(Path(__file__).parent / dir)
for dir in ["css", "imgs", "resources"]
},
)


Expand Down
96 changes: 7 additions & 89 deletions ragna/deploy/_ui/auth_page.py
Original file line number Diff line number Diff line change
@@ -1,28 +1,6 @@
import panel as pn
import param

from . import styles as ui

# TODO Move this into a CSS file
login_inputs_stylesheets = """

:host {
width:100%;
margin-left:0px;
margin-right:0px;
}

label {
font-weight: 600;
font-size: 16px;
}

input {
background-color: white !important;
}

"""


class AuthPage(pn.viewable.Viewer, param.Parameterized):
feedback_message = param.String(default=None)
Expand All @@ -37,11 +15,11 @@ def __init__(self, api_wrapper, **params):

self.login_input = pn.widgets.TextInput(
name="Email",
stylesheets=[login_inputs_stylesheets, ui.BK_INPUT_GRAY_BORDER],
css_classes=["auth_login_input"],
)
self.password_input = pn.widgets.PasswordInput(
name="Password",
stylesheets=[login_inputs_stylesheets, ui.BK_INPUT_GRAY_BORDER],
css_classes=["auth_password_input"],
)

async def perform_login(self, event=None):
Expand Down Expand Up @@ -74,23 +52,8 @@ def display_error_message(self):
return None
else:
return pn.pane.HTML(
f"""<div class="error">{self.feedback_message}</div>""",
stylesheets=[
"""
:host {
width:100%;
margin-left:0px;
margin-right:0px;
}

div.error {
width:100%;
color:red;
text-align:center;
font-weight: 600;
font-size: 16px;
} """
],
f"""<div class="auth_error">{self.feedback_message}</div>""",
css_classes=["auth_error"],
)

@pn.depends("custom_js")
Expand All @@ -107,67 +70,22 @@ def __panel__(self):
login_button = pn.widgets.Button(
name="Sign In",
button_type="primary",
stylesheets=[
""" :host {
width:100%;
margin-left:0px;
margin-right:0px;
} """
],
css_classes=["auth_login_button"],
)
login_button.on_click(self.perform_login)

self.main_layout = pn.Column(
self.wrapped_custom_js,
pn.pane.HTML(
"<h1>Log In</h1>",
stylesheets=[
""" :host {
width:100%;
margin-left:0px;
margin-right:0px;
text-align:center;
}
h1 {
font-weight: 600;
font-size: 24px;
}
"""
],
css_classes=["auth_title"],
),
self.display_error_message,
self.login_input,
self.password_input,
pn.pane.HTML("<br />"),
login_button,
stylesheets=[
""" :host {
background-color:white;
/*background-color:gold;*/
border-radius: 5px;
box-shadow: lightgray 0px 0px 10px;
padding: 0 25px 0 25px;

width:30%;
min-width:360px;
max-width:430px;

margin-left: auto;
margin-right: auto;
margin-top: 10%;

}
:host > div {
margin-bottom: 10px;
margin-top: 10px;
}

.bk-panel-models-layout-Column {
width:100%;
}

"""
],
css_classes=["auth_page_main_layout"],
)

return self.main_layout
Loading