Simple Tweetcard using my Design System (CatDesign) #535

ofenbach · 2023-03-16T11:43:36Z

ofenbach
Mar 16, 2023

Hello,
i just made this in about 30min. Its a port of my design system which so far only exists on figma.
This is my first attempt in nicegui, i know the code is not very clean.

Please give me feedback, i dont know much about nicegui so far. I sure did some mistakes i am not aware of.

Also: how do i change the default html body background color? I use a dark night color for my design system which
I wasn't able to apply so far.
Thank you!

Here is my code and an image of the working tweet card using nice gui:

from nicegui import ui, app
from pathlib import Path

folder = Path(__file__).resolve().parent / 'images'
app.add_static_files('/images', folder)  # serve all files in this folder

color_box = '#1E1E1E'
color_border = '#323232'
color_bg = '#0A0B0C'


def get_card_style():
    return f"background-color: {color_box}; border: 1px solid {color_border};" \
           f"box-shadow: none; color: white; padding: 32px; border-radius: 8px;"


def Avatar(src, style=""):
    ui.image(src).style('border-radius: 50%; height: 32px; width: 32px;' + style)


with ui.element('div').style(get_card_style()):

    with ui.row().style('display: flex; align-items: center;'):
        Avatar('images/cat0.png')
        ui.label("Profile Name").style('color: white; font-size: 16px; font-weight: regular;')

    with ui.row().style('margin-top: 24px;'):
        ui.label("Just a twitter tweet").style('color: #D9D9D9; font-size: 16px; font-weight: 300;')

    with ui.row().style(
            'display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 24px;'):
        ui.label("23.03.2023").style('color: #A6A6A6; font-size: 12px; font-weight: 300')
        with ui.element('div'):
            ui.icon('share').style('margin-right: 16px; font-size: 14px;')
            ui.icon('thumb_up').style('font-size: 14px;')

    with ui.row().style('width: 100%; margin-top: 24px;'):
        ui.element('div').style(f'height: 1px; width: 100%; background-color: {color_border}')

    with ui.row().style('width: 100%; margin-top: 24px; display: flex; justify-content: space-between; align-items: center;'):
        with ui.element('div'):
            Avatar('images/cat1.png', style='z-index: 3;')
            Avatar('images/cat2.png', style='margin-left: -16px; z-index: 2;')
            Avatar('images/cat3.png', style='margin-left: -16px; z-index: 1;')
            Avatar('images/cat4.png', style='margin-left: -16px; z-index: 0;')
        with ui.element('div'):
            ui.label("Retweets").style('font-size: 12px; font-weight: 300')

    with ui.row().style('display: flex; align-items: center; margin-top: 24px;'):
        Avatar('images/cat5.png')
        ui.label("Retweeter").style('font-size: 16px; font-weight: regular;')

    with ui.row().style('margin-top: 16px;'):
        ui.label("Just a retweet tweet").style('color: #D9D9D9; font-size: 12px; font-weight: 300')

    with ui.row().style('width: 100%; margin-top: 24px;'):
        with ui.element("div").style(f'padding: 6px; border: 1px solid {color_border}; box-shadow: none; background-color: {color_box};'
                                     f' width: 100%; border-radius: 50px; display: flex; justify-content: center; align-items: center;'):
            ui.label("Show all").style('margin-right: 8px; font-size: 12px;')
            ui.icon('expand_more').style('color: white;')

ui.run()

ofenbach · 2023-03-16T12:20:07Z

ofenbach
Mar 16, 2023
Author

Also:
How do i include a font family like Poppins?

1 reply

rodja Mar 16, 2023
Maintainer

You can simply add arbitrary html to the header with ui.add_head_html(...). This allows you to link to external css or directly embed it like we do on the https://nicegui.io page:

nicegui/main.py

Line 53 in 6b1ed9b

    
           ui.add_head_html(f"<style>{(Path(__file__).parent / 'website' / 'static' / 'style.css').read_text()}</style>")

rodja · 2023-03-16T14:01:03Z

rodja
Mar 16, 2023
Maintainer

Thanks for sharing this, @ofenbach! We appreciate your efforts to enrich the NiceGUI ecosystem with your design system. I can see that you quickly got the hang of the library :-)
As per your request I'll comment on some things which came to my attention while reading your example:

we have a ready made element ui.avatar which could be used instead of the Avatar function: https://nicegui.io/reference#avatar
if you use functions like Avatar I suggest you use lower-case as it is common in Python
instead of a get_card_style-function you could also simply assign the styles to a variable card_style (except your are planning to make the colors changeable at runtime)
NiceGUI is based on Quasar and also allows Tailwind css. It's totally ok to use css styling directly but we found it quite useful to use the high-level constructs: https://nicegui.io/reference#styling, this would for example simplify with ui.row().style('width: 100%; margin-top: 24px;'): to with ui.row().classes('w-full mt-6'):
configuring the background color is not so nice as it should be; you an find a workaround on How to set the background color of a page? #407 and our plan for improvement on Allow easy configuration for page background #411

In general your styling looks really great. If you release it as a standalone library you could offer your own functions. In the style of this example which assumes your library is called CatDesign:

import cat_design as cat

# low level
with cat.row():
   cat.label('Profile Name')
   cat.avatar('images/cat0.png')

# high level (same outcome as "low level" above)
ui.profile('Profile Name', 'images/cat0.png')

4 replies

ofenbach Mar 16, 2023
Author

Hello @rodja !
Thanks for your feedback, I'll look into it and get back to you with a second proposal just to make sure if thats okay :)

rodja Mar 16, 2023
Maintainer

Happy to help. It's really a pleasure seeing efforts like yours!

ofenbach Mar 16, 2023
Author

Ok i rewrote the entire thing into this class

color_box = '#1E1E1E'
color_border = '#323232'


def Avatar(ui, src, style=""):
    ui.image(src).style('border-radius: 50%; height: 32px; width: 32px;' + style)


class TweetCard():

    def create(ui, profile_src, profile_name, tweet="Tweet!", retweet="Retweet!"):
        ui.colors(primary=color_box)
        ui.colors(secondary=color_border)

        with ui.element('div').style(f'background-color: {color_box}; border: 1px solid {color_border}; box-shadow: '
                                     'none; color: white; padding: 32px; border-radius: 8px;'):
            # profile avatar
            with ui.row().classes('flex items-center'):
                ui.image(profile_src).classes('rounded-full h-8 w-8')
                ui.label(profile_name).classes('text-white text-base font-light')

            # tweet
            with ui.row().classes('mt-4'):
                ui.label(tweet).classes('text-base font-light').style('color: #D9D9D9;')

            # date, share, like
            with ui.row().classes('flex justify-between items-center w-full mt-4'):
                ui.label("23.03.2023").classes('text-xs font-light').style('color: #A6A6A6;')
                with ui.element('div'):
                    ui.icon('share').classes('mr-4 text-sm')
                    ui.icon('thumb_up').classes('text-sm')

            # divider
            with ui.row().classes('w-full mt-8 mb-8'):
                ui.element('div').classes('w-full h-px').style(f'background-color: {color_border}')

            # retweet profiles
            with ui.row().classes('flex justify-between items-center w-full'):
                with ui.element('div'):
                    Avatar(ui=ui, src='images/cat1.png', style='z-index: 3;')
                    Avatar(ui=ui, src='images/cat2.png', style='margin-left: -16px; z-index: 2;')
                    Avatar(ui=ui, src='images/cat3.png', style='margin-left: -16px; z-index: 1;')
                    Avatar(ui=ui, src='images/cat4.png', style='margin-left: -16px; z-index: 0;')

                with ui.element('div'):
                    ui.label("Retweets").classes('text-xs font-light')

            # retweet
            with ui.row().classes('flex items-center mt-6'):
                Avatar(ui=ui, src='images/cat5.png')
                ui.label("Retweeter").classes('text-sm font-light text-white')

            with ui.row().classes('mt-4'):
                ui.label(retweet).classes('text-xs font-light').style('color: #D9D9D9')

            with ui.row().classes('w-full mt-8'):
                with ui.element("div").classes('flex w-full justify-center items-center rounded-full p-2').style(
                        f'border: 1px solid {color_border}; box-shadow: none; background-color: {color_box};'):

                    ui.label("Show all").classes('mr-4 text-xs text-white')
                    ui.icon('expand_more').classes('text-white')

                ui.button().props('outline rounded class="full-width" color="secondary" ripple="{ center: true }" '
                                  'icon="expand_more" label="Show all" ')

See the button at the very bottom? Used a Quasar button now and tried to style via props. Issue: label color is the same as border color (in my design the border color and label color is different, see hard coded version above the Quasar Button)
Icon to the right of label possible?
The entire thing now uses tailwind, makes it way more clearer than css. Thanks for the tip!
(Except for the avatar, got some ideas to implement there)
Imported the poppins font and changed the entire body background color, thanks.

from nicegui import ui
from tweet_card import TweetCard

ui.add_head_html('<style>body {background-color: #0A0B0C; }</style>')
ui.add_head_html("<style>" +
                 "@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');" +
                 "body { font-family: 'Poppins', sans-serif;}</style>")

TweetCard.create(ui=ui, profile_src='images/cat0.png', profile_name="Cat")

ui.run()

ofenbach Mar 16, 2023
Author

rodja · 2023-03-17T05:31:44Z

rodja
Mar 17, 2023
Maintainer

It seems that nesting is the preferred way to have different colors for border and text in Quasar. This also allows you to place the icon to the right:

with ui.button().props('outline rounded class="full-width" color="secondary" ripple="{ center: true }"'):
    ui.label('show all').classes('text-white')
    ui.icon('expand_more').classes('text-white')

1 reply

ofenbach Mar 17, 2023
Author

Ah makes sense, its the same as placing the label and icon inside a < button > element. Thanks

ofenbach · 2023-03-17T09:09:27Z

ofenbach
Mar 17, 2023
Author

Card, Status, Notification done

0 replies

ofenbach · 2023-03-18T15:55:43Z

ofenbach
Mar 18, 2023
Author

The first version is online in this repository:
https://github.com/ofenbach/CatDesign

It's very basic so far but a good starting point.

This is how the code looks like if its used with nicegui:

0 replies

rodja · 2023-03-18T18:24:16Z

rodja
Mar 18, 2023
Maintainer

Nice nice nice. Just one additional information I forgot until now: you do not need to pass the ui element to the functions. ui is a module which you can just use from everywhere. Just import it in setup, tweed_card etc.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simple Tweetcard using my Design System (CatDesign) #535

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 6 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Simple Tweetcard using my Design System (CatDesign) #535

ofenbach Mar 16, 2023

Replies: 6 comments · 6 replies

ofenbach Mar 16, 2023 Author

rodja Mar 16, 2023 Maintainer

rodja Mar 16, 2023 Maintainer

ofenbach Mar 16, 2023 Author

rodja Mar 16, 2023 Maintainer

ofenbach Mar 16, 2023 Author

ofenbach Mar 16, 2023 Author

rodja Mar 17, 2023 Maintainer

ofenbach Mar 17, 2023 Author

ofenbach Mar 17, 2023 Author

ofenbach Mar 18, 2023 Author

rodja Mar 18, 2023 Maintainer

ofenbach
Mar 16, 2023

Replies: 6 comments 6 replies

ofenbach
Mar 16, 2023
Author

rodja Mar 16, 2023
Maintainer

rodja
Mar 16, 2023
Maintainer

ofenbach Mar 16, 2023
Author

rodja Mar 16, 2023
Maintainer

ofenbach Mar 16, 2023
Author

ofenbach Mar 16, 2023
Author

rodja
Mar 17, 2023
Maintainer

ofenbach Mar 17, 2023
Author

ofenbach
Mar 17, 2023
Author

ofenbach
Mar 18, 2023
Author

rodja
Mar 18, 2023
Maintainer