From e2369a6c64f5ee3ab21df7fb3ece08a45d0dc392 Mon Sep 17 00:00:00 2001 From: xieyimian Date: Fri, 1 Sep 2023 14:43:18 +0800 Subject: [PATCH] refactor(dashboard): apply community improve (#128) * refactor(apply-community): ui improve * refactor(apply-community): wip * refactor(apply-community): wip * refactor(apply-community): wip * refactor(apply-community): wip * refactor(apply-community): add tada animation * refactor(apply-community): ui adjust * refactor(apply-community): ui adjust * refactor(apply-community): add extra info step * refactor(apply-community): ui adjust * refactor(apply-community): ui adjust * refactor(apply-community): ui adjust * refactor(dashboard): communities ui adjust * refactor(dashboard): communities ui adjust * refactor(dashboard): wip * refactor(dashboard): moderator editor wip * refactor(dashboard): select workflow wip * refactor(global): @/utils/css -> @/css * chore: update generator * feat(dashboard): view passport of user workflow * feat(dashboard): view passport of user workflow wip * feat(dashboard): view passport of user workflow wip * refactor(apply-community): improve ux * refactor(apply-community): improve ux * refactor(apply-community): improve ux * refactor(apply-community): add city/source selector * refactor(apply-community): ui adjust * refactor: add link arrow * refactor: add link arrow * refactor: add arrow button * refactor: header dashbaord style * refactor: header dashbaord style fix * refactor(globallayout): adjust page/content margin system * refactor(globallayout): adjust page/content margin system * refactor(globallayout): adjust dashboard content width * refactor(globallayout): adjust dashboard content width * refactor(globallayout): click elements with hoverBg effect * chore: fix edge ase * chore(dashboard): align offset * chore(dashboard): wip * refactor(dashboard): fix nameAlias merge logic * refactor(article): new upvote template * refactor(global): flex short names * chore: clean up --- .eslintrc.js | 1 + jsconfig.json | 2 + package-lock.json | 291 +++++++++++++++++- package.json | 4 +- .../styles/desktop_view/changelog_layout.ts | 4 +- .../styles/desktop_view/index.tsx | 4 +- .../styles/desktop_view/side_info.tsx | 6 +- .../ArticleContent/styles/mobile_view.ts | 6 +- .../content/CommunityContent/AboutContent.tsx | 13 +- .../CommunityContent/ChangeLogContent.tsx | 13 +- .../CommunityContent/DashboardContent.tsx | 18 +- .../content/CommunityContent/DocContent.tsx | 13 +- .../CommunityContent/KanbanContent.tsx | 13 +- .../content/CommunityContent/PostContent.tsx | 13 +- .../CommunityContent/ThreadContent.tsx | 13 - .../styles/dashboard_content.ts | 11 + .../content/CommunityContent/styles/index.ts | 24 +- .../styles/subscribed_list/expand_button.ts | 4 +- .../styles/subscribed_list/index.ts | 11 +- .../styles/subscribed_list/item_menu.ts | 4 +- .../CommunityContent/styles/wip_thread.ts | 4 +- .../content/LandingPage/TechStacks/index.tsx | 2 +- .../LandingPage/WallpaperBar/index.tsx | 2 +- .../desktop_view/dashboard_device.ts | 6 +- .../desktop_view/desktop_device.ts | 12 +- .../styles/cover_image/desktop_view/index.ts | 6 +- .../cover_image/desktop_view/mobile_device.ts | 8 +- .../styles/cover_image/mobile_view.ts | 12 +- .../styles/enjoy_dev/bg_shapes/index.ts | 2 +- .../LandingPage/styles/enjoy_dev/block.ts | 4 +- .../LandingPage/styles/enjoy_dev/index.ts | 16 +- .../styles/enjoy_dev/node_block.ts | 12 +- .../styles/enjoy_dev/upvote_btn.ts | 4 +- .../styles/feature_wall/bg_dots.ts | 2 +- .../LandingPage/styles/feature_wall/card.ts | 4 +- .../changelog_feat/changelog_demo.ts | 14 +- .../feature_wall/changelog_feat/index.ts | 8 +- .../changelog_feat/intro_digest.ts | 4 +- .../changelog_feat/intro_image.ts | 6 +- .../feature_wall/curly_line_desc/c2h.ts | 6 +- .../feature_wall/curly_line_desc/d2k.ts | 6 +- .../feature_wall/curly_line_desc/k2c.ts | 6 +- .../feature_wall/curly_line_desc/u2d.ts | 6 +- .../discuss_feat/discuss_demo/comment_item.ts | 8 +- .../discuss_feat/discuss_demo/index.ts | 10 +- .../discuss_feat/discuss_demo/post_item.ts | 10 +- .../styles/feature_wall/discuss_feat/index.ts | 8 +- .../feature_wall/discuss_feat/intro_digest.ts | 4 +- .../feature_wall/discuss_feat/intro_image.ts | 6 +- .../styles/feature_wall/feat_head.ts | 6 +- .../styles/feature_wall/feat_item.ts | 4 +- .../feature_wall/help_feat/help_demo.ts | 18 +- .../styles/feature_wall/help_feat/index.ts | 8 +- .../feature_wall/help_feat/intro_digest.ts | 4 +- .../feature_wall/help_feat/intro_image.ts | 6 +- .../LandingPage/styles/feature_wall/index.ts | 14 +- .../styles/feature_wall/kanban_feat/banner.ts | 8 +- .../styles/feature_wall/kanban_feat/index.ts | 10 +- .../feature_wall/kanban_feat/intro_digest.ts | 4 +- .../feature_wall/kanban_feat/intro_image.ts | 10 +- .../kanban_feat/kanban_demo/index.ts | 6 +- .../kanban_feat/kanban_demo/kanban_item.ts | 6 +- .../styles/feature_wall/more_link.ts | 6 +- .../styles/feature_wall/user_voice.ts | 10 +- .../content/LandingPage/styles/index.ts | 14 +- .../LandingPage/styles/tech_stacks/index.ts | 14 +- .../styles/tech_stacks/tech_item.ts | 6 +- .../LandingPage/styles/users_wall/card.ts | 4 +- .../LandingPage/styles/users_wall/index.ts | 8 +- .../LandingPage/styles/wallpaper_bar/index.ts | 10 +- .../styles/wallpaper_bar/layout_ball.ts | 4 +- .../content/UserContent/styles/index.ts | 9 +- .../UserContent/styles/mobile_banner.ts | 4 +- .../styles/sidebar/community_editor_info.ts | 4 +- .../UserContent/styles/sidebar/index.ts | 4 +- .../styles/desktop_view/back_to.ts | 4 +- .../styles/desktop_view/changelog_layout.ts | 14 +- .../styles/desktop_view/fixed_header.ts | 8 +- .../styles/desktop_view/header.ts | 12 +- .../styles/desktop_view/index.ts | 6 +- .../styles/desktop_view/post_layout.ts | 14 +- .../styles/mobile_view/back_to.ts | 4 +- .../styles/mobile_view/fixed_header.ts | 8 +- .../styles/mobile_view/header.ts | 12 +- .../ArticleDigest/styles/mobile_view/index.ts | 6 +- .../styles/mobile_view/post_layout.ts | 8 +- .../SimpleLayout/AccountUnit.tsx | 19 +- .../SimpleLayout/ThreadTab.tsx | 44 ++- .../CommunityDigest/SimpleLayout/index.tsx | 13 +- .../styles/classic_layout/account_unit.ts | 6 +- .../styles/classic_layout/community_brief.ts | 14 +- .../styles/classic_layout/index.ts | 12 +- .../digest/CommunityDigest/styles/index.ts | 6 +- .../styles/sidebar_layout/account_unit.ts | 6 +- .../styles/sidebar_layout/community_brief.ts | 12 +- .../styles/sidebar_layout/index.ts | 4 +- .../styles/sidebar_layout/main_menu.ts | 8 +- .../styles/simple_layout/account_unit.ts | 61 +++- .../styles/simple_layout/community_brief.ts | 10 +- .../styles/simple_layout/index.ts | 19 +- .../styles/simple_layout/thread_tab.ts | 11 +- .../editor/AccountEditor/styles/index.ts | 12 +- .../AccountEditor/styles/sex_inputer.ts | 10 +- .../AccountEditor/styles/social_inputer.ts | 4 +- .../ArticleEditor/styles/addon/index.ts | 5 +- .../ArticleEditor/styles/addon/job_addon.ts | 4 +- .../ArticleEditor/styles/addon/post_addon.ts | 6 +- .../ArticleEditor/styles/addon/radar_addon.ts | 6 +- .../ArticleEditor/styles/article_cover.ts | 4 +- .../styles/editor/header/adder.ts | 4 +- .../styles/editor/header/deleter.ts | 4 +- .../styles/editor/header/index.ts | 4 +- .../ArticleEditor/styles/editor/index.ts | 4 +- .../editor/ArticleEditor/styles/footer.ts | 4 +- .../editor/ArticleEditor/styles/index.ts | 10 +- .../ArticleEditor/styles/publish_rules.ts | 4 +- .../ArticleEditor/styles/title_input.ts | 4 +- .../CommunityEditor/Banner/BlockSelector.tsx | 35 +++ .../CommunityEditor/Banner/Finished.tsx | 25 +- .../CommunityEditor/Banner/NextStepButton.tsx | 31 ++ .../CommunityEditor/Banner/ScaleSelector.tsx | 57 ++++ .../Banner/SelectType/TypeBoxes.tsx | 44 +-- .../Banner/SelectType/WarnBox.tsx | 19 ++ .../Banner/SelectType/index.tsx | 87 +++--- .../CommunityEditor/Banner/SetupDomain.tsx | 40 +-- .../CommunityEditor/Banner/SetupExtra.tsx | 97 ++++++ .../CommunityEditor/Banner/SetupInfo.tsx | 21 +- .../editor/CommunityEditor/Banner/index.tsx | 20 +- .../Content/FakeBrowser/Content.tsx | 68 ++-- .../Content/FakeBrowser/MaskPanel.tsx | 101 ++++++ .../Content/FakeBrowser/index.tsx | 25 +- .../CommunityEditor/Content/MoreInfo.tsx | 35 --- .../CommunityEditor/Content/SelectType.tsx | 8 +- .../CommunityEditor/Content/SetupInfo.tsx | 4 +- .../Content/communityIntros.tsx | 34 +- .../editor/CommunityEditor/Content/index.tsx | 25 +- .../CommunityEditor/Header/StatusBall.tsx | 36 +++ .../editor/CommunityEditor/Header/StepMap.tsx | 101 ++++++ .../editor/CommunityEditor/Header/index.tsx | 41 +++ .../editor/CommunityEditor/constant.ts | 111 +++++-- .../editor/CommunityEditor/index.tsx | 13 +- .../editor/CommunityEditor/logic.ts | 74 ++++- .../editor/CommunityEditor/spec.d.ts | 13 +- .../editor/CommunityEditor/store.ts | 40 ++- .../styles/banner/block_selector.ts | 31 ++ .../CommunityEditor/styles/banner/finished.ts | 27 +- .../CommunityEditor/styles/banner/index.ts | 4 +- .../styles/banner/input_box.ts | 19 +- .../styles/banner/next_step_button.ts | 23 ++ .../styles/banner/scale_selector.ts | 86 ++++++ .../styles/banner/select_type/index.ts | 42 ++- .../styles/banner/select_type/type_boxes.ts | 34 +- .../styles/banner/select_type/warn_box.ts | 21 ++ .../styles/banner/setup_domain.ts | 25 +- .../styles/banner/setup_extra.ts | 88 ++++++ .../styles/banner/setup_info.ts | 56 ++-- .../styles/content/demo_community.ts | 6 +- .../styles/content/fake_browser/content.ts | 76 +++-- .../styles/content/fake_browser/favicon.ts | 8 +- .../styles/content/fake_browser/index.ts | 67 ++-- .../styles/content/fake_browser/mask_panel.ts | 70 +++++ .../CommunityEditor/styles/content/index.ts | 5 +- .../styles/content/more_info.ts | 37 --- .../styles/content/select_type.ts | 28 +- .../styles/content/setup_domain.ts | 5 +- .../CommunityEditor/styles/header/index.ts | 59 ++++ .../styles/header/status_ball.ts | 32 ++ .../CommunityEditor/styles/header/step_map.ts | 32 ++ .../editor/CommunityEditor/styles/hinter.ts | 4 +- .../editor/CommunityEditor/styles/index.ts | 8 +- .../editor/CoverEditor/styles/cover/index.ts | 6 +- .../CoverEditor/styles/cover/placeholder.ts | 4 +- .../editor/CoverEditor/styles/index.ts | 4 +- .../editor/CoverEditor/styles/metric.ts | 2 +- .../styles/toolbox/action_block.ts | 8 +- .../styles/toolbox/background_block.ts | 14 +- .../styles/toolbox/border_block.ts | 16 +- .../CoverEditor/styles/toolbox/index.ts | 6 +- .../CoverEditor/styles/toolbox/light_block.ts | 6 +- .../styles/toolbox/position_block.ts | 6 +- .../CoverEditor/styles/toolbox/ratio_block.ts | 6 +- .../styles/toolbox/rotate_block.ts | 6 +- .../styles/toolbox/shadow_block.ts | 8 +- .../CoverEditor/styles/toolbox/size_block.ts | 8 +- .../editor/PassportEditor/Selects.tsx | 60 ++++ .../editor/PassportEditor/index.tsx | 83 +++++ src/containers/editor/PassportEditor/logic.ts | 136 ++++++++ .../editor/PassportEditor/schema.ts | 34 ++ src/containers/editor/PassportEditor/store.ts | 83 +++++ .../editor/PassportEditor/styles/index.ts | 36 +++ .../editor/PassportEditor/styles/selects.ts | 35 +++ .../editor/PassportEditor/tests/index.test.js | 10 + .../editor/PassportEditor/tests/store.test.js | 10 + .../editor/RichEditor/styles/index.ts | 4 +- .../editor/RichEditor/styles/options.ts | 4 +- .../editor/RichEditor/styles/overwrite.ts | 2 +- .../editor/TagSettingEditor/styles/footer.ts | 6 +- .../editor/TagSettingEditor/styles/index.ts | 6 +- .../TagSettingEditor/styles/post_layout.ts | 8 +- .../styles/build_in/angle_panel.ts | 6 +- .../styles/build_in/custom_gradient_editor.ts | 6 +- .../styles/build_in/gradient_group.ts | 10 +- .../WallpaperEditor/styles/build_in/index.ts | 6 +- .../styles/build_in/pictrue_group.ts | 6 +- .../WallpaperEditor/styles/custom/index.ts | 4 +- .../styles/custom/upload_box.ts | 6 +- .../editor/WallpaperEditor/styles/footer.ts | 4 +- .../editor/WallpaperEditor/styles/index.ts | 2 +- src/containers/layout/GlobalLayout/index.tsx | 69 +++-- .../GlobalLayout/styles/dashboard_alert.ts | 8 +- .../layout/GlobalLayout/styles/index.ts | 8 +- .../layout/GlobalLayout/styles/wallpaper.ts | 2 +- .../layout/ThemePalette/CodeSyxHighlight.ts | 2 +- .../layout/ThemePalette/GlobalStyle.ts | 6 +- .../layout/ThemePalette/MarkDownStyle.ts | 15 +- .../ThemePalette/ThirdPartyOverWrite.ts | 2 +- .../AboutThread/styles/basic_states/index.ts | 8 +- .../thread/AboutThread/styles/groupher_log.ts | 6 +- .../thread/AboutThread/styles/index.ts | 8 +- .../styles/members/admin_member.ts | 4 +- .../AboutThread/styles/members/index.ts | 10 +- .../thread/AboutThread/styles/sidebar.ts | 4 +- .../thread/ArticlesThread/styles/index.ts | 8 +- .../styles/classic_layout/index.ts | 4 +- .../styles/classic_layout/sidebar.ts | 6 +- .../styles/simple_layout/filter_bar/index.ts | 4 +- .../styles/simple_layout/index.ts | 6 +- .../thread/DashboardThread/Admin/Adder.tsx | 8 +- .../thread/DashboardThread/Admin/List.tsx | 62 +++- .../thread/DashboardThread/Admin/index.tsx | 10 +- .../thread/DashboardThread/Alias/Item.tsx | 2 +- .../thread/DashboardThread/Alias/index.tsx | 18 +- .../DashboardThread/BasicInfo/BaseInfo.tsx | 28 +- .../DashboardThread/BasicInfo/index.tsx | 1 - .../DashboardThread/Broadcast/index.tsx | 1 - .../thread/DashboardThread/CMS/Cell/index.tsx | 77 ++++- .../DashboardThread/CMS/Communities/index.tsx | 163 ++++++++++ .../thread/DashboardThread/CMS/index.tsx | 12 + .../Header/Templates/Center.tsx | 1 - .../DashboardThread/Layout/BannerLayout.tsx | 13 +- .../DashboardThread/Layout/BrandLayout.tsx | 3 +- .../Layout/ChangelogLayout.tsx | 3 +- .../Layout/DocLayout/index.tsx | 8 +- .../DashboardThread/Layout/GlowEffect.tsx | 12 +- .../Layout/KanbanLayout/BoardLayout.tsx | 3 +- .../Layout/KanbanLayout/ItemLayout.tsx | 3 +- .../DashboardThread/Layout/PostLayout.tsx | 3 +- .../DashboardThread/Layout/PrimaryColor.tsx | 14 +- .../DashboardThread/Layout/TopbarLayout.tsx | 3 +- .../DashboardThread/Layout/Wallpaper.tsx | 7 +- .../thread/DashboardThread/Layout/index.tsx | 1 - .../thread/DashboardThread/SEO/index.tsx | 1 - .../thread/DashboardThread/Widgets/index.tsx | 1 - .../thread/DashboardThread/constant.tsx | 55 ++-- .../thread/DashboardThread/index.tsx | 8 +- .../thread/DashboardThread/logic/index.ts | 31 +- .../thread/DashboardThread/schema.ts | 18 ++ .../thread/DashboardThread/spec.d.ts | 9 + .../thread/DashboardThread/store/Models.ts | 6 +- .../thread/DashboardThread/store/index.ts | 38 ++- .../DashboardThread/styles/admin/adder.ts | 13 +- .../DashboardThread/styles/admin/index.ts | 8 +- .../DashboardThread/styles/admin/list.ts | 49 ++- .../DashboardThread/styles/alias/index.ts | 9 +- .../DashboardThread/styles/alias/item.ts | 11 +- .../styles/alias/suggestion.ts | 6 +- .../styles/basic_info/base_info.ts | 4 +- .../styles/basic_info/index.ts | 9 +- .../styles/basic_info/other_info.ts | 2 +- .../styles/basic_info/social_info.ts | 2 +- .../styles/broadcast/editor/article.ts | 6 +- .../styles/broadcast/editor/global.ts | 6 +- .../DashboardThread/styles/broadcast/index.ts | 6 +- .../broadcast/templates/article/default.ts | 4 +- .../broadcast/templates/article/index.ts | 6 +- .../broadcast/templates/global/default.ts | 12 +- .../broadcast/templates/global/index.ts | 6 +- .../DashboardThread/styles/cms/cell/index.ts | 57 +++- .../styles/cms/communities/index.ts | 1 + .../styles/cms/docs/faq/adder.ts | 4 +- .../styles/cms/docs/faq/block.ts | 6 +- .../styles/cms/docs/faq/editor.ts | 4 +- .../styles/cms/docs/faq/index.ts | 6 +- .../DashboardThread/styles/cms/docs/index.ts | 2 +- .../styles/cms/docs/tree/actions.ts | 8 +- .../styles/cms/docs/tree/index.ts | 12 +- .../styles/cms/docs/tree/note.ts | 4 +- .../styles/cms/filter_bar/action_bar.ts | 8 +- .../styles/cms/filter_bar/index.ts | 4 +- .../DashboardThread/styles/cms/global.ts | 2 +- .../DashboardThread/styles/cms/index.ts | 4 +- .../DashboardThread/styles/doc/Header.tsx | 4 +- .../styles/doc/block_layout/adder_block.ts | 4 +- .../styles/doc/block_layout/block.ts | 6 +- .../styles/doc/block_layout/block_menu.ts | 6 +- .../styles/doc/block_layout/file_item.ts | 4 +- .../styles/doc/block_layout/file_menu.ts | 6 +- .../styles/doc/block_layout/index.ts | 6 +- .../DashboardThread/styles/doc/index.tsx | 4 +- .../DashboardThread/styles/domain/index.ts | 4 +- .../styles/footer/editors/group/group_head.ts | 4 +- .../styles/footer/editors/group/index.ts | 10 +- .../styles/footer/editors/group_inputer.ts | 4 +- .../styles/footer/editors/link_editor.ts | 16 +- .../styles/footer/editors/link_menu.ts | 6 +- .../styles/footer/editors/simple/index.ts | 6 +- .../DashboardThread/styles/footer/index.ts | 4 +- .../styles/footer/templates/group.ts | 12 +- .../styles/footer/templates/index.ts | 6 +- .../styles/footer/templates/simple.ts | 10 +- .../styles/header/editors/fixed_links.ts | 8 +- .../styles/header/editors/group_head.ts | 6 +- .../styles/header/editors/index.ts | 14 +- .../DashboardThread/styles/header/index.ts | 4 +- .../styles/header/templates/center.ts | 12 +- .../styles/header/templates/float.ts | 4 +- .../styles/header/templates/index.ts | 6 +- .../styles/header/templates/right.ts | 8 +- .../thread/DashboardThread/styles/index.ts | 14 +- .../styles/layout/avatar_layout.ts | 10 +- .../styles/layout/banner_layout.ts | 8 +- .../styles/layout/brand_layout.ts | 8 +- .../styles/layout/changelog_layout.ts | 10 +- .../styles/layout/doc_layout/faq_template.ts | 6 +- .../styles/layout/doc_layout/index.ts | 10 +- .../styles/layout/doc_layout/main_template.ts | 12 +- .../styles/layout/glow_effect.ts | 8 +- .../DashboardThread/styles/layout/index.ts | 6 +- .../layout/kanban_layout/board_layout.ts | 14 +- .../layout/kanban_layout/item_layout.ts | 8 +- .../layout/kanban_layout/kanben_item.ts | 6 +- .../styles/layout/post_layout.ts | 10 +- .../styles/layout/post_list_layout.ts | 8 +- .../styles/layout/primary_color.ts | 4 +- .../styles/layout/topbar_layout.ts | 14 +- .../styles/layout/wallpaper.ts | 14 +- .../DashboardThread/styles/overview/index.ts | 11 +- .../thread/DashboardThread/styles/portal.ts | 4 +- .../DashboardThread/styles/rss/index.ts | 8 +- .../DashboardThread/styles/saving_bar.ts | 8 +- .../DashboardThread/styles/section_label.ts | 8 +- .../DashboardThread/styles/seo/index.ts | 4 +- .../DashboardThread/styles/seo/open_graph.ts | 4 +- .../styles/seo/search_engine_preview.ts | 4 +- .../styles/seo/twitter_graph.ts | 4 +- .../twitter_preview/summary_large_layout.ts | 6 +- .../seo/twitter_preview/summary_layout.ts | 6 +- .../DashboardThread/styles/side_menu/group.ts | 8 +- .../DashboardThread/styles/side_menu/index.ts | 13 +- .../styles/tags/action_menu.ts | 6 +- .../styles/tags/group_selector.ts | 6 +- .../DashboardThread/styles/tags/index.ts | 6 +- .../DashboardThread/styles/tags/tag_action.ts | 4 +- .../DashboardThread/styles/tags/tag_bar.ts | 6 +- .../styles/tags/thread_selector.ts | 6 +- .../styles/third_part/index.ts | 4 +- .../styles/threads/doc_thread.ts | 6 +- .../DashboardThread/styles/threads/index.ts | 6 +- .../styles/widgets/base_setting.ts | 10 +- .../styles/widgets/code_area.ts | 4 +- .../DashboardThread/styles/widgets/index.ts | 10 +- .../DocThread/BlocksLayout/Category.tsx | 4 +- .../thread/DocThread/CardsLayout/Category.tsx | 4 +- .../thread/DocThread/ListsLayout/Category.tsx | 4 +- .../styles/article_layout/article_cover.ts | 2 +- .../styles/article_layout/head_action.ts | 4 +- .../DocThread/styles/article_layout/index.ts | 11 +- .../styles/article_layout/navi_head.ts | 4 +- .../styles/article_layout/pined_tree.ts | 8 +- .../styles/article_layout/toggle_btn.ts | 4 +- .../styles/blocks_layout/category.ts | 10 +- .../DocThread/styles/blocks_layout/index.ts | 6 +- .../DocThread/styles/cards_layout/category.ts | 12 +- .../DocThread/styles/cards_layout/index.ts | 6 +- .../thread/DocThread/styles/faq_layout.ts | 4 +- .../thread/DocThread/styles/index.ts | 4 +- .../DocThread/styles/lists_layout/category.ts | 12 +- .../DocThread/styles/lists_layout/index.ts | 6 +- .../thread/DocThread/styles/sidebar.ts | 8 +- .../thread/KanbanThread/styles/actions.ts | 10 +- .../thread/KanbanThread/styles/columns.ts | 6 +- .../thread/KanbanThread/styles/index.ts | 8 +- .../ThreadSidebar/styles/classic_layout.ts | 8 +- .../tool/AbuseReport/styles/footer.ts | 2 +- .../tool/AbuseReport/styles/header.ts | 7 +- .../tool/AbuseReport/styles/index.ts | 4 +- .../styles/report_content/detail.tsx | 6 +- .../AbuseReport/styles/report_content/main.ts | 10 +- .../ArticleSticker/styles/comment_sticker.ts | 9 +- .../styles/community_sticker.ts | 6 +- .../tool/ArticleSticker/styles/index.ts | 12 +- .../styles/left_sticker/index.ts | 8 +- .../styles/right_sticker/toc.ts | 6 +- .../styles/right_sticker/works_sticker.ts | 2 +- src/containers/tool/AuthWall/styles/index.ts | 8 +- .../tool/AvatarAdder/styles/adder_panel.ts | 14 +- .../tool/AvatarAdder/styles/index.ts | 4 +- .../styles/gerneral_settings.ts | 4 +- .../tool/C11NSettingPanel/styles/index.ts | 8 +- src/containers/tool/Cashier/styles/content.ts | 4 +- src/containers/tool/Cashier/styles/index.ts | 2 +- .../tool/Cashier/styles/payment_confirm.ts | 6 +- .../tool/Cashier/styles/payment_content.ts | 4 +- .../tool/Cashier/styles/payment_sidebar.ts | 10 +- .../tool/Cashier/styles/question_content.ts | 4 +- .../tool/Cashier/styles/question_sidebar.ts | 6 +- .../tool/CollectionFolder/styles/box_view.ts | 4 +- .../tool/CollectionFolder/styles/editor.ts | 10 +- .../tool/CollectionFolder/styles/index.ts | 4 +- .../tool/CollectionFolder/styles/setter.ts | 8 +- .../tool/CommunityJoinBadge/styles/index.ts | 2 +- .../styles/community_setter/body.ts | 4 +- .../community_setter/community_card/normal.ts | 6 +- .../community_setter/community_card/simple.ts | 6 +- .../styles/community_setter/footer.ts | 4 +- .../styles/community_setter/header.ts | 10 +- .../styles/community_setter/index.ts | 2 +- .../styles/community_setter/list.ts | 7 +- .../styles/community_setter/search_box.ts | 4 +- .../styles/tag_setter/body.ts | 4 +- .../styles/tag_setter/creator.ts | 4 +- .../styles/tag_setter/footer.ts | 4 +- .../styles/tag_setter/group_tags.ts | 4 +- .../styles/tag_setter/header.ts | 10 +- .../styles/tag_setter/index.ts | 2 +- .../styles/tag_setter/tag.ts | 6 +- .../tool/Drawer/Content/Content.tsx | 4 + src/containers/tool/Drawer/dynamics.tsx | 4 + src/containers/tool/Drawer/store.ts | 20 +- .../tool/Drawer/styles/add_on/article_navi.ts | 6 +- .../tool/Drawer/styles/add_on/index.ts | 6 +- .../tool/Drawer/styles/content/index.ts | 2 +- .../Drawer/styles/content/place_holder.ts | 4 +- .../tool/Drawer/styles/header/close_line.ts | 2 +- .../tool/Drawer/styles/header/index.ts | 4 +- src/containers/tool/Drawer/styles/index.ts | 6 +- .../tool/ErrorBox/styles/details.ts | 6 +- src/containers/tool/ErrorBox/styles/footer.ts | 6 +- src/containers/tool/ErrorBox/styles/header.ts | 6 +- src/containers/tool/ErrorBox/styles/index.ts | 8 +- .../tool/JoinModal/styles/footer.ts | 6 +- .../tool/JoinModal/styles/groups.ts | 6 +- .../tool/JoinModal/styles/header.ts | 10 +- src/containers/tool/JoinModal/styles/index.ts | 4 +- src/containers/tool/MailBox/styles/index.ts | 2 +- .../tool/MailBox/styles/mails_panel.ts | 2 +- .../tool/MailBox/styles/mention_list.ts | 14 +- src/containers/tool/Share/styles/index.ts | 4 +- .../tool/Share/styles/panel/iframe_board.ts | 4 +- .../tool/Share/styles/panel/index.ts | 4 +- .../tool/Share/styles/panel/info_panel.ts | 2 +- .../tool/Share/styles/panel/link_board.ts | 11 +- .../tool/Share/styles/panel/platform.ts | 12 +- .../tool/Share/styles/panel/wechat_board.ts | 4 +- .../tool/Subscriber/styles/index.ts | 8 +- .../tool/Subscriber/styles/subscribe_info.ts | 2 +- .../unit/ArticleFooter/styles/index.ts | 4 +- .../styles/panel/activities/action_item.ts | 8 +- .../styles/panel/activities/gtd_item.ts | 2 +- .../styles/panel/activities/index.tsx | 6 +- .../styles/panel/activities/mention_item.ts | 2 +- .../styles/panel/activities/tab_item.ts | 4 +- .../unit/ArticleFooter/styles/panel/index.ts | 6 +- .../ArticleFooter/styles/panel/members.ts | 4 +- .../ArticleFooter/styles/panel/user_list.ts | 4 +- .../unit/Comments/styles/comment/actions.ts | 4 +- .../unit/Comments/styles/comment/base.ts | 4 +- .../comment/desktop_view/fold_layout.ts | 12 +- .../comment/desktop_view/illegal_bar.ts | 6 +- .../styles/comment/desktop_view/index.ts | 12 +- .../unit/Comments/styles/comment/footer.ts | 12 +- .../styles/comment/header/article.tsx | 10 +- .../Comments/styles/comment/header/index.tsx | 10 +- .../styles/comment/header/user_published.tsx | 6 +- .../styles/comment/mobile_view/header.ts | 12 +- .../styles/comment/mobile_view/index.ts | 10 +- .../unit/Comments/styles/comment/reply_bar.ts | 2 +- .../unit/Comments/styles/comment_header.ts | 12 +- .../unit/Comments/styles/editor/footer.ts | 4 +- .../unit/Comments/styles/editor/header.ts | 6 +- .../Comments/styles/editor/publish_editor.ts | 4 +- .../Comments/styles/editor/reply_editor.ts | 8 +- .../Comments/styles/editor/update_editor.ts | 6 +- .../unit/Comments/styles/head_bar/index.ts | 2 +- .../Comments/styles/head_bar/publish_bar.ts | 8 +- .../styles/head_bar/state_bar/index.ts | 10 +- .../styles/head_bar/state_bar/sort_menu.ts | 10 +- src/containers/unit/Comments/styles/index.ts | 4 +- .../unit/Comments/styles/list/date_divider.ts | 4 +- .../unit/Comments/styles/list/index.ts | 6 +- .../unit/Comments/styles/list/list.ts | 4 +- .../unit/Comments/styles/list/replies_list.ts | 4 +- .../Comments/styles/list/toggler_button.ts | 4 +- .../unit/Comments/styles/locked_message.ts | 4 +- src/containers/unit/Header/styles/addons.ts | 4 +- .../desktop_view/article_editor_view.ts | 6 +- .../styles/desktop_view/article_view.ts | 8 +- .../styles/desktop_view/community_view.ts | 16 +- .../unit/Header/styles/threads_nav.ts | 6 +- .../unit/Header/styles/user_account.ts | 4 +- .../ModeLine/styles/article_layout/index.ts | 12 +- .../ModeLine/styles/community_layout/index.ts | 12 +- .../unit/ModeLine/styles/metrics/top_bar.js | 2 +- .../ModeLine/styles/top_bar/desktop_view.ts | 10 +- .../top_bar/mobile_view/article_bar/index.ts | 8 +- .../mobile_view/community_bar/index.ts | 6 +- .../mobile_view/community_bar/tag_block.ts | 6 +- .../ModeLineMenu/styles/community_menu.ts | 6 +- .../unit/ModeLineMenu/styles/explore_menu.ts | 10 +- .../styles/filter_menu/content.ts | 8 +- .../ModeLineMenu/styles/filter_menu/header.ts | 6 +- .../ModeLineMenu/styles/filter_menu/index.ts | 4 +- .../styles/filter_menu/sort_column/index.ts | 8 +- .../styles/filter_menu/sort_column/options.ts | 6 +- .../styles/global_menu/home_navi.ts | 6 +- .../styles/global_menu/main_menu.ts | 8 +- .../unit/ModeLineMenu/styles/index.ts | 4 +- .../ModeLineMenu/styles/more_menu/index.ts | 4 +- .../unit/ModeLineMenu/styles/navi_button.ts | 4 +- .../unit/ModeLineMenu/styles/search_menu.ts | 10 +- .../unit/ModeLineMenu/styles/share_menu.ts | 6 +- .../TagsBar/styles/desktop_view/folder.ts | 8 +- .../TagsBar/styles/desktop_view/goback_tag.ts | 4 +- .../unit/TagsBar/styles/desktop_view/index.ts | 4 +- .../TagsBar/styles/desktop_view/tag_count.ts | 4 +- .../TagsBar/styles/desktop_view/tag_item.ts | 12 +- .../user/UserBilling/styles/bills_table.ts | 12 +- .../user/UserBilling/styles/index.ts | 4 +- .../UserBilling/styles/table_section_desc.ts | 4 +- .../user/UserBilling/styles/upgrade_menu.ts | 2 +- .../user/UserBilling/styles/xxx_plan.ts | 11 +- .../user/UserLister/styles/header_info.ts | 6 +- .../user/UserLister/styles/index.ts | 4 +- .../UserLister/styles/list/editor_layout.ts | 12 +- .../UserLister/styles/list/normal_layout.ts | 12 +- .../user/UserLister/styles/user_list.ts | 14 +- .../styles/activities/brief_info.ts | 6 +- .../styles/activities/detail_info.ts | 6 +- .../styles/activities/event_block.ts | 4 +- .../UserProfile/styles/activities/index.ts | 2 +- .../user/UserProfile/styles/contribute_map.ts | 8 +- .../user/UserProfile/styles/index.ts | 2 +- .../user/UserProfile/styles/numbers_pad.ts | 8 +- .../UserPublishedArticles/styles/index.ts | 2 +- .../styles/thread_selector.ts | 11 +- .../user/UserSettings/styles/index.ts | 2 +- .../ArticleViewer/PostViewer/ArticleInfo.tsx | 9 +- .../ArticleViewer/PostViewer/Header.tsx | 24 +- .../viewer/ArticleViewer/PostViewer/index.tsx | 6 +- .../styles/blog_viewer/article_info.ts | 10 +- .../styles/blog_viewer/fixed_header.ts | 6 +- .../styles/blog_viewer/header.ts | 8 +- .../styles/blog_viewer/index.tsx | 2 +- .../styles/post_viewer/article_info.ts | 9 +- .../styles/post_viewer/fixed_header.ts | 10 +- .../styles/post_viewer/header.ts | 16 +- .../styles/post_viewer/index.tsx | 27 +- .../viewer/MailsViewer/styles/mention_list.ts | 14 +- .../viewer/MailsViewer/styles/toggle_info.ts | 4 +- .../MailsViewer/styles/toggle_read_button.ts | 4 +- src/pages/[community]/dashboard/admins.tsx | 5 +- .../[community]/dashboard/alias/index.tsx | 5 +- .../[community]/dashboard/alias/kanban.tsx | 2 +- .../[community]/dashboard/alias/others.tsx | 127 ++++++++ .../dashboard/broadcast/article.tsx | 2 +- .../[community]/dashboard/broadcast/index.tsx | 2 +- src/pages/[community]/dashboard/changelog.tsx | 2 +- .../[community]/dashboard/communities.tsx | 129 ++++++++ src/pages/[community]/dashboard/doc/cover.tsx | 2 +- src/pages/[community]/dashboard/doc/faq.tsx | 2 +- src/pages/[community]/dashboard/doc/index.tsx | 2 +- src/pages/[community]/dashboard/doc/tree.tsx | 2 +- src/pages/[community]/dashboard/domain.tsx | 2 +- src/pages/[community]/dashboard/footer.tsx | 2 +- src/pages/[community]/dashboard/header.tsx | 2 +- src/pages/[community]/dashboard/index.tsx | 2 +- .../[community]/dashboard/info/index.tsx | 2 +- .../[community]/dashboard/info/other.tsx | 2 +- .../[community]/dashboard/info/social.tsx | 2 +- .../dashboard/layout/changelog.tsx | 2 +- .../[community]/dashboard/layout/doc.tsx | 2 +- .../[community]/dashboard/layout/index.tsx | 2 +- .../[community]/dashboard/layout/kanban.tsx | 2 +- .../[community]/dashboard/layout/post.tsx | 2 +- src/pages/[community]/dashboard/post.tsx | 2 +- src/pages/[community]/dashboard/rss.tsx | 2 +- src/pages/[community]/dashboard/seo/index.tsx | 2 +- .../[community]/dashboard/seo/twitter.tsx | 2 +- src/pages/[community]/dashboard/tags.tsx | 2 +- src/pages/[community]/dashboard/threads.tsx | 2 +- src/pages/apply/community.tsx | 2 +- src/schemas/fragments/base.ts | 5 + src/schemas/pages/community.ts | 16 +- src/schemas/pages/index.ts | 1 - src/spec/account.d.ts | 1 + src/spec/community.d.ts | 11 +- src/spec/dashboard.d.ts | 1 + src/spec/index.ts | 1 + src/spec/metric.d.ts | 1 + src/spec/route.ts | 3 +- src/spec/utils.d.ts | 6 +- src/stores/AccountStore/index.ts | 16 +- src/stores/Model/Comment.ts | 2 +- src/stores/Model/Common.ts | 11 + src/stores/Model/Community.ts | 12 +- src/stores/Model/User.ts | 8 - src/stores/Model/helper/article.ts | 3 +- src/stores/Model/index.ts | 5 +- src/stores/RootStore/index.ts | 2 + src/stores/index.ts | 1 + src/widgets/AdminAvatar/styles/index.ts | 4 +- src/widgets/AnimatedCount/styles/metric.ts | 2 +- .../ArchivedSign/styles/detail_panel.ts | 6 +- src/widgets/ArchivedSign/styles/index.ts | 4 +- src/widgets/ArrowLinker/index.tsx | 43 +++ src/widgets/ArrowLinker/styles/index.ts | 29 ++ src/widgets/ArrowLinker/tests/index.test.ts | 10 + .../ArticleActionsPanel/styles/index.ts | 6 +- src/widgets/ArticleBaseStats/styles/index.ts | 6 +- .../ArticleBelongCommunity/styles/index.ts | 4 +- .../styles/mirror_hint.ts | 4 +- src/widgets/ArticleBroadcast/index.tsx | 2 +- src/widgets/ArticleBroadcast/styles/index.ts | 6 +- src/widgets/ArticleCard/styles/footer.ts | 6 +- src/widgets/ArticleCard/styles/header.ts | 4 +- src/widgets/ArticleCard/styles/index.ts | 4 +- src/widgets/ArticleCatState/styles/index.ts | 4 +- src/widgets/ArticleCatState/styles/label.ts | 2 +- src/widgets/ArticleCatState/styles/metric.ts | 2 +- src/widgets/ArticleCatState/styles/state.ts | 6 +- src/widgets/ArticleEditFooter/styles/index.ts | 4 +- src/widgets/ArticleImgWindow/styles/index.ts | 4 +- src/widgets/ArticleMenu/styles/index.ts | 2 +- src/widgets/ArticlePinLabel/styles/index.ts | 2 +- src/widgets/ArticleReadLabel/styles/index.ts | 2 +- src/widgets/ArticlesFilter/SearchBox.tsx | 2 +- src/widgets/ArticlesFilter/SortFilter.tsx | 8 +- .../ArticlesFilter/styles/filter_panel.ts | 13 +- .../ArticlesFilter/styles/filter_result.ts | 4 +- src/widgets/ArticlesFilter/styles/index.ts | 14 +- .../ArticlesFilter/styles/mobile_view.ts | 14 +- .../ArticlesFilter/styles/search_box.ts | 13 +- .../ArticlesFilter/styles/selected_filters.ts | 4 +- src/widgets/ArtimentBody/styles/fold_box.ts | 6 +- src/widgets/ArtimentBody/styles/index.ts | 2 +- src/widgets/BlinkCursor/styles/index.ts | 2 +- src/widgets/BookDemo/styles/index.ts | 4 +- src/widgets/BrandTitle/styles/index.ts | 4 +- src/widgets/Broadcast/styles/index.ts | 8 +- src/widgets/Buttons/AddButton.tsx | 7 +- src/widgets/Buttons/ArrowButton/Arrow.tsx | 12 +- src/widgets/Buttons/ArrowButton/index.tsx | 37 ++- src/widgets/Buttons/DropdownButton/index.tsx | 10 +- src/widgets/Buttons/styles/add_button.ts | 17 +- .../Buttons/styles/arrow_button/arrow.ts | 20 +- .../Buttons/styles/arrow_button/index.ts | 34 +- src/widgets/Buttons/styles/arrow_link.ts | 4 +- src/widgets/Buttons/styles/button.ts | 6 +- src/widgets/Buttons/styles/cancel_button.ts | 4 +- .../Buttons/styles/copy_button/index.ts | 6 +- .../Buttons/styles/dropdown_button/index.ts | 19 +- .../styles/dropdown_button/option_panel.ts | 12 +- .../Buttons/styles/fancy_publish_button.ts | 10 +- .../Buttons/styles/follow_button/index.ts | 6 +- src/widgets/Buttons/styles/icon_button.ts | 4 +- .../Buttons/styles/menu_button/index.ts | 4 +- .../Buttons/styles/menu_button/menu.ts | 8 +- src/widgets/Buttons/styles/metircs/button.ts | 2 +- .../Buttons/styles/notify_button/index.ts | 6 +- .../styles/or_button/horizontal_button.ts | 15 +- src/widgets/Buttons/styles/or_button/index.ts | 4 +- .../styles/or_button/vertical_button.ts | 15 +- .../Buttons/styles/publish_button/index.ts | 8 +- .../styles/publish_button/post_layout.ts | 4 +- .../publish_button/sidebar_header_layout.ts | 4 +- src/widgets/Buttons/styles/submit_button.ts | 6 +- src/widgets/Buttons/styles/toggle_switch.ts | 6 +- .../Buttons/styles/yes_or_no_buttons.ts | 4 +- .../BuyMeChuanChuan/styles/chuan_selector.ts | 10 +- src/widgets/BuyMeChuanChuan/styles/index.ts | 12 +- .../BuyMeChuanChuan/styles/payment_footer.ts | 10 +- .../BuyMeChuanChuan/styles/unlogin_note.ts | 4 +- src/widgets/Cards/styles/community_card.ts | 12 +- src/widgets/Cards/styles/user_card.ts | 8 +- src/widgets/CatSelector/index.tsx | 2 +- .../CatSelector/styles/active_label.ts | 4 +- .../CatSelector/styles/filter_panel.ts | 8 +- src/widgets/CatSelector/styles/full_panel.ts | 4 +- src/widgets/CatSelector/styles/index.ts | 11 +- .../styles/classic_layout/article_layout.ts | 8 +- .../styles/classic_layout/author.ts | 4 +- .../styles/classic_layout/default_layout.ts | 10 +- .../styles/outline_layout/cover.ts | 2 +- .../styles/outline_layout/index.ts | 12 +- .../styles/simple_layout/article_layout.ts | 8 +- .../styles/simple_layout/author.ts | 4 +- .../styles/simple_layout/default_layout.ts | 10 +- .../ChangelogItem/styles/solid_tag_list.ts | 4 +- src/widgets/Charger/styles/index.ts | 2 +- src/widgets/CheckLabel/styles/index.ts | 4 +- src/widgets/Checker/styles/index.ts | 8 +- src/widgets/CollapseMenu/styles/group.ts | 9 +- src/widgets/CollapseMenu/styles/index.ts | 9 +- src/widgets/CollapseMenu/styles/item.ts | 4 +- src/widgets/ColorSelector/styles/index.ts | 10 +- src/widgets/CommentsCount/styles/index.ts | 4 +- src/widgets/Common/index.ts | 17 +- .../CommunityBadgeSelector/styles/index.ts | 10 +- src/widgets/CommunityFaceLogo/styles/index.ts | 2 +- src/widgets/CommunityJoinSign/styles/index.ts | 6 +- src/widgets/CommunityList/styles/index.ts | 6 +- .../CommunityStatesPad/ModelineView.tsx | 12 +- src/widgets/CommunityStatesPad/index.tsx | 12 +- .../styles/content_status.ts | 4 +- .../CommunityStatesPad/styles/index.ts | 8 +- .../styles/modeline_view.ts | 6 +- .../styles/subscribe_status.ts | 6 +- .../styles/subscribed_title.ts | 6 +- .../styles/volunteer_status.ts | 6 +- .../ConstructingThread/styles/index.ts | 4 +- src/widgets/ContentBanner/styles/index.ts | 12 +- .../ContentBanner/styles/reaction_numbers.ts | 9 +- src/widgets/ContributorList/styles/index.ts | 4 +- src/widgets/Copyright/styles/index.ts | 4 +- src/widgets/Copyright/styles/label.ts | 4 +- .../Copyright/styles/readonly_panel.ts | 8 +- src/widgets/CoverImage/styles/index.ts | 2 +- src/widgets/CrashErrorHint/styles/index.ts | 6 +- .../styles/horizontal_scroller.ts | 4 +- .../styles/vertical_scroller.ts | 8 +- .../DashboardDesc/PostLayoutExample/index.tsx | 1 - .../styles/post_layout_example/index.ts | 10 +- src/widgets/DigestSentence/styles/index.ts | 2 +- src/widgets/DiscussLinker/styles/index.ts | 10 +- src/widgets/DivideText/styles/index.ts | 4 +- src/widgets/DotDivider/styles/index.ts | 2 +- src/widgets/Dropdown/styles/index.ts | 6 +- .../styles/default_layout/active_view.ts | 6 +- .../styles/default_layout/inactive_view.ts | 4 +- .../styles/default_layout/index.ts | 4 +- .../EmailSubscriber/styles/email_hint_icon.ts | 4 +- .../EmailSubscriber/styles/simple_layout.ts | 4 +- src/widgets/EmotionSelector/styles/index.ts | 6 +- src/widgets/EmotionSelector/styles/panel.ts | 6 +- .../styles/selected_emotions/emotion_icon.ts | 2 +- .../styles/selected_emotions/emotion_unit.ts | 4 +- .../styles/selected_emotions/users_panel.ts | 6 +- src/widgets/EmptyLabel/styles/index.ts | 4 +- src/widgets/EmptyThread/styles/index.ts | 4 +- src/widgets/EnterHint/styles/index.ts | 4 +- src/widgets/ErrorPage/styles/code_snippets.ts | 4 +- src/widgets/ErrorPage/styles/index.ts | 12 +- src/widgets/ErrorPage/styles/spin_planet.ts | 5 +- src/widgets/ExpandIcon/styles/index.ts | 4 +- src/widgets/ExpandIcon/styles/metric.ts | 2 +- src/widgets/ExtraLinks/SimpleLayout.tsx | 21 +- .../ExtraLinks/styles/header_template.ts | 6 +- src/widgets/ExtraLinks/styles/index.ts | 18 +- .../ExtraLinks/styles/simple_layout.ts | 14 +- src/widgets/FaIcons/styles/index.ts | 2 +- src/widgets/FaIcons/styles/panel.ts | 10 +- src/widgets/FaIcons/styles/selector.ts | 6 +- src/widgets/Facepile/index.tsx | 7 +- src/widgets/Facepile/styles/index.ts | 13 +- src/widgets/Facepile/styles/more_item.ts | 6 +- src/widgets/Facepile/styles/real_avatar.ts | 6 +- src/widgets/Facepile/styles/real_number.ts | 2 +- src/widgets/FaqList/styles/collapse/banner.ts | 4 +- src/widgets/FaqList/styles/collapse/footer.ts | 6 +- src/widgets/FaqList/styles/collapse/index.ts | 4 +- .../FaqList/styles/collapse/section.ts | 4 +- src/widgets/FaqList/styles/flat.ts | 12 +- src/widgets/FaqList/styles/index.ts | 4 +- src/widgets/FaqList/styles/search_hint.ts | 10 +- src/widgets/FaqPeekList/styles/index.ts | 4 +- .../FeedbackFooter/styles/bottom_info.ts | 11 +- src/widgets/FeedbackFooter/styles/index.ts | 4 +- src/widgets/FeedbackFooter/styles/top_info.ts | 4 +- src/widgets/FeedsBar/styles/index.ts | 4 +- src/widgets/FeedsBar/styles/list.ts | 6 +- .../FeedsBar/styles/source_selector.ts | 6 +- src/widgets/FileTree/styles/file_item.ts | 8 +- src/widgets/FileTree/styles/folder.ts | 8 +- src/widgets/FileTree/styles/index.ts | 4 +- src/widgets/FileTree/styles/outline.ts | 4 +- .../FiltersMenu/styles/filter/index.ts | 8 +- src/widgets/FiltersMenu/styles/filter/tag.ts | 7 +- src/widgets/FiltersMenu/styles/header.ts | 6 +- src/widgets/FiltersMenu/styles/index.ts | 6 +- src/widgets/FocusLine/styles/index.ts | 6 +- src/widgets/Folder/styles/content.ts | 4 +- src/widgets/Folder/styles/detail_info.ts | 4 +- src/widgets/Folder/styles/footer.ts | 8 +- src/widgets/Folder/styles/index.ts | 4 +- src/widgets/Footer/styles/contact_list.ts | 4 +- .../styles/desktop_view/group_layout.ts | 14 +- .../styles/desktop_view/powerby_info.ts | 8 +- .../styles/desktop_view/simple_layout.ts | 8 +- src/widgets/Footer/styles/index.ts | 4 +- src/widgets/Footer/styles/mobile_view.ts | 10 +- src/widgets/FormItem/styles/index.ts | 4 +- .../GalleryHub/styles/directory_gallery.ts | 12 +- .../GalleryHub/styles/friends_gallery.ts | 12 +- .../GalleryHub/styles/image_gallery/index.ts | 12 +- .../image_gallery/main_column_gallery.ts | 6 +- src/widgets/GalleryHub/styles/inline_tags.ts | 4 +- .../styles/people_gallery/card_header.ts | 6 +- .../people_gallery/developer_gallery.ts | 12 +- .../people_gallery/fame_people_gallery.ts | 8 +- .../GalleryHub/styles/people_gallery/index.ts | 6 +- .../GalleryHub/styles/product_gallery.ts | 14 +- .../GalleryHub/styles/snippet_gallery.ts | 12 +- .../styles/sponsor_gallery/index.ts | 12 +- .../styles/sponsor_gallery/patterns.ts | 2 +- src/widgets/GithubRepoPage/styles/header.ts | 10 +- src/widgets/GithubRepoPage/styles/index.ts | 7 +- .../styles/states_containers.ts | 10 +- src/widgets/GithubSyncWarning/styles/index.ts | 4 +- src/widgets/GithubUserCard/styles/index.ts | 10 +- src/widgets/GotoTop/styles/index.ts | 4 +- src/widgets/Header/styles/addons.ts | 6 +- .../desktop_view/article_editor_layout.ts | 6 +- .../styles/desktop_view/article_layout.ts | 8 +- .../styles/desktop_view/community_layout.ts | 16 +- .../styles/desktop_view/general_layout.ts | 8 +- .../styles/desktop_view/works_layout.ts | 8 +- src/widgets/Header/styles/threads_nav.ts | 6 +- src/widgets/Header/styles/user_account.ts | 4 +- src/widgets/HomeHeader/styles/index.ts | 37 ++- src/widgets/HomeHeader/styles/mobile_menu.ts | 4 +- src/widgets/IconText/styles/index.ts | 6 +- src/widgets/Icons/ArrowUpRight.tsx | 11 + src/widgets/Icons/CheckCircle.tsx | 11 + src/widgets/Icons/Github8.tsx | 11 +- src/widgets/Icons/social/TikTok.tsx | 11 + src/widgets/IllegalWarning/styles/index.ts | 8 +- src/widgets/Img/LazyLoadImg.tsx | 28 +- src/widgets/Img/styles/lazy_load_image.ts | 8 +- src/widgets/ImgFallback/styles/avatar.ts | 4 +- src/widgets/ImgFallback/styles/work.ts | 6 +- src/widgets/InlineCommunities/styles/index.ts | 2 +- src/widgets/Input/styles/index.ts | 4 +- src/widgets/Input/styles/textarea.ts | 2 +- src/widgets/KanbanItem/styles/full.ts | 10 +- src/widgets/KanbanItem/styles/simple.ts | 10 +- src/widgets/Linker/styles/index.ts | 2 +- src/widgets/LinksCard/index.js | 2 +- src/widgets/LinksCard/styles/index.ts | 4 +- src/widgets/LinksCard/styles/item.ts | 8 +- src/widgets/Loading/PostItemLoading.tsx | 2 +- .../Loading/styles/community_holder.ts | 6 +- src/widgets/Loading/styles/index.ts | 4 +- .../Loading/styles/lava_lamp_loading.ts | 6 +- src/widgets/MasonryCards/styles/index.ts | 2 +- src/widgets/MenuItem/styles/index.ts | 4 +- src/widgets/MobileMockup/styles/index.ts | 2 +- src/widgets/MobileThreadNavi/styles/index.ts | 6 +- src/widgets/Modal/styles/index.ts | 8 +- src/widgets/NaviCatalog/styles/dashboard.ts | 13 +- src/widgets/NaviCatalog/styles/header.ts | 6 +- src/widgets/NaviCatalog/styles/index.ts | 4 +- src/widgets/NaviCatalog/styles/list/index.ts | 4 +- src/widgets/NaviCatalog/styles/pin_number.ts | 2 +- src/widgets/NaviIntro/styles/index.ts | 6 +- src/widgets/Navigator/styles/brief_view.ts | 10 +- src/widgets/Navigator/styles/card_popover.ts | 10 +- src/widgets/Navigator/styles/index.ts | 8 +- src/widgets/Navigator/styles/main_entries.ts | 6 +- src/widgets/Navigator/styles/more_links.ts | 2 +- .../Navigator/styles/more_panel/footer.ts | 8 +- .../Navigator/styles/more_panel/index.ts | 12 +- .../styles/more_panel/mobile_view.ts | 10 +- src/widgets/NotFound/styles/index.ts | 4 +- src/widgets/NoticeBar/styles/icon.ts | 2 +- src/widgets/NoticeBar/styles/index.ts | 4 +- src/widgets/OSSUploader/index.tsx | 4 +- src/widgets/OSSUploader/styles/index.ts | 18 +- src/widgets/OauthHinter/styles/index.ts | 10 +- .../PagedArticles/styles/article_list.ts | 2 +- .../styles/community_recommends.ts | 6 +- src/widgets/Pagi/styles/index.ts | 10 +- .../desktop_view/active_badge.ts | 6 +- .../comment_fist_layout/desktop_view/body.ts | 9 +- .../desktop_view/header.ts | 6 +- .../comment_fist_layout/desktop_view/index.ts | 8 +- .../styles/comment_fist_layout/index.ts | 6 +- .../mobile_view/active_badge.ts | 6 +- .../comment_fist_layout/mobile_view/body.ts | 4 +- .../comment_fist_layout/mobile_view/header.ts | 2 +- .../comment_fist_layout/mobile_view/index.ts | 2 +- .../cover_layout/desktop_view/active_badge.ts | 6 +- .../cover_layout/desktop_view/footer.ts | 4 +- .../cover_layout/desktop_view/header.ts | 6 +- .../styles/cover_layout/desktop_view/index.ts | 6 +- .../PostItem/styles/cover_layout/index.ts | 6 +- .../styles/cover_layout/mobile_view/body.ts | 4 +- .../styles/cover_layout/mobile_view/footer.ts | 6 +- .../styles/cover_layout/mobile_view/header.ts | 8 +- .../styles/cover_layout/mobile_view/index.ts | 4 +- .../desktop_view/active_badge.ts | 6 +- .../minimal_layout/desktop_view/footer.ts | 4 +- .../minimal_layout/desktop_view/header.ts | 6 +- .../minimal_layout/desktop_view/index.ts | 6 +- .../PostItem/styles/minimal_layout/index.ts | 6 +- .../minimal_layout/mobile_view/header.ts | 2 +- .../minimal_layout/mobile_view/index.ts | 2 +- .../desktop_view/active_badge.ts | 6 +- .../upvote_fist_layout/desktop_view/footer.ts | 4 +- .../upvote_fist_layout/desktop_view/header.ts | 8 +- .../upvote_fist_layout/desktop_view/index.ts | 6 +- .../styles/upvote_fist_layout/index.ts | 6 +- .../upvote_fist_layout/mobile_view/body.ts | 4 +- .../upvote_fist_layout/mobile_view/footer.ts | 6 +- .../upvote_fist_layout/mobile_view/header.ts | 4 +- .../upvote_fist_layout/mobile_view/index.ts | 4 +- src/widgets/PostItem/styles/viewing_sign.ts | 4 +- src/widgets/PromotionList/index.tsx | 2 +- src/widgets/PromotionList/styles/index.ts | 4 +- src/widgets/PromotionList/styles/spotlight.ts | 8 +- src/widgets/PromotionList/styles/wait_list.ts | 7 +- src/widgets/RangeSlider/styles/index.ts | 6 +- .../ReadableDate/styles/absolute_fmt.tsx | 4 +- src/widgets/SearchingLabel/styles/index.ts | 4 +- src/widgets/SectionLabel/styles/index.ts | 4 +- src/widgets/Select/styles/index.ts | 4 +- src/widgets/SettingMenu/styles/index.ts | 4 +- .../SidebarLayoutHeader/styles/doc_layout.ts | 10 +- .../SidebarLayoutHeader/styles/index.ts | 6 +- .../SidebarLayoutHeader/styles/post_layout.ts | 8 +- src/widgets/SocialEditor/index.tsx | 51 ++- src/widgets/SocialEditor/styles/index.ts | 40 ++- src/widgets/SocialEditor/styles/input_bar.ts | 10 +- src/widgets/SocialList/styles/index.ts | 13 +- src/widgets/StateSelector/FilterPanel.tsx | 4 +- src/widgets/StateSelector/index.tsx | 6 +- .../StateSelector/styles/active_state.ts | 5 +- .../StateSelector/styles/filter_panel.ts | 8 +- .../StateSelector/styles/full_panel.ts | 10 +- src/widgets/StateSelector/styles/index.ts | 6 +- src/widgets/StatusBox/styles/index.ts | 6 +- src/widgets/SubTitle/styles/index.ts | 4 +- src/widgets/Switcher/styles/icon_selector.ts | 12 +- src/widgets/Switcher/styles/metric/radio.ts | 2 +- src/widgets/Switcher/styles/metric/tabs.ts | 4 +- .../pagi_option_selector/gallery_base.ts | 4 +- .../styles/pagi_option_selector/index.ts | 4 +- .../pagi_option_selector/main_column.ts | 6 +- .../pagi_option_selector/masonry_column.ts | 6 +- .../pagi_option_selector/three_column.ts | 4 +- .../styles/pagi_option_selector/two_column.ts | 4 +- src/widgets/Switcher/styles/radio.ts | 4 +- .../Switcher/styles/tabs/drawer_view.ts | 6 +- src/widgets/Switcher/styles/tabs/index.ts | 6 +- .../Switcher/styles/tabs/local_icon.ts | 4 +- .../styles/tabs/mobile_view/expand_view.ts | 4 +- .../styles/tabs/mobile_view/normal_view.ts | 4 +- src/widgets/Switcher/styles/tabs/tab_icon.ts | 7 +- src/widgets/Switcher/styles/tabs/tab_item.ts | 15 +- .../TabBar/styles/desktop_view/brief_view.ts | 9 +- src/widgets/TabSelector/styles/index.ts | 14 +- src/widgets/Tag/styles/index.ts | 4 +- src/widgets/TagNote/index.tsx | 2 +- src/widgets/TagNote/styles/index.ts | 6 +- src/widgets/TagSelector/styles/active_tag.ts | 6 +- .../TagSelector/styles/filter_panel.ts | 10 +- src/widgets/TagSelector/styles/index.ts | 6 +- src/widgets/TagsList/styles/index.ts | 6 +- src/widgets/TagsList/styles/setter.ts | 6 +- .../TeamList/styles/list/edit_works_layout.ts | 6 +- .../TeamList/styles/list/guide_layout.ts | 6 +- .../TeamList/styles/list/works_layout.ts | 6 +- src/widgets/TeamList/styles/setter/header.ts | 6 +- src/widgets/TeamList/styles/setter/index.ts | 2 +- src/widgets/TeamList/styles/setter/list.ts | 8 +- .../TeamList/styles/setter/search_box.ts | 4 +- src/widgets/TeamList/styles/user_item.ts | 6 +- src/widgets/TechStacks/styles/category.ts | 6 +- src/widgets/TechStacks/styles/index.ts | 4 +- src/widgets/TechStacks/styles/row.ts | 8 +- .../TheAvatar/styles/article_author_avatar.ts | 2 +- src/widgets/TheAvatar/styles/index.ts | 2 +- .../TheAvatar/styles/post_item_avatar.ts | 2 +- .../ThemeSelector/styles/card_selector.ts | 10 +- .../ThemeSelector/styles/dot_selector.ts | 4 +- .../ThemeSelector/styles/gallery_selector.ts | 11 +- src/widgets/ThemeSelector/styles/index.ts | 5 +- src/widgets/ThreadSelector/styles/index.ts | 8 +- src/widgets/ThreadSelector/styles/panel.ts | 6 +- src/widgets/Tooltip/RealTooltip.tsx | 2 +- src/widgets/Tooltip/styles/confirm_footer.ts | 6 +- src/widgets/Tooltip/styles/index.ts | 2 +- src/widgets/Upvote/DefaultLayout.tsx | 17 +- src/widgets/Upvote/styles/article_layout.ts | 6 +- src/widgets/Upvote/styles/comment_layout.ts | 6 +- src/widgets/Upvote/styles/default_layout.ts | 49 +-- .../Upvote/styles/fixed_header_layout.ts | 4 +- src/widgets/Upvote/styles/general_layout.ts | 6 +- src/widgets/Upvote/styles/metric.ts | 2 +- src/widgets/Upvote/styles/post_list_layout.ts | 6 +- .../Upvote/styles/post_minimal_layout.ts | 6 +- src/widgets/Upvote/styles/simple_layout.ts | 4 +- src/widgets/Upvote/styles/sticker_layout.ts | 6 +- src/widgets/Upvote/styles/upvote_btn.ts | 6 +- src/widgets/UserBrief/styles/avatar.ts | 4 +- src/widgets/UserBrief/styles/badge_info.ts | 6 +- .../UserBrief/styles/community_editor_info.ts | 4 +- src/widgets/UserBrief/styles/extra_info.ts | 4 +- src/widgets/UserBrief/styles/footer.ts | 6 +- src/widgets/UserBrief/styles/index.ts | 9 +- src/widgets/UserBrief/styles/operators.ts | 4 +- src/widgets/UserBrief/styles/social_icons.ts | 4 +- .../UserBrief/styles/volunteers_badge.ts | 2 +- src/widgets/UserBrief/styles/works_badge.ts | 6 +- src/widgets/UserCell/styles/index.ts | 6 +- src/widgets/VerifiedSign/styles/index.ts | 4 +- src/widgets/ViewsCount/styles/index.ts | 4 +- src/widgets/WordsCounter/styles/index.ts | 9 +- tsconfig.json | 2 + utils/async/gq_client.js | 3 + utils/constant/event.ts | 2 + utils/constant/metric.ts | 1 + utils/constant/mode.ts | 5 +- utils/constant/route.ts | 5 +- utils/constant/social.ts | 3 +- utils/constant/type.ts | 3 + utils/css/flex.ts | 15 +- utils/css/index.ts | 8 +- utils/css/metric.ts | 8 +- utils/i18n/index.js | 11 +- .../scripts/generators/container/store.ts.hbs | 2 +- utils/signal.ts | 5 + utils/ssr.js | 20 +- 1032 files changed, 6713 insertions(+), 3661 deletions(-) create mode 100644 src/containers/content/CommunityContent/styles/dashboard_content.ts create mode 100644 src/containers/editor/CommunityEditor/Banner/BlockSelector.tsx create mode 100644 src/containers/editor/CommunityEditor/Banner/NextStepButton.tsx create mode 100644 src/containers/editor/CommunityEditor/Banner/ScaleSelector.tsx create mode 100644 src/containers/editor/CommunityEditor/Banner/SelectType/WarnBox.tsx create mode 100644 src/containers/editor/CommunityEditor/Banner/SetupExtra.tsx create mode 100644 src/containers/editor/CommunityEditor/Content/FakeBrowser/MaskPanel.tsx delete mode 100755 src/containers/editor/CommunityEditor/Content/MoreInfo.tsx create mode 100644 src/containers/editor/CommunityEditor/Header/StatusBall.tsx create mode 100644 src/containers/editor/CommunityEditor/Header/StepMap.tsx create mode 100644 src/containers/editor/CommunityEditor/Header/index.tsx create mode 100644 src/containers/editor/CommunityEditor/styles/banner/block_selector.ts create mode 100644 src/containers/editor/CommunityEditor/styles/banner/next_step_button.ts create mode 100644 src/containers/editor/CommunityEditor/styles/banner/scale_selector.ts create mode 100644 src/containers/editor/CommunityEditor/styles/banner/select_type/warn_box.ts create mode 100644 src/containers/editor/CommunityEditor/styles/banner/setup_extra.ts create mode 100644 src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts delete mode 100755 src/containers/editor/CommunityEditor/styles/content/more_info.ts create mode 100644 src/containers/editor/CommunityEditor/styles/header/index.ts create mode 100644 src/containers/editor/CommunityEditor/styles/header/status_ball.ts create mode 100644 src/containers/editor/CommunityEditor/styles/header/step_map.ts create mode 100644 src/containers/editor/PassportEditor/Selects.tsx create mode 100644 src/containers/editor/PassportEditor/index.tsx create mode 100644 src/containers/editor/PassportEditor/logic.ts create mode 100644 src/containers/editor/PassportEditor/schema.ts create mode 100644 src/containers/editor/PassportEditor/store.ts create mode 100644 src/containers/editor/PassportEditor/styles/index.ts create mode 100644 src/containers/editor/PassportEditor/styles/selects.ts create mode 100644 src/containers/editor/PassportEditor/tests/index.test.js create mode 100644 src/containers/editor/PassportEditor/tests/store.test.js create mode 100644 src/containers/thread/DashboardThread/CMS/Communities/index.tsx create mode 100644 src/containers/thread/DashboardThread/styles/cms/communities/index.ts create mode 100644 src/pages/[community]/dashboard/alias/others.tsx create mode 100644 src/pages/[community]/dashboard/communities.tsx create mode 100644 src/stores/Model/Common.ts create mode 100644 src/widgets/ArrowLinker/index.tsx create mode 100644 src/widgets/ArrowLinker/styles/index.ts create mode 100644 src/widgets/ArrowLinker/tests/index.test.ts create mode 100644 src/widgets/Icons/ArrowUpRight.tsx create mode 100644 src/widgets/Icons/CheckCircle.tsx create mode 100644 src/widgets/Icons/social/TikTok.tsx diff --git a/.eslintrc.js b/.eslintrc.js index a22f54c27..f9b48b77e 100755 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -32,6 +32,7 @@ module.exports = { '@/stores': 'src/stores', '@/model': 'src/stores/Model', '@/utils': 'utils', + '@/css': 'utils/css', '@/schemas': 'src/schemas', '@/Img': 'src/widgets/Img', '@/SvgIcons': 'src/widgets/SvgIcons', diff --git a/jsconfig.json b/jsconfig.json index 00c6d644e..3e79a859c 100755 --- a/jsconfig.json +++ b/jsconfig.json @@ -17,6 +17,8 @@ "@/model*": ["src/stores/Model/*"], "@/utils": ["utils"], "@/utils/*": ["utils/*"], + "@/css": ["utils/css"], + "@/css/*": ["utils/css/*"], "@/schemas": ["src/schemas"], "@/Img": ["src/widgets/Img"], "@/SvgIcons/*": ["src/widgets/SvgIcons/*"], diff --git a/package-lock.json b/package-lock.json index c2a6e3091..638961455 100755 --- a/package-lock.json +++ b/package-lock.json @@ -50,7 +50,7 @@ "react-dom": "^18.2.0", "react-flip-numbers": "^3.0.7", "react-highlight-words": "^0.18.0", - "react-lazy-load-image-component": "^1.5.6", + "react-lazy-load-image-component": "^1.6.0", "react-masonry-css": "^1.0.14", "react-pin-field": "3.0.16", "react-portal": "^4.2.2", @@ -63,6 +63,7 @@ "react-trend": "^1.2.4", "react-use": "17.4.0", "react-waypoint": "^10.3.0", + "react-wrap-balancer": "^1.1.0", "remarkable": "2.0.0", "remarkable-emoji": "^0.1.3", "remarkable-mentions": "^0.1.0", @@ -78,6 +79,7 @@ "stylis": "^4.3.0", "timeago-react": "^3.0.5", "tinykeys": "^1.4.0", + "tsparticles-confetti": "^2.12.0", "typewriter-effect": "^2.19.0", "urql": "^3.0.3" }, @@ -18958,9 +18960,9 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, "node_modules/react-lazy-load-image-component": { - "version": "1.5.6", - "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.6.tgz", - "integrity": "sha512-M0jeJtOlTHgThOfgYM9krSqYbR6ShxROy/KVankwbw9/amPKG1t5GSGN1sei6Cyu8+QJVuyAUvQ+LFtCVTTlKw==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.0.tgz", + "integrity": "sha512-8KFkDTgjh+0+PVbH+cx0AgxLGbdTsxWMnxXzU5HEUztqewk9ufQAu8cstjZhyvtMIPsdMcPZfA0WAa7HtjQbBQ==", "dependencies": { "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1" @@ -19253,6 +19255,14 @@ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-wrap-balancer": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-wrap-balancer/-/react-wrap-balancer-1.1.0.tgz", + "integrity": "sha512-EhF3jOZm5Fjx+Cx41e423qOv2c2aOvXAtym2OHqrGeMUnwERIyNsRBgnfT3plB170JmuYvts8K2KSPEIerKr5A==", + "peerDependencies": { + "react": ">=16.8.0 || ^17.0.0 || ^18" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -22142,6 +22152,279 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/tsparticles-basic": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-basic/-/tsparticles-basic-2.12.0.tgz", + "integrity": "sha512-pN6FBpL0UsIUXjYbiui5+IVsbIItbQGOlwyGV55g6IYJBgdTNXgFX0HRYZGE9ZZ9psEXqzqwLM37zvWnb5AG9g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "dependencies": { + "tsparticles-engine": "^2.12.0", + "tsparticles-move-base": "^2.12.0", + "tsparticles-shape-circle": "^2.12.0", + "tsparticles-updater-color": "^2.12.0", + "tsparticles-updater-opacity": "^2.12.0", + "tsparticles-updater-out-modes": "^2.12.0", + "tsparticles-updater-size": "^2.12.0" + } + }, + "node_modules/tsparticles-confetti": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-confetti/-/tsparticles-confetti-2.12.0.tgz", + "integrity": "sha512-PsxBL1DjYNNZecFFcymivnPypuxHKh0ePz2/9CctKl6zwS+Z8cHBCoszg8jBx6PJDJkAxIa76taezd54caISYg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "dependencies": { + "tsparticles-basic": "^2.12.0", + "tsparticles-engine": "^2.12.0", + "tsparticles-plugin-emitters": "^2.12.0", + "tsparticles-plugin-motion": "^2.12.0", + "tsparticles-shape-cards": "^2.12.0", + "tsparticles-shape-heart": "^2.12.0", + "tsparticles-shape-image": "^2.12.0", + "tsparticles-shape-polygon": "^2.12.0", + "tsparticles-shape-square": "^2.12.0", + "tsparticles-shape-star": "^2.12.0", + "tsparticles-shape-text": "^2.12.0", + "tsparticles-updater-life": "^2.12.0", + "tsparticles-updater-roll": "^2.12.0", + "tsparticles-updater-rotate": "^2.12.0", + "tsparticles-updater-tilt": "^2.12.0", + "tsparticles-updater-wobble": "^2.12.0" + } + }, + "node_modules/tsparticles-engine": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.12.0.tgz", + "integrity": "sha512-ZjDIYex6jBJ4iMc9+z0uPe7SgBnmb6l+EJm83MPIsOny9lPpetMsnw/8YJ3xdxn8hV+S3myTpTN1CkOVmFv0QQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "hasInstallScript": true + }, + "node_modules/tsparticles-move-base": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-move-base/-/tsparticles-move-base-2.12.0.tgz", + "integrity": "sha512-oSogCDougIImq+iRtIFJD0YFArlorSi8IW3HD2gO3USkH+aNn3ZqZNTqp321uB08K34HpS263DTbhLHa/D6BWw==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-plugin-emitters": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-plugin-emitters/-/tsparticles-plugin-emitters-2.12.0.tgz", + "integrity": "sha512-fbskYnaXWXivBh9KFReVCfqHdhbNQSK2T+fq2qcGEWpwtDdgujcaS1k2Q/xjZnWNMfVesik4IrqspcL51gNdSA==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-plugin-motion": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-plugin-motion/-/tsparticles-plugin-motion-2.12.0.tgz", + "integrity": "sha512-VeS0VDV5wc9a4t0xkPi3lkHqOvKRlELq4mEEvaIk8WwgOcx05TUZcJIIbhftnNabqgpHrZ4iUP5Nb2wZ3DBwWQ==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-shape-cards": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-shape-cards/-/tsparticles-shape-cards-2.12.0.tgz", + "integrity": "sha512-4mSV1C7c/7SsSbS4A5HJEZE5tB2fOAEUXm52uagzBVMbL/YI+XkjOpi7L6JtCNcBKrWnZ/IgnnLMyyFGhNc4pA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-shape-circle": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-shape-circle/-/tsparticles-shape-circle-2.12.0.tgz", + "integrity": "sha512-L6OngbAlbadG7b783x16ns3+SZ7i0SSB66M8xGa5/k+YcY7zm8zG0uPt1Hd+xQDR2aNA3RngVM10O23/Lwk65Q==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-shape-heart": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-shape-heart/-/tsparticles-shape-heart-2.12.0.tgz", + "integrity": "sha512-OK8CJrCY0Z6YAedyfTQh52u7KsurkP8eLNWDW11BhqcvDQkfwJC5g25Y3VrcW9Rwc88hrbNwFQlsKbY6tOn7qA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-shape-image": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-shape-image/-/tsparticles-shape-image-2.12.0.tgz", + "integrity": "sha512-iCkSdUVa40DxhkkYjYuYHr9MJGVw+QnQuN5UC+e/yBgJQY+1tQL8UH0+YU/h0GHTzh5Sm+y+g51gOFxHt1dj7Q==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-shape-polygon": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-shape-polygon/-/tsparticles-shape-polygon-2.12.0.tgz", + "integrity": "sha512-5YEy7HVMt1Obxd/jnlsjajchAlYMr9eRZWN+lSjcFSH6Ibra7h59YuJVnwxOxAobpijGxsNiBX0PuGQnB47pmA==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-shape-square": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-shape-square/-/tsparticles-shape-square-2.12.0.tgz", + "integrity": "sha512-33vfajHqmlODKaUzyPI/aVhnAOT09V7nfEPNl8DD0cfiNikEuPkbFqgJezJuE55ebtVo7BZPDA9o7GYbWxQNuw==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-shape-star": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-shape-star/-/tsparticles-shape-star-2.12.0.tgz", + "integrity": "sha512-4sfG/BBqm2qBnPLASl2L5aBfCx86cmZLXeh49Un+TIR1F5Qh4XUFsahgVOG0vkZQa+rOsZPEH04xY5feWmj90g==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-shape-text": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-shape-text/-/tsparticles-shape-text-2.12.0.tgz", + "integrity": "sha512-v2/FCA+hyTbDqp2ymFOe97h/NFb2eezECMrdirHWew3E3qlvj9S/xBibjbpZva2gnXcasBwxn0+LxKbgGdP0rA==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-updater-color": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-updater-color/-/tsparticles-updater-color-2.12.0.tgz", + "integrity": "sha512-KcG3a8zd0f8CTiOrylXGChBrjhKcchvDJjx9sp5qpwQK61JlNojNCU35xoaSk2eEHeOvFjh0o3CXWUmYPUcBTQ==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-updater-life": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-updater-life/-/tsparticles-updater-life-2.12.0.tgz", + "integrity": "sha512-J7RWGHAZkowBHpcLpmjKsxwnZZJ94oGEL2w+wvW1/+ZLmAiFFF6UgU0rHMC5CbHJT4IPx9cbkYMEHsBkcRJ0Bw==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-updater-opacity": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.12.0.tgz", + "integrity": "sha512-YUjMsgHdaYi4HN89LLogboYcCi1o9VGo21upoqxq19yRy0hRCtx2NhH22iHF/i5WrX6jqshN0iuiiNefC53CsA==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-updater-out-modes": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.12.0.tgz", + "integrity": "sha512-owBp4Gk0JNlSrmp12XVEeBroDhLZU+Uq3szbWlHGSfcR88W4c/0bt0FiH5bHUqORIkw+m8O56hCjbqwj69kpOQ==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-updater-roll": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-updater-roll/-/tsparticles-updater-roll-2.12.0.tgz", + "integrity": "sha512-dxoxY5jP4C9x15BxlUv5/Q8OjUPBiE09ToXRyBxea9aEJ7/iMw6odvi1HuT0H1vTIfV7o1MYawjeCbMycvODKQ==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-updater-rotate": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-updater-rotate/-/tsparticles-updater-rotate-2.12.0.tgz", + "integrity": "sha512-waOFlGFmEZOzsQg4C4VSejNVXGf4dMf3fsnQrEROASGf1FCd8B6WcZau7JtXSTFw0OUGuk8UGz36ETWN72DkCw==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-updater-size": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-updater-size/-/tsparticles-updater-size-2.12.0.tgz", + "integrity": "sha512-B0yRdEDd/qZXCGDL/ussHfx5YJ9UhTqNvmS5X2rR2hiZhBAE2fmsXLeWkdtF2QusjPeEqFDxrkGiLOsh6poqRA==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-updater-tilt": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-updater-tilt/-/tsparticles-updater-tilt-2.12.0.tgz", + "integrity": "sha512-HDEFLXazE+Zw+kkKKAiv0Fs9D9sRP61DoCR6jZ36ipea6OBgY7V1Tifz2TSR1zoQkk57ER9+EOQbkSQO+YIPGQ==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, + "node_modules/tsparticles-updater-wobble": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/tsparticles-updater-wobble/-/tsparticles-updater-wobble-2.12.0.tgz", + "integrity": "sha512-85FIRl95ipD3jfIsQdDzcUC5PRMWIrCYqBq69nIy9P8rsNzygn+JK2n+P1VQZowWsZvk0mYjqb9OVQB21Lhf6Q==", + "dependencies": { + "tsparticles-engine": "^2.12.0" + } + }, "node_modules/tsutils": { "version": "3.21.0", "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz", diff --git a/package.json b/package.json index ab8153f87..89e5ba165 100755 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "react-dom": "^18.2.0", "react-flip-numbers": "^3.0.7", "react-highlight-words": "^0.18.0", - "react-lazy-load-image-component": "^1.5.6", + "react-lazy-load-image-component": "^1.6.0", "react-masonry-css": "^1.0.14", "react-pin-field": "3.0.16", "react-portal": "^4.2.2", @@ -92,6 +92,7 @@ "react-trend": "^1.2.4", "react-use": "17.4.0", "react-waypoint": "^10.3.0", + "react-wrap-balancer": "^1.1.0", "remarkable": "2.0.0", "remarkable-emoji": "^0.1.3", "remarkable-mentions": "^0.1.0", @@ -107,6 +108,7 @@ "stylis": "^4.3.0", "timeago-react": "^3.0.5", "tinykeys": "^1.4.0", + "tsparticles-confetti": "^2.12.0", "typewriter-effect": "^2.19.0", "urql": "^3.0.3" }, diff --git a/src/containers/content/ArticleContent/styles/desktop_view/changelog_layout.ts b/src/containers/content/ArticleContent/styles/desktop_view/changelog_layout.ts index b7d1998d3..51b88f3f3 100644 --- a/src/containers/content/ArticleContent/styles/desktop_view/changelog_layout.ts +++ b/src/containers/content/ArticleContent/styles/desktop_view/changelog_layout.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' import { Wrapper as WrapperBase } from '.' export { InnerWrapper, MainWrapper, ArticleWrapper, CommentsWrapper } from '.' export const Wrapper = styled(WrapperBase)` - ${css.flex('justify-center')}; + ${css.row('justify-center')}; padding: 0; ` diff --git a/src/containers/content/ArticleContent/styles/desktop_view/index.tsx b/src/containers/content/ArticleContent/styles/desktop_view/index.tsx index 75ae8d62f..8dfe22aa5 100755 --- a/src/containers/content/ArticleContent/styles/desktop_view/index.tsx +++ b/src/containers/content/ArticleContent/styles/desktop_view/index.tsx @@ -1,12 +1,12 @@ import styled from 'styled-components' import type { TTestable, TMetric } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.article.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flex('justify-between')}; + ${css.row('justify-between')}; position: relative; padding-top: 2px; min-height: 300px; diff --git a/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx b/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx index 612f9731e..2b4f87b35 100644 --- a/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx +++ b/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TAvatarLayout } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import { AVATAR_LAYOUT } from '@/constant/layout' @@ -53,13 +53,13 @@ export const Value = styled.div` ` export const UserList = styled.div` - ${css.flexColumn()}; + ${css.column()}; flex-wrap: wrap; gap: 10px 0; ` export const User = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` export const Avatar = styled(Img)<{ avatarLayout: TAvatarLayout }>` ${css.size(18)}; diff --git a/src/containers/content/ArticleContent/styles/mobile_view.ts b/src/containers/content/ArticleContent/styles/mobile_view.ts index 1bc3bba0d..20543fc9f 100755 --- a/src/containers/content/ArticleContent/styles/mobile_view.ts +++ b/src/containers/content/ArticleContent/styles/mobile_view.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css, { WIDTH } from '@/utils/css' +import css, { WIDTH } from '@/css' export const Wrapper = styled.article.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexGrow('justify-center')}; + ${css.rowGrow('justify-center')}; position: relative; padding-top: 20px; min-height: 300px; @@ -16,7 +16,7 @@ export const Wrapper = styled.article.attrs(({ testid }) => ({ `}; ` export const InnerWrapper = styled.div` - ${css.flex()}; + ${css.row()}; width: 100%; padding: 0 6vw; ` diff --git a/src/containers/content/CommunityContent/AboutContent.tsx b/src/containers/content/CommunityContent/AboutContent.tsx index 6b5e5800f..9554f289d 100755 --- a/src/containers/content/CommunityContent/AboutContent.tsx +++ b/src/containers/content/CommunityContent/AboutContent.tsx @@ -5,6 +5,9 @@ import { FC } from 'react' import useMobileDetect from '@groupher/use-mobile-detect-hook' +import type { TMetric } from '@/spec' +import METRIC from '@/constant/metric' + import { bond } from '@/utils/mobx' import { BANNER_LAYOUT } from '@/constant/layout' @@ -18,12 +21,16 @@ import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapp type TProps = { communityContent?: TStore + metric?: TMetric } /** * only for AboutThread, but link to the common communityContent store */ -const CommunityContentContainer: FC = ({ communityContent: store }) => { +const CommunityContentContainer: FC = ({ + communityContent: store, + metric = METRIC.COMMUNITY, +}) => { useInit(store) const { globalLayout } = store @@ -33,7 +40,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { return ( - + {isMobile ? ( @@ -41,7 +48,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { ) : ( - + diff --git a/src/containers/content/CommunityContent/ChangeLogContent.tsx b/src/containers/content/CommunityContent/ChangeLogContent.tsx index 6b81ae751..b98c5d9a6 100755 --- a/src/containers/content/CommunityContent/ChangeLogContent.tsx +++ b/src/containers/content/CommunityContent/ChangeLogContent.tsx @@ -5,6 +5,9 @@ import { FC } from 'react' import useMobileDetect from '@groupher/use-mobile-detect-hook' +import type { TMetric } from '@/spec' +import METRIC from '@/constant/metric' + import { bond } from '@/utils/mobx' import { BANNER_LAYOUT } from '@/constant/layout' @@ -18,12 +21,16 @@ import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapp type TProps = { communityContent?: TStore + metric?: TMetric } /** * only for AboutThread, but link to the common communityContent store */ -const CommunityContentContainer: FC = ({ communityContent: store }) => { +const CommunityContentContainer: FC = ({ + communityContent: store, + metric = METRIC.COMMUNITY, +}) => { useInit(store) const { globalLayout } = store @@ -32,7 +39,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { return ( - + {isMobile ? ( @@ -40,7 +47,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { ) : ( - + diff --git a/src/containers/content/CommunityContent/DashboardContent.tsx b/src/containers/content/CommunityContent/DashboardContent.tsx index 7c8730995..620a0a4c3 100755 --- a/src/containers/content/CommunityContent/DashboardContent.tsx +++ b/src/containers/content/CommunityContent/DashboardContent.tsx @@ -5,6 +5,9 @@ import { FC } from 'react' import useMobileDetect from '@groupher/use-mobile-detect-hook' +import type { TMetric } from '@/spec' +import METRIC from '@/constant/metric' + import { bond } from '@/utils/mobx' import CommunityDigest from '@/containers/digest/CommunityDigest' @@ -18,33 +21,34 @@ import { InnerWrapper, ContentWrapper, MobileCardsWrapper, -} from './styles' +} from './styles/dashboard_content' type TProps = { communityContent?: TStore + metric?: TMetric } /** * only for AboutThread, but link to the common communityContent store */ -const CommunityContentContainer: FC = ({ communityContent: store }) => { +const DashboardContainer: FC = ({ communityContent: store, metric = METRIC.DASHBOARD }) => { useInit(store) const { isMobile } = useMobileDetect() return ( - + {isMobile ? ( - + ) : ( - + - + )} @@ -52,4 +56,4 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { ) } -export default bond(CommunityContentContainer, 'communityContent') as FC +export default bond(DashboardContainer, 'communityContent') as FC diff --git a/src/containers/content/CommunityContent/DocContent.tsx b/src/containers/content/CommunityContent/DocContent.tsx index c1ee37574..4c11df871 100644 --- a/src/containers/content/CommunityContent/DocContent.tsx +++ b/src/containers/content/CommunityContent/DocContent.tsx @@ -5,6 +5,9 @@ import { FC } from 'react' import useMobileDetect from '@groupher/use-mobile-detect-hook' +import type { TMetric } from '@/spec' +import METRIC from '@/constant/metric' + import { bond } from '@/utils/mobx' import { BANNER_LAYOUT } from '@/constant/layout' import { THREAD } from '@/constant/thread' @@ -20,12 +23,16 @@ import { Wrapper, InnerWrapper, SidebarWrapper, ContentWrapper, MobileCardsWrapp type TProps = { communityContent?: TStore + metric?: TMetric } /** * only for AboutThread, but link to the common communityContent store */ -const CommunityContentContainer: FC = ({ communityContent: store }) => { +const CommunityContentContainer: FC = ({ + communityContent: store, + metric = METRIC.COMMUNITY, +}) => { useInit(store) const { globalLayout } = store @@ -36,7 +43,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { return ( - + {isMobile ? ( @@ -44,7 +51,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { ) : ( - + {isSidebarLayout && } diff --git a/src/containers/content/CommunityContent/KanbanContent.tsx b/src/containers/content/CommunityContent/KanbanContent.tsx index 6f217a677..44e74dc83 100755 --- a/src/containers/content/CommunityContent/KanbanContent.tsx +++ b/src/containers/content/CommunityContent/KanbanContent.tsx @@ -4,6 +4,9 @@ import { FC } from 'react' +import type { TMetric } from '@/spec' +import METRIC from '@/constant/metric' + import { bond } from '@/utils/mobx' import { BANNER_LAYOUT } from '@/constant/layout' @@ -17,12 +20,16 @@ import { Wrapper, InnerWrapper, SidebarWrapper, ContentWrapper, MobileCardsWrapp type TProps = { communityContent?: TStore + metric?: TMetric } /** * only for AboutThread, but link to the common communityContent store */ -const CommunityContentContainer: FC = ({ communityContent: store }) => { +const CommunityContentContainer: FC = ({ + communityContent: store, + metric = METRIC.COMMUNITY, +}) => { useInit(store) const { globalLayout } = store @@ -31,13 +38,13 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { return ( - + - + diff --git a/src/containers/content/CommunityContent/PostContent.tsx b/src/containers/content/CommunityContent/PostContent.tsx index 84cd23cff..6917564b5 100755 --- a/src/containers/content/CommunityContent/PostContent.tsx +++ b/src/containers/content/CommunityContent/PostContent.tsx @@ -4,6 +4,9 @@ import { FC } from 'react' +import type { TMetric } from '@/spec' +import METRIC from '@/constant/metric' + import { bond } from '@/utils/mobx' import { BANNER_LAYOUT } from '@/constant/layout' import { THREAD } from '@/constant/thread' @@ -19,12 +22,16 @@ import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapp type TProps = { communityContent?: TStore + metric?: TMetric } /** * only for AboutThread, but link to the common communityContent store */ -const CommunityContentContainer: FC = ({ communityContent: store }) => { +const CommunityContentContainer: FC = ({ + communityContent: store, + metric = METRIC.COMMUNITY, +}) => { useInit(store) const { globalLayout, isMobile } = store @@ -34,7 +41,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { return ( - + {isMobile && ( @@ -44,7 +51,7 @@ const CommunityContentContainer: FC = ({ communityContent: store }) => { )} {!isMobile && ( - + {isSidebarLayout && } diff --git a/src/containers/content/CommunityContent/ThreadContent.tsx b/src/containers/content/CommunityContent/ThreadContent.tsx index d0f9173d6..98a7d0c10 100755 --- a/src/containers/content/CommunityContent/ThreadContent.tsx +++ b/src/containers/content/CommunityContent/ThreadContent.tsx @@ -1,11 +1,8 @@ import { FC, memo } from 'react' -import dynamic from 'next/dynamic' import type { TThread } from '@/spec' import { THREAD } from '@/constant/thread' -import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' - import ArticlesThread from '@/containers//thread/ArticlesThread' import KanbanThread from '@/containers//thread/KanbanThread' import ChangeLogThread from '@/containers//thread/ChangelogThread' @@ -14,12 +11,6 @@ import AboutThread from '@/containers/thread/AboutThread' import DocThread from '@/containers/thread/DocThread' // import DashboardThread from '@/containers/thread/DashboardThread' -const DashboardThread = dynamic(() => import('@/containers/thread/DashboardThread'), { - /* eslint-disable react/display-name */ - loading: () => , - ssr: false, -}) - type TProps = { thread: TThread } @@ -42,10 +33,6 @@ const ThreadContent: FC = ({ thread }) => { return } - case THREAD.DASHBOARD: { - return - } - default: return } diff --git a/src/containers/content/CommunityContent/styles/dashboard_content.ts b/src/containers/content/CommunityContent/styles/dashboard_content.ts new file mode 100644 index 000000000..d1cc1d8ff --- /dev/null +++ b/src/containers/content/CommunityContent/styles/dashboard_content.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components' + +import css from '@/css' + +import { InnerWrapper as BaseInnerWrapper } from '.' + +export { Wrapper, ContentWrapper, MobileCardsWrapper } from '.' + +export const InnerWrapper = styled(BaseInnerWrapper)` + ${css.column('align-center')}; +` diff --git a/src/containers/content/CommunityContent/styles/index.ts b/src/containers/content/CommunityContent/styles/index.ts index b94f294ee..2dc1b3f17 100755 --- a/src/containers/content/CommunityContent/styles/index.ts +++ b/src/containers/content/CommunityContent/styles/index.ts @@ -1,8 +1,7 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' -import css, { theme, WIDTH } from '@/utils/css' -import { pixelAdd } from '@/utils/dom' +import type { TMetric, TTestable } from '@/spec' +import css, { theme } from '@/css' export const BaseWrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, @@ -18,7 +17,9 @@ export const BaseWrapper = styled.div.attrs(({ testid }) => ({ padding-right: 0; `}; ` -export const BaseInnerWrapper = styled.div` +export const BaseInnerWrapper = styled.div<{ metric?: TMetric }>` + ${({ metric }) => css.fitContentWidth(metric)}; + color: ${theme('font')}; width: 100%; margin-top: 15px; @@ -30,18 +31,18 @@ export const BaseInnerWrapper = styled.div` `}; ` export const BaseContentWrapper = styled.div` - ${css.flexColumn()}; + ${css.column()}; width: 100%; ` export const Wrapper = styled(BaseWrapper)` - ${css.flexColumn('justify-start', 'align-center')}; + ${css.column('justify-start', 'align-center')}; ${css.media.mobile` padding-left: 0; `}; ` export const SidebarWrapper = styled(BaseWrapper)` - ${css.flex('justify-start')}; + ${css.row('justify-start')}; ` export const MobileCardsWrapper = styled.div` width: 100%; @@ -50,17 +51,10 @@ export const MobileCardsWrapper = styled.div` display: none; ${css.media.mobile` - ${css.flexColumn()}; + ${css.column()}; `}; ` export const InnerWrapper = styled(BaseInnerWrapper)` - max-width: ${pixelAdd(WIDTH.COMMUNITY.CONTENT, 46)}; - margin-left: ${WIDTH.COMMUNITY.CONTENT_OFFSET}; - - /* 经典布局在统一宽度下再缩减 35px, 否则列表页会太宽 */ - padding-left: 35px; - padding-right: 35px; - ${css.media.mobile` display: none; padding-left: 0; diff --git a/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts b/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts index d0af475e6..35646edb0 100755 --- a/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts +++ b/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts @@ -1,10 +1,10 @@ import styled from 'styled-components' import Img from '@/Img' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; cursor: pointer; ` export const ArrowIcon = styled(Img)<{ reverse?: boolean }>` diff --git a/src/containers/content/CommunityContent/styles/subscribed_list/index.ts b/src/containers/content/CommunityContent/styles/subscribed_list/index.ts index 95fc6037a..f5b2f694f 100755 --- a/src/containers/content/CommunityContent/styles/subscribed_list/index.ts +++ b/src/containers/content/CommunityContent/styles/subscribed_list/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' @@ -16,7 +16,7 @@ export const Wrapper = styled.div` padding-left: 10px; ` export const HeadTitle = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; font-size: 14px; font-weight: bold; ` @@ -36,7 +36,7 @@ export const Divider = styled.div` ` export const Item = styled.div` position: relative; - ${css.flex('align-center')}; + ${css.row('align-center')}; font-size: 14px; margin-bottom: 15px; @@ -60,8 +60,7 @@ export const Logo = styled(Img)` ` export const Title = styled.div` ${css.cutRest('70px')}; - color: ${({ $active }) => - $active ? theme('article.title') : theme('article.digest')}; + color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))}; ${Item}:hover & { color: ${theme('article.title')}; @@ -91,7 +90,7 @@ export const Menu = styled.div` padding-bottom: 2px; ` export const MenuItem = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 8px; cursor: pointer; ` diff --git a/src/containers/content/CommunityContent/styles/subscribed_list/item_menu.ts b/src/containers/content/CommunityContent/styles/subscribed_list/item_menu.ts index 74496a9db..8fbb11f50 100755 --- a/src/containers/content/CommunityContent/styles/subscribed_list/item_menu.ts +++ b/src/containers/content/CommunityContent/styles/subscribed_list/item_menu.ts @@ -1,14 +1,14 @@ import styled from 'styled-components' import Img from '@/Img' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div` padding: 8px; padding-bottom: 2px; ` export const Item = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 8px; cursor: pointer; ` diff --git a/src/containers/content/CommunityContent/styles/wip_thread.ts b/src/containers/content/CommunityContent/styles/wip_thread.ts index 4f6f9f4bf..19be0f8a8 100755 --- a/src/containers/content/CommunityContent/styles/wip_thread.ts +++ b/src/containers/content/CommunityContent/styles/wip_thread.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import WipSVG from '@/icons/Wip' export const Wrapper = styled.div` @@ -40,5 +40,5 @@ export const Li = styled.li` font-size: 14px; ` export const InnerLinker = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` diff --git a/src/containers/content/LandingPage/TechStacks/index.tsx b/src/containers/content/LandingPage/TechStacks/index.tsx index 036a11f31..a2992555f 100644 --- a/src/containers/content/LandingPage/TechStacks/index.tsx +++ b/src/containers/content/LandingPage/TechStacks/index.tsx @@ -30,7 +30,7 @@ const TeckStacks: FC = () => { 小而美，由开源技术栈驱动 现代化的产品体验得益于现代化的技术栈及工具， - 了解更多 + 了解更多 diff --git a/src/containers/content/LandingPage/WallpaperBar/index.tsx b/src/containers/content/LandingPage/WallpaperBar/index.tsx index e96fe638f..b03800481 100644 --- a/src/containers/content/LandingPage/WallpaperBar/index.tsx +++ b/src/containers/content/LandingPage/WallpaperBar/index.tsx @@ -64,7 +64,7 @@ const WallpaperBar: FC = ({ 壁纸仅在宽屏模式下显示，更多自定义设置 - + 查看这里 diff --git a/src/containers/content/LandingPage/styles/cover_image/desktop_view/dashboard_device.ts b/src/containers/content/LandingPage/styles/cover_image/desktop_view/dashboard_device.ts index ddc6c0a0a..88ef278c0 100644 --- a/src/containers/content/LandingPage/styles/cover_image/desktop_view/dashboard_device.ts +++ b/src/containers/content/LandingPage/styles/cover_image/desktop_view/dashboard_device.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; position: absolute; bottom: 15px; left: -20px; @@ -26,7 +26,7 @@ export const Wrapper = styled.div` z-index: 3; ` export const Content = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; width: 100%; height: 240px; position: relative; diff --git a/src/containers/content/LandingPage/styles/cover_image/desktop_view/desktop_device.ts b/src/containers/content/LandingPage/styles/cover_image/desktop_view/desktop_device.ts index fc08d537e..2d2089461 100644 --- a/src/containers/content/LandingPage/styles/cover_image/desktop_view/desktop_device.ts +++ b/src/containers/content/LandingPage/styles/cover_image/desktop_view/desktop_device.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' import LockSVG from '@/icons/Lock' @@ -8,7 +8,7 @@ import LockSVG from '@/icons/Lock' import { getPathGradient } from '../../metric' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; position: relative; width: 714px; border-radius: 12px; @@ -24,7 +24,7 @@ export const Wrapper = styled.div` z-index: 0; ` export const BrowerHead = styled.div` - ${css.flex('align-center', 'justify-center')}; + ${css.row('align-center', 'justify-center')}; color: ${theme('article.digest')}; width: 100%; position: absolute; @@ -33,7 +33,7 @@ export const BrowerHead = styled.div` padding-left: 8px; ` export const AddrBar = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-left: -65px; ` export const LockIcon = styled(LockSVG)` @@ -62,14 +62,14 @@ export const Dot = styled.div` margin-right: 6px; ` export const Content = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; width: 100%; height: 480px; position: relative; overflow: hidden; ` export const Background = styled.div<{ effect: string }>` - ${css.flex('align-both')} + ${css.row('align-both')} width: 100%; height: 100%; background transparent; diff --git a/src/containers/content/LandingPage/styles/cover_image/desktop_view/index.ts b/src/containers/content/LandingPage/styles/cover_image/desktop_view/index.ts index 843d1ddac..34acad8c9 100644 --- a/src/containers/content/LandingPage/styles/cover_image/desktop_view/index.ts +++ b/src/containers/content/LandingPage/styles/cover_image/desktop_view/index.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import { getPathGradient } from '../../metric' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; position: relative; width: 1080px; border-radius: 12px; @@ -39,7 +39,7 @@ export const FreeLabel = styled.div<{ wallpaper: string }>` ` export const FreeLabel2 = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; width: 80px; height: 35px; border-radius: 8px; diff --git a/src/containers/content/LandingPage/styles/cover_image/desktop_view/mobile_device.ts b/src/containers/content/LandingPage/styles/cover_image/desktop_view/mobile_device.ts index 905734a9b..7cf0176e2 100644 --- a/src/containers/content/LandingPage/styles/cover_image/desktop_view/mobile_device.ts +++ b/src/containers/content/LandingPage/styles/cover_image/desktop_view/mobile_device.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; position: absolute; bottom: -5px; right: 45px; @@ -34,14 +34,14 @@ export const Bar = styled.div` opacity: 0.5; ` export const Content = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; width: 100%; height: 360px; position: relative; overflow: hidden; ` export const Background = styled.div<{ effect: string }>` - ${css.flex('align-both')} + ${css.row('align-both')} width: 100%; height: 100%; background transparent; diff --git a/src/containers/content/LandingPage/styles/cover_image/mobile_view.ts b/src/containers/content/LandingPage/styles/cover_image/mobile_view.ts index 4d0f0ab64..f4f06e7c6 100644 --- a/src/containers/content/LandingPage/styles/cover_image/mobile_view.ts +++ b/src/containers/content/LandingPage/styles/cover_image/mobile_view.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' import LockSVG from '@/icons/Lock' @@ -24,7 +24,7 @@ export const Wrapper = styled.div` display: none; ${css.media.mobile` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; width: calc(100% - 20px); height: 220px; padding-top: 25px; @@ -32,7 +32,7 @@ export const Wrapper = styled.div` `}; ` export const BrowerHead = styled.div` - ${css.flex('align-center', 'justify-center')}; + ${css.row('align-center', 'justify-center')}; color: ${theme('article.digest')}; width: 100%; position: absolute; @@ -45,7 +45,7 @@ export const BrowerHead = styled.div` `}; ` export const AddrBar = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-left: -65px; ${css.media.mobile` @@ -100,14 +100,14 @@ export const Dot = styled.div` `}; ` export const Content = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; width: 100%; height: 700px; position: relative; overflow: hidden; ` export const Background = styled.div<{ effect: string }>` - ${css.flex('align-both')} + ${css.row('align-both')} width: 100%; height: 700px; background transparent; diff --git a/src/containers/content/LandingPage/styles/enjoy_dev/bg_shapes/index.ts b/src/containers/content/LandingPage/styles/enjoy_dev/bg_shapes/index.ts index 19f9527a9..fef9c1be3 100644 --- a/src/containers/content/LandingPage/styles/enjoy_dev/bg_shapes/index.ts +++ b/src/containers/content/LandingPage/styles/enjoy_dev/bg_shapes/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { animate, theme } from '@/utils/css' +import css, { animate, theme } from '@/css' import CurveLine1SVG from './CurveLine1' import CurveLine2SVG from './CurveLine2' diff --git a/src/containers/content/LandingPage/styles/enjoy_dev/block.ts b/src/containers/content/LandingPage/styles/enjoy_dev/block.ts index 7a08a29b9..e7a031d52 100644 --- a/src/containers/content/LandingPage/styles/enjoy_dev/block.ts +++ b/src/containers/content/LandingPage/styles/enjoy_dev/block.ts @@ -1,13 +1,13 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ToolSVG from '@/icons/Tool' import SadSVG from '@/icons/SadFace' import PlaneSVG from '@/icons/Plane' export const Wrapper = styled.div<{ grey: boolean }>` - ${css.flex('align-center')}; + ${css.row('align-center')}; position: relative; border: 1px solid; border-bottom: 3px solid; diff --git a/src/containers/content/LandingPage/styles/enjoy_dev/index.ts b/src/containers/content/LandingPage/styles/enjoy_dev/index.ts index 783982985..5a0652f8f 100644 --- a/src/containers/content/LandingPage/styles/enjoy_dev/index.ts +++ b/src/containers/content/LandingPage/styles/enjoy_dev/index.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import SeedSVG from '@/icons/Seed' import TadaSVG from '@/icons/Tada' @@ -15,12 +15,12 @@ type TPos = { top: string; left: string } export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 100%; height: auto; ` export const Slogan = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Title = styled.div` color: ${theme('article.title')}; @@ -36,7 +36,7 @@ export const Title = styled.div` `}; ` export const Desc = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; font-size: 17px; color: ${theme('article.digest')}; margin-top: 12px; @@ -49,7 +49,7 @@ export const Desc = styled.div` `}; ` export const Wall = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 80%; height: auto; margin-top: 35px; @@ -84,7 +84,7 @@ export const BgWrapper = styled.div` border-radius: 30px; ` export const BadWrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; gap: 15px 0px; height: 140px; width: 100%; @@ -179,7 +179,7 @@ export const TailConnectLine = styled(HeadConnectLine)` width: 50px; ` export const GoodWrapper = styled.div` - ${css.flex('align-both', 'justify-between')}; + ${css.row('align-both', 'justify-between')}; position: relative; height: 560px; width: 1000px; @@ -206,7 +206,7 @@ export const VS = styled.div` background: white; ` const BottonNote = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-top: 8px; color: ${theme('article.digest')}; font-size: 20px; diff --git a/src/containers/content/LandingPage/styles/enjoy_dev/node_block.ts b/src/containers/content/LandingPage/styles/enjoy_dev/node_block.ts index 3f02861fa..aa9dd46f3 100644 --- a/src/containers/content/LandingPage/styles/enjoy_dev/node_block.ts +++ b/src/containers/content/LandingPage/styles/enjoy_dev/node_block.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import { ARTICLE_CAT } from '@/constant/gtd' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import LightSVG from '@/icons/Light' import BugSVG from '@/icons/Bug' @@ -13,7 +13,7 @@ import ToolSVG from '@/icons/Tool' type TWrapper = { color: string; longer: boolean } export const Wrapper = styled.div` position: relative; - ${css.flexColumn()}; + ${css.column()}; width: 150px; height: ${({ longer }) => (longer ? '165px' : '140px')}; border: 1px solid; @@ -23,7 +23,7 @@ export const Wrapper = styled.div` box-shadow: 0 5px 25px rgb(35 35 35 / 10%); ` export const Header = styled.div<{ bg: string }>` - ${css.flex('align-center')}; + ${css.row('align-center')}; background: ${({ bg }) => bg || theme('hoverBg')}; padding: 2px 10px; height: 30px; @@ -71,7 +71,7 @@ export const Icon = { } export const Content = styled.div<{ bg: string }>` - ${css.flexColumn()}; + ${css.column()}; width: 100%; height: 100%; padding: 10px; @@ -88,7 +88,7 @@ export const Bar = styled.div` background: ${({ bg }) => bg || theme('hoverBg')}; ` export const Footer = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; ` type TLeftDot = { bg?: string } export const LeftDot = styled.div` @@ -101,7 +101,7 @@ export const LeftInfo = styled.div` position: absolute; bottom: ${({ bottom }) => bottom || '20px'}; left: -3px; - ${css.flex('align-center')}; + ${css.row('align-center')}; line-height: 18px; ` diff --git a/src/containers/content/LandingPage/styles/enjoy_dev/upvote_btn.ts b/src/containers/content/LandingPage/styles/enjoy_dev/upvote_btn.ts index 96b81ba2a..d8a154b38 100644 --- a/src/containers/content/LandingPage/styles/enjoy_dev/upvote_btn.ts +++ b/src/containers/content/LandingPage/styles/enjoy_dev/upvote_btn.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import UpvoteSVG from '@/icons/Upvote' export const Wrapper = styled.div<{ color: string }>` - ${css.flex('align-center')}; + ${css.row('align-center')}; padding: 0 5px; border: 1px solid; border-color: ${({ color }) => color || theme('divider')}; diff --git a/src/containers/content/LandingPage/styles/feature_wall/bg_dots.ts b/src/containers/content/LandingPage/styles/feature_wall/bg_dots.ts index d9240eba2..dc9caf968 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/bg_dots.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/bg_dots.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css from '@/utils/css' +import css from '@/css' import type { TFeatType } from '../../spec' import { FEAT } from '../../constant' diff --git a/src/containers/content/LandingPage/styles/feature_wall/card.ts b/src/containers/content/LandingPage/styles/feature_wall/card.ts index 2a50671cb..9a886d3a6 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/card.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/card.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TColorName } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import { camelize } from '@/utils/fmt' import Img from '@/Img' @@ -20,7 +20,7 @@ export const Wrapper = styled.div` ` export const Header = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 10px; ` diff --git a/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/changelog_demo.ts b/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/changelog_demo.ts index c44a08219..5f1c25121 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/changelog_demo.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/changelog_demo.ts @@ -2,17 +2,17 @@ import styled from 'styled-components' import { Bar as BarBase } from '@/widgets/Common' -import css, { theme, animate } from '@/utils/css' +import css, { theme, animate } from '@/css' import StarSVG from './Star' export const Wrapper = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; position: relative; padding-left: 10px; ` export const Header = styled.div` - ${css.flexColumn()}; + ${css.column()}; width: 260px; margin-top: 25px; margin-bottom: 10px; @@ -30,7 +30,7 @@ export const Cover = styled.div` opacity: 0.4; ` export const Title = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: #f9b7b6; font-weight: 600; font-size: 12px; @@ -39,17 +39,17 @@ export const GreyTitle = styled(Title)` color: ${theme('article.digest')}; ` export const TagsWrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-top: 10px; ` export const Content = styled.div` - ${css.flexColumn()}; + ${css.column()}; margin-top: 15px; width: 260px; gap: 10px; ` export const Footer = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; margin-top: 20px; width: 260px; ` diff --git a/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/index.ts b/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/index.ts index 088084c61..ca206657f 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/index.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/index.ts @@ -2,14 +2,14 @@ import styled from 'styled-components' import type { TActive, TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' type TWrapper = TActive export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 100%; height: 730px; padding: 0 12%; @@ -33,7 +33,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ } ${css.media.mobile` - ${css.flexColumn()}; + ${css.column()}; margin-top: 80px; padding: 0 18px; height: auto; @@ -43,5 +43,5 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ `}; ` export const Slogan = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` diff --git a/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/intro_digest.ts b/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/intro_digest.ts index 25f9f1ace..575f4497e 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/intro_digest.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/intro_digest.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' import { FEAT } from '../../../constant' @@ -10,7 +10,7 @@ export { FeatList } from '..' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-start')}; + ${css.column('align-start')}; width: 48%; height: 430px; padding-left: 1%; diff --git a/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/intro_image.ts b/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/intro_image.ts index 307b41af0..1f033fd12 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/intro_image.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/changelog_feat/intro_image.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import type { TActive, TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' import EmojiSVG from '@/icons/EmojiTada' import BroadcastSVG from '@/icons/Broadcast' @@ -11,7 +11,7 @@ import CommentSVG from '@/icons/Heart' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; flex-grow: 1; position: relative; @@ -58,7 +58,7 @@ export const ColorBlockHolder = styled(ColorBlock)` ` export const IconsWrapper = styled.div` position: absolute; - ${css.flex('align-center')}; + ${css.row('align-center')}; gap: 0 18px; bottom: -40px; right: -250px; diff --git a/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/c2h.ts b/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/c2h.ts index fb486ab41..da9667801 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/c2h.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/c2h.ts @@ -2,14 +2,14 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import CurlyLineSVG from './C2HSVG' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 100%; height: auto; position: relative; @@ -24,7 +24,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ export const DescBlock = styled.div` position: absolute; top: 100px; - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.title')}; font-size: 13px; font-weight: 400; diff --git a/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/d2k.ts b/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/d2k.ts index cf4557739..d3d9fbdef 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/d2k.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/d2k.ts @@ -2,14 +2,14 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import CurlyLineSVG from './D2KSVG' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 100%; height: auto; position: relative; @@ -24,7 +24,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ export const DescBlock = styled.div` position: absolute; top: 100px; - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.digest')}; font-size: 13px; font-weight: 400; diff --git a/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/k2c.ts b/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/k2c.ts index ec6d77e8f..0a951a35e 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/k2c.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/k2c.ts @@ -2,14 +2,14 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import CurlyLineSVG from './K2CSVG' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 100%; height: auto; position: relative; @@ -24,7 +24,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ export const DescBlock = styled.div` position: absolute; top: 100px; - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.digest')}; font-size: 13px; font-weight: 400; diff --git a/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/u2d.ts b/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/u2d.ts index 1540c67e9..2f4b1d88a 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/u2d.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/curly_line_desc/u2d.ts @@ -2,14 +2,14 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import CurlyLineSVG from './U2DSVG' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 100%; height: auto; position: relative; @@ -33,7 +33,7 @@ export const Circle = styled.div` export const DescBlock = styled.div` position: absolute; top: 100px; - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.digest')}; font-size: 13px; font-weight: 400; diff --git a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/comment_item.ts b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/comment_item.ts index 302605d99..0139a0ac0 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/comment_item.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/comment_item.ts @@ -2,10 +2,10 @@ import styled from 'styled-components' import { Bar as BarBase } from '@/widgets/Common' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div<{ opacity: number }>` - ${css.flex()}; + ${css.row()}; background: ${theme('alphaBg2')}; opacity: ${({ opacity }) => opacity}; margin-bottom: 12px; @@ -14,7 +14,7 @@ type TAvatar = { color: string; bg: string } export const Avatar = styled.div` ${css.size(20)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; color: ${({ color }) => color}; font-size: 10px; font-weight: 600; @@ -22,7 +22,7 @@ export const Avatar = styled.div` background-color: ${({ bg }) => bg}; ` export const RightPart = styled.div` - ${css.flexColumn()}; + ${css.column()}; margin-left: 15px; ` export const Bar = styled(BarBase)` diff --git a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/index.ts b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/index.ts index cf8760cc4..08e00c2b2 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/index.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/index.ts @@ -6,10 +6,10 @@ import ViewSVG from '@/icons/View' import UpvoteSVG from '@/icons/Upvote' import CommentSVG from '@/icons/Comment' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.flex('justify-between')}; + ${css.row('justify-between')}; position: relative; padding: 30px; opacity: 0.8; @@ -31,12 +31,12 @@ export const DetailWrapper = styled.div` border-image-slice: 1; ` export const Status = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-top: 10px; margin-bottom: 22px; ` export const UpvoteWrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; border: 1px solid; color: ${theme('baseColor.purple')}; font-size: 11px; @@ -74,7 +74,7 @@ export const Bar = styled(BarBase)` background: ${theme('baseColor.purple')}; ` export const CommentsHeader = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('baseColor.purple')}; font-weight: 500; font-size: 12px; diff --git a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/post_item.ts b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/post_item.ts index cbe8f3b06..3c7637acf 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/post_item.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/discuss_demo/post_item.ts @@ -3,10 +3,10 @@ import styled from 'styled-components' import { Bar as BarBase } from '@/widgets/Common' import UpvoteSVG from '@/icons/Upvote' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div<{ opacity: number }>` - ${css.flex()}; + ${css.row()}; background: ${theme('alphaBg2')}; border-radius: 6px; height: 50px; @@ -16,7 +16,7 @@ export const Wrapper = styled.div<{ opacity: number }>` ` export const UpvotesWrapper = styled.div` ${css.size(40)}; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; border: 1px solid; border-color: #dac7e3; @@ -25,11 +25,11 @@ export const UpvotesWrapper = styled.div` box-shadow: rgb(151 149 165 / 15%) 0px 8px 24px; ` export const RightPart = styled.div` - ${css.flexColumn()}; + ${css.column()}; margin-left: 14px; ` export const Footer = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` export const UpvoteIcon = styled(UpvoteSVG)` ${css.size(12)}; diff --git a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/index.ts b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/index.ts index 261f079da..f7aa64322 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/index.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/index.ts @@ -2,14 +2,14 @@ import styled from 'styled-components' import type { TActive, TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' type TWrapper = TActive export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 100%; height: 730px; padding: 0 12%; @@ -31,7 +31,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ } ${css.media.mobile` - ${css.flexColumn()}; + ${css.column()}; margin-top: 200px; padding: 0 18px; height: auto; @@ -42,5 +42,5 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ `}; ` export const Slogan = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` diff --git a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/intro_digest.ts b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/intro_digest.ts index a04d187f7..fe31d1c31 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/intro_digest.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/intro_digest.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' import { FEAT } from '../../../constant' @@ -10,7 +10,7 @@ export { FeatList } from '..' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-start')}; + ${css.column('align-start')}; width: 48%; height: 430px; padding-left: 1%; diff --git a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/intro_image.ts b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/intro_image.ts index 7011fa19e..c249e3749 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/intro_image.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/discuss_feat/intro_image.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import type { TActive, TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' import UpvoteSVG from '@/icons/Upvote' import CommentSVG from '@/icons/Comment' @@ -11,7 +11,7 @@ import ShareSVG from '@/icons/Share' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; flex-grow: 1; position: relative; @@ -63,7 +63,7 @@ export const ColorBlockHolder = styled(ColorBlock)` ` export const IconsWrapper = styled.div` position: absolute; - ${css.flex('align-center')}; + ${css.row('align-center')}; gap: 0 18px; bottom: -30px; right: -250px; diff --git a/src/containers/content/LandingPage/styles/feature_wall/feat_head.ts b/src/containers/content/LandingPage/styles/feature_wall/feat_head.ts index 2368972ef..e7abbab8d 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/feat_head.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/feat_head.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import type { TActive } from '@/spec' // import type { TActive, TTestable } from '@/spec' @@ -8,11 +8,11 @@ import type { TFeatType } from '../../spec' import { FEAT } from '../../constant' export const Wrapper = styled.div<{ alignRight: boolean }>` - ${css.flexColumn()}; + ${css.column()}; align-items: ${({ alignRight }) => (alignRight ? 'flex-end' : 'flex-start')}; ` export const Title = styled.div<{ featType: TFeatType }>` - ${css.flex('align-center')}; + ${css.row('align-center')}; /* color: ${({ featType }) => FEAT[featType].COLOR}; */ color: ${theme('article.title')}; font-size: 21px; diff --git a/src/containers/content/LandingPage/styles/feature_wall/feat_item.ts b/src/containers/content/LandingPage/styles/feature_wall/feat_item.ts index 9412a498d..a2d21f241 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/feat_item.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/feat_item.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import CheckSVG from '@/icons/CheckBold' @@ -9,7 +9,7 @@ import type { TFeatType } from '../../spec' import { FEAT } from '../../constant' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-left: 18px; ${css.media.mobile` diff --git a/src/containers/content/LandingPage/styles/feature_wall/help_feat/help_demo.ts b/src/containers/content/LandingPage/styles/feature_wall/help_feat/help_demo.ts index 32c6bc2bc..9c1385d0b 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/help_feat/help_demo.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/help_feat/help_demo.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ShareSVG from '@/icons/Share' import QuestionSVG from '@/icons/Question' @@ -10,7 +10,7 @@ import { Bar as BarBase } from '@/widgets/Common' import ArrowSimple from '@/icons/ArrowSimple' export const Wrapper = styled.div` - ${css.flex()}; + ${css.row()}; width: 100%; padding: 30px 40px; ` @@ -21,14 +21,14 @@ export const Sidebar = styled.div` border-right-color: ${theme('divider')}; ` export const Content = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; flex-grow: 1; width: 260px; gap: 10px; padding-left: 15px; ` export const InnerContent = styled.div` - ${css.flexColumn()}; + ${css.column()}; width: 260px; position: relative; ` @@ -41,7 +41,7 @@ export const ShareIcon = styled(ShareSVG)` ` export const Footer = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-top: 20px; width: 100%; width: 270px; @@ -65,11 +65,11 @@ export const QuestionIcon = styled(QuestionSVG)` z-index: 1; ` export const PinnedItem = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 10px; ` export const Header = styled.div` - ${css.flexColumn()}; + ${css.column()}; width: 260px; margin-top: 25px; margin-bottom: 10px; @@ -87,7 +87,7 @@ export const Cover = styled.div` opacity: 0.3; ` export const Title = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: #f9b7b6; font-weight: 600; font-size: 12px; @@ -96,7 +96,7 @@ export const GreyTitle = styled(Title)` color: ${theme('article.digest')}; ` export const TagsWrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-top: 10px; ` diff --git a/src/containers/content/LandingPage/styles/feature_wall/help_feat/index.ts b/src/containers/content/LandingPage/styles/feature_wall/help_feat/index.ts index 3e271aeaa..db63b1bdf 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/help_feat/index.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/help_feat/index.ts @@ -2,14 +2,14 @@ import styled from 'styled-components' import type { TActive, TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' type TWrapper = TActive export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 100%; height: 730px; padding: 0 12%; @@ -39,7 +39,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ } ${css.media.mobile` - ${css.flexColumn()}; + ${css.column()}; margin-top: 80px; padding: 0 18px; height: auto; @@ -50,5 +50,5 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ `}; ` export const Slogan = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` diff --git a/src/containers/content/LandingPage/styles/feature_wall/help_feat/intro_digest.ts b/src/containers/content/LandingPage/styles/feature_wall/help_feat/intro_digest.ts index ac056886d..3f5d83719 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/help_feat/intro_digest.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/help_feat/intro_digest.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' import { FEAT } from '../../../constant' @@ -10,7 +10,7 @@ export { FeatList } from '..' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-start')}; + ${css.column('align-start')}; width: 48%; height: 430px; padding-left: 12%; diff --git a/src/containers/content/LandingPage/styles/feature_wall/help_feat/intro_image.ts b/src/containers/content/LandingPage/styles/feature_wall/help_feat/intro_image.ts index 4f1596654..80ac94797 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/help_feat/intro_image.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/help_feat/intro_image.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import type { TActive, TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' import BadSVG from './BadSVG' import SoSoSVG from './SoSoSVG' @@ -11,7 +11,7 @@ import GoodSVG from './GoodSVG' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; flex-grow: 1; position: relative; @@ -53,7 +53,7 @@ export const ColorBlockHolder = styled(ColorBlock)` ` export const IconsWrapper = styled.div` position: absolute; - ${css.flex('align-center')}; + ${css.row('align-center')}; gap: 0 18px; bottom: -40px; left: -260px; diff --git a/src/containers/content/LandingPage/styles/feature_wall/index.ts b/src/containers/content/LandingPage/styles/feature_wall/index.ts index 4f1266f96..ae32efda2 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/index.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/index.ts @@ -2,17 +2,17 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 100%; height: auto; ` export const Slogan = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Title = styled.div` color: ${theme('article.title')}; @@ -43,23 +43,23 @@ export const Desc = styled.div` ` // export const Wall = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 100%; margin-top: -120px; ` export const FeatList = styled.div` - ${css.flexColumn()}; + ${css.column()}; gap: 18px 0; margin-top: 28px; ${css.media.mobile` - ${css.flex()}; + ${css.row()}; `}; ` export const MobileIntroLists = styled.div` - ${css.flex()}; + ${css.row()}; flex-wrap: wrap; gap: 16px 0; padding-left: 10px; diff --git a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/banner.ts b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/banner.ts index 871d0c9b3..203ad950f 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/banner.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/banner.ts @@ -7,17 +7,17 @@ import GtdWipSVG from '@/icons/GtdWip' import GtdDoneSVG from '@/icons/GtdDone' import GtdTodoSVG from '@/icons/GtdTodo' -import css from '@/utils/css' +import css from '@/css' export const Wrapper = styled.div` - ${css.flexColumn()}; + ${css.column()}; flex-grow: 1; width: 100%; padding: 15px 32px; position: relative; ` export const Header = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` export const Bar = styled(BarBase)` background: #c3d6f3; @@ -31,7 +31,7 @@ export const KanbenIcon = styled(KanbenSVG)` ` export const Item = styled.div<{ left: number }>` - ${css.flex('align-center')}; + ${css.row('align-center')}; position: absolute; bottom: 8px; left: ${({ left }) => `${left}px`}; diff --git a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/index.ts b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/index.ts index ce821cf24..9944612ff 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/index.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/index.ts @@ -2,12 +2,12 @@ import styled from 'styled-components' import type { TActive, TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' type TWrapper = TActive export const DesktopOnly = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; ${css.media.mobile` display: none; `}; @@ -16,7 +16,7 @@ export const DesktopOnly = styled.div` export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 100%; height: 730px; padding: 0 12%; @@ -41,7 +41,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ } ${css.media.mobile` - ${css.flexColumn()}; + ${css.column()}; margin-top: 80px; padding: 0 18px; height: auto; @@ -52,5 +52,5 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ `}; ` export const Slogan = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` diff --git a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/intro_digest.ts b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/intro_digest.ts index ab7246adb..1ad538fd2 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/intro_digest.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/intro_digest.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' import { FEAT } from '../../../constant' @@ -10,7 +10,7 @@ export { FeatList } from '..' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-start')}; + ${css.column('align-start')}; width: 48%; height: 430px; padding-left: 12%; diff --git a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/intro_image.ts b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/intro_image.ts index b0aaec6c8..ea1c71c93 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/intro_image.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/intro_image.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import type { TActive, TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' import GtdWipSVG from '@/icons/GtdWip' import GtdDoneSVG from '@/icons/GtdDone' @@ -11,10 +11,8 @@ import GtdTodoSVG from '@/icons/GtdTodo' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; flex-grow: 1; - /* width: 500px; - height: 440px; */ position: relative; ${css.media.mobile` @@ -23,7 +21,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ `}; ` export const ImageWrapper = styled.div` - ${css.flexColumn('align-end')}; + ${css.column('align-end')}; width: 600px; height: 400px; background: white; @@ -57,7 +55,7 @@ export const ColorBlockHolder = styled(ColorBlock)` ` export const IconsWrapper = styled.div` position: absolute; - ${css.flex('align-center')}; + ${css.row('align-center')}; gap: 0 15px; bottom: -38px; left: -270px; diff --git a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/kanban_demo/index.ts b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/kanban_demo/index.ts index eec156876..7201e4110 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/kanban_demo/index.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/kanban_demo/index.ts @@ -1,14 +1,14 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' export const BoardsWrapper = styled.div` - ${css.flex('justify-center', 'align-end')}; + ${css.row('justify-center', 'align-end')}; gap: 0 18px; width: 100%; ` export const Board = styled.div<{ shadow?: boolean }>` - ${css.flexColumn()}; + ${css.column()}; padding: 6px; gap: 6px; overflow: hidden; diff --git a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/kanban_demo/kanban_item.ts b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/kanban_demo/kanban_item.ts index a4ece98f1..c2d3407fd 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/kanban_demo/kanban_item.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/kanban_feat/kanban_demo/kanban_item.ts @@ -3,10 +3,10 @@ import styled from 'styled-components' import { Bar as BarBase } from '@/widgets/Common' import UpvoteSVG from '@/icons/Upvote' -import css from '@/utils/css' +import css from '@/css' export const Wrapper = styled.div<{ opacity: number }>` - ${css.flexColumn()}; + ${css.column()}; background: white; border-radius: 6px; height: 50px; @@ -19,7 +19,7 @@ export const Bar = styled(BarBase)` ` export const Footer = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` export const UpvoteIcon = styled(UpvoteSVG)` diff --git a/src/containers/content/LandingPage/styles/feature_wall/more_link.ts b/src/containers/content/LandingPage/styles/feature_wall/more_link.ts index eb5046cfd..75272e3f6 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/more_link.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/more_link.ts @@ -5,11 +5,11 @@ import Link from 'next/link' import type { TFeatType } from '../../spec' import { FEAT } from '../../constant' -import css from '@/utils/css' +import css from '@/css' import ArrowSVG from '@/icons/Arrow' export const Wrapper = styled(Link)` - ${css.flex('align-center')}; + ${css.row('align-center')}; text-decoration: none; opacity: 0.8; margin-top: 55px; @@ -21,7 +21,7 @@ export const Wrapper = styled(Link)` } ${css.media.mobile` - ${css.flex('justify-center')}; + ${css.row('justify-center')}; margin-top: 20px; transform: scale(0.9); width: 90%; diff --git a/src/containers/content/LandingPage/styles/feature_wall/user_voice.ts b/src/containers/content/LandingPage/styles/feature_wall/user_voice.ts index 6dee180fd..73895f5c7 100644 --- a/src/containers/content/LandingPage/styles/feature_wall/user_voice.ts +++ b/src/containers/content/LandingPage/styles/feature_wall/user_voice.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import type { TTestable, TColorName } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import { camelize } from '@/utils/fmt' import TreesSVG from '@/icons/Trees' @@ -10,7 +10,7 @@ import TreesSVG from '@/icons/Trees' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flex('align-both')}; + ${css.row('align-both')}; flex-wrap: wrap; gap: 40px 25px; height: auto; @@ -56,7 +56,7 @@ export const TreesIcon = styled(TreesSVG)` `}; ` export const Card = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; background: white; /* border: 1px solid; */ border-color: ${theme('divider')}; @@ -74,7 +74,7 @@ export const Card = styled.div` ` export const Avatar = styled.div<{ color: TColorName }>` ${css.circle(30)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; padding: 2px; color: ${({ color }) => theme(`baseColor.${camelize(color)}`)}; font-size: 12px; @@ -85,7 +85,7 @@ export const Avatar = styled.div<{ color: TColorName }>` ${css.media.mobile` ${css.circle(20)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; font-size: 8px; `}; ` diff --git a/src/containers/content/LandingPage/styles/index.ts b/src/containers/content/LandingPage/styles/index.ts index d2c9ae80f..9def1d09a 100644 --- a/src/containers/content/LandingPage/styles/index.ts +++ b/src/containers/content/LandingPage/styles/index.ts @@ -6,7 +6,7 @@ import type { TSpace, TTestable } from '@/spec' import Button from '@/widgets/Buttons/Button' import LinkSVG from '@/icons/LinkOutside' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import InfoSVG from '@/icons/Info' import ArrowSVG from '@/icons/ArrowSimple' @@ -16,14 +16,14 @@ type TWrapper = TTestable export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; height: 100%; width: 100%; position: relative; overflow: hidden; ` export const Banner = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; height: 700px; width: 100%; position: relative; @@ -113,13 +113,13 @@ export const InfoIcon = styled(InfoSVG)` ` export const Note = styled.div` color: ${theme('article.digest')}; - ${css.flex('align-center')}; + ${css.row('align-center')}; font-size: 13px; margin-top: 20px; ` export const ButtonGroup = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; gap: 0 22px; margin-top: 40px; margin-left: 10px; @@ -129,14 +129,14 @@ export const ButtonGroup = styled.div` `}; ` export const DemoPanel = styled.div` - ${css.flexColumn()}; + ${css.column()}; gap: 5px 0; padding: 6px 2px; width: 100px; ` export const DemoMenuItem = styled(Link)` - ${css.flex('justify-between', 'align-center')}; + ${css.row('justify-between', 'align-center')}; color: ${theme('article.title')}; font-size: 14px; padding: 2px 4px; diff --git a/src/containers/content/LandingPage/styles/tech_stacks/index.ts b/src/containers/content/LandingPage/styles/tech_stacks/index.ts index d87eb0f46..90a76b419 100644 --- a/src/containers/content/LandingPage/styles/tech_stacks/index.ts +++ b/src/containers/content/LandingPage/styles/tech_stacks/index.ts @@ -3,7 +3,7 @@ import Link from 'next/link' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' import GithubSVG from '@/icons/social/Github' @@ -11,7 +11,7 @@ import GithubSVG from '@/icons/social/Github' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 100%; ${css.media.mobile` @@ -19,7 +19,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ `}; ` export const Slogan = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Title = styled.div` color: ${theme('article.title')}; @@ -35,7 +35,7 @@ export const Title = styled.div` `}; ` export const Desc = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; font-size: 17px; color: ${theme('article.digest')}; margin-top: 12px; @@ -49,7 +49,7 @@ export const Desc = styled.div` `}; ` export const Wall = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 80%; height: 440px; margin-top: 35px; @@ -71,7 +71,7 @@ export const CADBackground = styled(Img)` `}; ` export const TechsWrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; flex-wrap: wrap; gap: 15px 50px; height: 440px; @@ -88,7 +88,7 @@ export const TechsWrapper = styled.div` `}; ` export const GithubLink = styled(Link)` - ${css.flex('align-center')}; + ${css.row('align-center')}; font-size: 18px; font-weight: 500; text-decoration: none; diff --git a/src/containers/content/LandingPage/styles/tech_stacks/tech_item.ts b/src/containers/content/LandingPage/styles/tech_stacks/tech_item.ts index 37556f247..3c36d11f9 100644 --- a/src/containers/content/LandingPage/styles/tech_stacks/tech_item.ts +++ b/src/containers/content/LandingPage/styles/tech_stacks/tech_item.ts @@ -1,14 +1,14 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' export const Wrapper = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const IconWrapper = styled.div` ${css.size(50)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; ${css.media.mobile` ${css.size(30)}; diff --git a/src/containers/content/LandingPage/styles/users_wall/card.ts b/src/containers/content/LandingPage/styles/users_wall/card.ts index 9fb4a46db..effffad70 100644 --- a/src/containers/content/LandingPage/styles/users_wall/card.ts +++ b/src/containers/content/LandingPage/styles/users_wall/card.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import type { TColorName } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import { camelize } from '@/utils/fmt' import Img from '@/Img' @@ -27,7 +27,7 @@ export const Wrapper = styled.div` ` export const Header = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 10px; ` diff --git a/src/containers/content/LandingPage/styles/users_wall/index.ts b/src/containers/content/LandingPage/styles/users_wall/index.ts index b9472f3bc..0ce0d0aac 100644 --- a/src/containers/content/LandingPage/styles/users_wall/index.ts +++ b/src/containers/content/LandingPage/styles/users_wall/index.ts @@ -2,16 +2,16 @@ import styled from 'styled-components' import type { TColorName, TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 100%; ` export const Slogan = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Title = styled.div` color: ${theme('article.title')}; @@ -42,7 +42,7 @@ export const Desc = styled.div` ` // export const Wall = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; margin-top: 80px; width: 100%; height: auto; diff --git a/src/containers/content/LandingPage/styles/wallpaper_bar/index.ts b/src/containers/content/LandingPage/styles/wallpaper_bar/index.ts index a7e0ffd98..0de9af83f 100644 --- a/src/containers/content/LandingPage/styles/wallpaper_bar/index.ts +++ b/src/containers/content/LandingPage/styles/wallpaper_bar/index.ts @@ -1,14 +1,14 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { animate, theme } from '@/utils/css' +import css, { animate, theme } from '@/css' import { LineDivider } from '@/widgets/Common' import ThemeSVG from '@/icons/Theme' export const Wrapper = styled.div` - ${css.flexColumn('align-both')} + ${css.column('align-both')} width: 100%; margin-top: 60px; @@ -17,7 +17,7 @@ export const Wrapper = styled.div` `}; ` export const MainWrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; gap: 0 18px; ${css.media.mobile` @@ -25,7 +25,7 @@ export const MainWrapper = styled.div` `}; ` export const Desc = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.digest')}; margin-top: 25px; font-size: 12px; @@ -38,7 +38,7 @@ export const Desc = styled.div` ` export const BallWrapper = styled.div` ${css.size(30)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; border-radius: 100%; border: 1px solid; border-color: ${({ $active }) => ($active ? theme('article.digest') : 'transparent')}; diff --git a/src/containers/content/LandingPage/styles/wallpaper_bar/layout_ball.ts b/src/containers/content/LandingPage/styles/wallpaper_bar/layout_ball.ts index 5ce0484d6..4993afc2b 100644 --- a/src/containers/content/LandingPage/styles/wallpaper_bar/layout_ball.ts +++ b/src/containers/content/LandingPage/styles/wallpaper_bar/layout_ball.ts @@ -1,13 +1,13 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Layout1SVG from './Layout1' import Layout2SVG from './Layout2' export const Wrapper = styled.div` ${css.size(26)}; - ${css.flex('align-both')} + ${css.row('align-both')} border-radius: 5px; background: ${theme('hoverBg')}; border: 1px solid; diff --git a/src/containers/content/UserContent/styles/index.ts b/src/containers/content/UserContent/styles/index.ts index d8b8bf40b..a7ce9cf4f 100755 --- a/src/containers/content/UserContent/styles/index.ts +++ b/src/containers/content/UserContent/styles/index.ts @@ -1,15 +1,15 @@ import styled from 'styled-components' import type { TMetric } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; width: 100%; overflow-x: hidden; ` export const InnerWrapper = styled.div<{ metric: TMetric }>` - ${css.flex()}; + ${css.row()}; width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; @@ -40,8 +40,7 @@ export const ContentWrapper = styled.div<{ hasContentBg: boolean }>` padding: 20px; padding-top: 15px; - background: ${({ hasContentBg }) => - hasContentBg ? theme('thread.bg') : 'transparent'}; + background: ${({ hasContentBg }) => (hasContentBg ? theme('thread.bg') : 'transparent')}; ${css.media.mobile` padding: 0; diff --git a/src/containers/content/UserContent/styles/mobile_banner.ts b/src/containers/content/UserContent/styles/mobile_banner.ts index 5acaed763..b987a9fa2 100755 --- a/src/containers/content/UserContent/styles/mobile_banner.ts +++ b/src/containers/content/UserContent/styles/mobile_banner.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; width: 100%; padding: 20px; ` diff --git a/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts b/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts index ad797a447..c29730aec 100755 --- a/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts +++ b/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts @@ -1,9 +1,9 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-top: 10px; color: ${theme('banner.desc')}; flex-wrap: wrap; diff --git a/src/containers/content/UserContent/styles/sidebar/index.ts b/src/containers/content/UserContent/styles/sidebar/index.ts index 21dba8d90..15775fb11 100755 --- a/src/containers/content/UserContent/styles/sidebar/index.ts +++ b/src/containers/content/UserContent/styles/sidebar/index.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' import Img from '@/Img' export const Wrapper = styled.div` position: relative; - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; width: 300px; min-width: 300px; padding-right: 40px; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/back_to.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/back_to.ts index 2923812c8..4a548cdc3 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/back_to.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/back_to.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' import Link from 'next/link' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ArrowSVG from '@/icons/Arrow' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; position: absolute; left: -180px; top: 50px; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/changelog_layout.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/changelog_layout.ts index f2dcd9565..f0ac8e5d8 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/changelog_layout.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/changelog_layout.ts @@ -3,27 +3,27 @@ import styled from 'styled-components' import type { TMetric } from '@/spec' import METRIC from '@/constant/metric' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' import ArrowSVG from '@/icons/Arrow' import DotDivider from '@/widgets/DotDivider' export const Wrapper = styled.div<{ metric: TMetric }>` - ${css.flexColumn('align-start')}; + ${css.column('align-start')}; margin-left: 20px; margin-top: 50px; position: relative; ` export const Topping = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; margin-left: -2px; margin-bottom: 16px; margin-top: -5px; position: relative; ` export const BackBtnWrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; padding: 2px 5px; border-radius: 8px; color: ${theme('article.digest')}; @@ -47,7 +47,7 @@ export const ArrowIcon = styled(ArrowSVG)` } ` export const CommunityInfo = styled.div` - ${css.flex('align-start', 'justify-center')}; + ${css.row('align-start', 'justify-center')}; margin-top: 5px; ${css.fitStickerWidth(METRIC.ARTICLE)}; ` @@ -79,7 +79,7 @@ export const SubTitle = styled.span` } ` export const BottomInfo = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; padding-bottom: 30px; width: 100%; @@ -91,7 +91,7 @@ export const Avatar = styled(Img)` margin-right: 8px; ` export const AuthorName = styled(Link)` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.digest')}; text-decoration: none; font-size: 14px; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts index 3bd5bbbbe..6a4664dd2 100755 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts @@ -1,14 +1,14 @@ import styled from 'styled-components' import type { TTestable, TMetric, TActive } from '@/spec' -import css, { theme, zIndex } from '@/utils/css' +import css, { theme, zIndex } from '@/css' import Img from '@/Img' type TWrapper = TTestable & TActive export const Wrapper = styled.nav.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flex('justify-center')}; + ${css.row('justify-center')}; top: ${({ show }) => (show ? 0 : '-48px;')}; opacity: ${({ show }) => (show ? 1 : 0)}; z-index: ${({ show }) => (show ? zIndex.articleFixedHeader : -1)}; @@ -23,7 +23,7 @@ export const Wrapper = styled.nav.attrs(({ testid }) => ({ transition-timing-function: ease-out; ` export const InnerWrapper = styled.div<{ metric: TMetric }>` - ${css.flex('align-both')}; + ${css.row('align-both')}; /* background: white; */ background: radial-gradient(circle, rgb(255 255 255) 15%, rgb(255 255 255 / 0%) 56%), radial-gradient(circle, rgb(255 255 255 / 53%) 30%, transparent 68%); @@ -39,7 +39,7 @@ export const InnerWrapper = styled.div<{ metric: TMetric }>` padding-left: 0; ` export const ContentWrapper = styled.div<{ metric: TMetric }>` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 100%; height: 100%; padding: 0 200px; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/header.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/header.ts index 2cffc947b..950959c36 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/header.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/header.ts @@ -2,27 +2,27 @@ import styled from 'styled-components' import Link from 'next/link' import type { TMetric } from '@/spec' -import css, { theme, WIDTH } from '@/utils/css' +import css, { theme, WIDTH } from '@/css' import AccountSVG from '@/icons/Acount' import Img from '@/Img' export const Wrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; position: relative; background: transparent; max-width: ${WIDTH.ARTICLE.PAGE}; width: 100%; ` export const InnerWrapper = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 78%; height: 54px; padding-top: 2px; margin-left: -50px; ` export const Community = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; width: 100px; ` export const CommunityLogo = styled(Img)` @@ -36,7 +36,7 @@ export const CommunityTitle = styled.div` ` export const Main = styled.div<{ metric: TMetric }>` - ${css.flex('align-both')}; + ${css.row('align-both')}; gap: 0 32px; width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; @@ -99,7 +99,7 @@ export const MobileNaviWrapper = styled.div` display: none; ${css.media.mobile` - ${css.flexGrow('align-center')}; + ${css.rowGrow('align-center')}; margin-left: 10px; `} ` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts index de319dd8d..7aa9c79c6 100755 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TTestable, TMetric } from '@/spec' -import css, { WIDTH, theme } from '@/utils/css' +import css, { WIDTH, theme } from '@/css' import { getDigestHeight } from './metric' @@ -9,7 +9,7 @@ type TWrapper = { metric: TMetric } & TTestable export const Wrapper = styled.nav.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('justify-start')}; + ${css.column('justify-start')}; position: relative; background: transparent; min-height: ${({ metric }) => getDigestHeight(metric)}; @@ -24,7 +24,7 @@ export const InnerWrapper = styled.div` width: 100%; ` export const BannerContent = styled.div` - ${css.flex('justify-center')}; + ${css.row('justify-center')}; width: calc(100% - 360px); margin-left: 180px; border-bottom: 1px solid; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout.ts index 4ae4ec936..ea9d5edb1 100755 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout.ts @@ -3,14 +3,14 @@ import styled from 'styled-components' import type { TMetric } from '@/spec' import METRIC from '@/constant/metric' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' import ArrowSVG from '@/icons/Arrow' import DotDivider from '@/widgets/DotDivider' export const Wrapper = styled.div<{ metric: TMetric }>` - ${css.flex('align-start', 'justify-between')}; + ${css.row('align-start', 'justify-between')}; width: 100%; margin-top: 50px; position: relative; @@ -26,14 +26,14 @@ export const RightPart = styled.div` padding-right: 15px; ` export const Topping = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; margin-left: -2px; margin-bottom: 16px; margin-top: -5px; position: relative; ` export const BackBtnWrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; padding: 2px 5px; border-radius: 8px; color: ${theme('article.digest')}; @@ -57,7 +57,7 @@ export const ArrowIcon = styled(ArrowSVG)` } ` export const CommunityInfo = styled.div` - ${css.flex('align-start', 'justify-center')}; + ${css.row('align-start', 'justify-center')}; margin-top: 5px; ${css.fitStickerWidth(METRIC.ARTICLE)}; ` @@ -89,7 +89,7 @@ export const SubTitle = styled.span` } ` export const BottomInfo = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; padding-bottom: 30px; width: 100%; @@ -101,7 +101,7 @@ export const Avatar = styled(Img)` margin-right: 8px; ` export const AuthorName = styled(Link)` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.digest')}; text-decoration: none; font-size: 14px; diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/back_to.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/back_to.ts index 2923812c8..4a548cdc3 100644 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/back_to.ts +++ b/src/containers/digest/ArticleDigest/styles/mobile_view/back_to.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' import Link from 'next/link' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ArrowSVG from '@/icons/Arrow' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; position: absolute; left: -180px; top: 50px; diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/fixed_header.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/fixed_header.ts index 3101f64cb..47e738726 100644 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/fixed_header.ts +++ b/src/containers/digest/ArticleDigest/styles/mobile_view/fixed_header.ts @@ -1,14 +1,14 @@ import styled from 'styled-components' import type { TTestable, TMetric, TActive } from '@/spec' -import css, { theme, zIndex } from '@/utils/css' +import css, { theme, zIndex } from '@/css' import Img from '@/Img' type TWrapper = TTestable & TActive export const Wrapper = styled.nav.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flex('justify-center')}; + ${css.row('justify-center')}; top: ${({ show }) => (show ? 0 : '-48px;')}; opacity: ${({ show }) => (show ? 1 : 0)}; z-index: ${({ show }) => (show ? zIndex.articleFixedHeader : -1)}; @@ -23,7 +23,7 @@ export const Wrapper = styled.nav.attrs(({ testid }) => ({ transition-timing-function: ease-out; ` export const InnerWrapper = styled.div<{ metric: TMetric }>` - ${css.flex('align-both')}; + ${css.row('align-both')}; /* background: white; */ background: radial-gradient(circle, rgb(255 255 255) 15%, rgb(255 255 255 / 0%) 56%), radial-gradient(circle, rgb(255 255 255 / 53%) 30%, transparent 68%); @@ -45,7 +45,7 @@ export const InnerWrapper = styled.div<{ metric: TMetric }>` `}; ` export const ContentWrapper = styled.div<{ metric: TMetric }>` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 100%; height: 100%; ${({ metric }) => css.fitContentWidth(metric)}; diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/header.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/header.ts index e87cb21be..898eaa6c3 100644 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/header.ts +++ b/src/containers/digest/ArticleDigest/styles/mobile_view/header.ts @@ -2,13 +2,13 @@ import styled from 'styled-components' import Link from 'next/link' import type { TMetric } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import AccountSVG from '@/icons/Acount' import Img from '@/Img' export const Wrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; position: relative; background: transparent; width: 100%; @@ -16,7 +16,7 @@ export const Wrapper = styled.div` export const InnerWrapper = styled.div` display: none; ${css.media.mobile` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 100%; height: 40px; padding: 0 20px; @@ -25,7 +25,7 @@ export const InnerWrapper = styled.div` `}; ` export const Community = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; width: 100px; ` export const CommunityLogo = styled(Img)` @@ -39,7 +39,7 @@ export const CommunityTitle = styled.div` ` export const Main = styled.div<{ metric: TMetric }>` - ${css.flex('align-both')}; + ${css.row('align-both')}; gap: 0 32px; width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; @@ -102,7 +102,7 @@ export const MobileNaviWrapper = styled.div` display: none; ${css.media.mobile` - ${css.flexGrow('align-center')}; + ${css.rowGrow('align-center')}; margin-left: 10px; `} ` diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts index 8fa4efcec..d8e0df67d 100755 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts +++ b/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts @@ -1,13 +1,13 @@ import styled from 'styled-components' import type { TTestable, TMetric } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' type TWrapper = { metric: TMetric } & TTestable export const Wrapper = styled.nav.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('justify-center')}; + ${css.column('justify-center')}; position: relative; background: transparent; border-bottom: ${theme('banner.spliter')}; @@ -21,6 +21,6 @@ export const InnerWrapper = styled.div` width: 100%; ` export const BannerContent = styled.div` - ${css.flex('justify-center')}; + ${css.row('justify-center')}; width: 100%; ` diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/post_layout.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/post_layout.ts index 40fcbc218..6ddab5ab5 100755 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/post_layout.ts +++ b/src/containers/digest/ArticleDigest/styles/mobile_view/post_layout.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import type { TMetric } from '@/spec' import METRIC from '@/constant/metric' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import DotDivider from '@/widgets/DotDivider' @@ -20,7 +20,7 @@ export const Wrapper = styled.div<{ metric: TMetric }>` `}; ` export const Topping = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 14px; position: relative; @@ -33,7 +33,7 @@ export const PublishDateInfo = styled.div` color: ${theme('article.digest')}; ` export const CommunityInfo = styled.div` - ${css.flex('align-start', 'justify-center')}; + ${css.row('align-start', 'justify-center')}; margin-top: 5px; ${css.fitStickerWidth(METRIC.ARTICLE)}; ` @@ -49,7 +49,7 @@ export const Title = styled.div` `}; ` export const BottomInfo = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; padding-bottom: 30px; border-bottom: 1px solid; padding-left: 2px; diff --git a/src/containers/digest/CommunityDigest/SimpleLayout/AccountUnit.tsx b/src/containers/digest/CommunityDigest/SimpleLayout/AccountUnit.tsx index a32a3ec2a..498240d96 100755 --- a/src/containers/digest/CommunityDigest/SimpleLayout/AccountUnit.tsx +++ b/src/containers/digest/CommunityDigest/SimpleLayout/AccountUnit.tsx @@ -1,15 +1,11 @@ import { FC, memo } from 'react' -import Link from 'next/link' - import type { TCommunity } from '@/spec' import useAccount from '@/hooks/useAccount' -import { ROUTE } from '@/constant/route' -// import { callSubscriber, callAuth } from '@/utils/signal' import { callAuth } from '@/utils/signal' -import { Wrapper, DashboardIcon, Avatar, AccountIcon } from '../styles/simple_layout/account_unit' +import { Wrapper, Avatar, AccountIcon, GithubItem } from '../styles/simple_layout/account_unit' type TProps = { community: TCommunity @@ -24,9 +20,18 @@ const AccountUnit: FC = ({ community }) => { 订阅 */} - + + {/* */} + {/*
19.5k
*/} + GitHub Repo stars + + + {/* - + */} {/*
diff --git a/src/containers/digest/CommunityDigest/SimpleLayout/ThreadTab.tsx b/src/containers/digest/CommunityDigest/SimpleLayout/ThreadTab.tsx index 53c4de5c8..f3f8abe31 100755 --- a/src/containers/digest/CommunityDigest/SimpleLayout/ThreadTab.tsx +++ b/src/containers/digest/CommunityDigest/SimpleLayout/ThreadTab.tsx @@ -1,9 +1,13 @@ import { FC, memo } from 'react' -import { reject } from 'ramda' +import { reject, find } from 'ramda' import type { TCommunityThread, TLinkItem, TSpace, THeaderLayout } from '@/spec' import { THREAD } from '@/constant/thread' import { HEADER_LAYOUT } from '@/constant/layout' +import { MORE_GROUP } from '@/constant/dashboard' + +import useCurCommunity from '@/hooks/useCurCommunity' +import useAccount from '@/hooks/useAccount' import ExtraLinks from '@/widgets/ExtraLinks/SimpleLayout' @@ -17,18 +21,44 @@ type TProps = { } & TSpace const ThreadTab: FC = ({ active, threads, extraLinks, headerLayout, ...restProps }) => { - const isAboutFold = extraLinks.length >= 2 && extraLinks[0].title !== '' - const _threads = isAboutFold - ? reject((t: TCommunityThread) => t.slug === THREAD.ABOUT, threads) - : threads + const curCommunity = useCurCommunity() + const { isModerator } = useAccount() + + const hasExtraLinks = extraLinks.length >= 2 && extraLinks[0].title !== '' + const isAboutFold = hasExtraLinks + + const _threads = + isAboutFold || isModerator + ? reject((t: TCommunityThread) => t.slug === THREAD.ABOUT, threads) + : threads const Wrapper = headerLayout === HEADER_LAYOUT.FLOAT ? FloatWrapper : NormalWrapper + const hasExtraAbout = find((link) => link.title === '关于', extraLinks) + + const aboutLink = !hasExtraAbout + ? { + index: 999, + title: '关于', + group: MORE_GROUP, + link: `/${curCommunity.slug}/about`, + } + : { title: '', index: 0 } + + const dashboardLink = { + index: 1000, + title: '控制台', + group: MORE_GROUP, + link: `/${curCommunity.slug}/dashboard`, + } + + const _extraLinks = isModerator ? [...extraLinks, aboutLink, dashboardLink] : extraLinks + return ( {_threads.map((item) => ( = ({ active, threads, extraLinks, headerLayout, ...r ))} - + ) } diff --git a/src/containers/digest/CommunityDigest/SimpleLayout/index.tsx b/src/containers/digest/CommunityDigest/SimpleLayout/index.tsx index 919d70040..5ae91efe2 100755 --- a/src/containers/digest/CommunityDigest/SimpleLayout/index.tsx +++ b/src/containers/digest/CommunityDigest/SimpleLayout/index.tsx @@ -45,8 +45,17 @@ const SimpleLayout: FC = ({ const washedThreads = washThreads(community.threads, dashboardSettings) const { extraLinks } = dashboardSettings + // console.log('## dashboardSettings: ', dashboardSettings.nameAlias) + // console.log('## washedThreads: ', washedThreads) + // console.log('## community.threads: ', community.threads) + return ( - + @@ -64,7 +73,7 @@ const SimpleLayout: FC = ({ active={activeThread} extraLinks={extraLinks} headerLayout={headerLayout} - left={headerLayout === HEADER_LAYOUT.CENTER ? -50 : 0} + left={headerLayout === HEADER_LAYOUT.CENTER ? 4 : 0} right={headerLayout === HEADER_LAYOUT.RIGHT ? 20 : 0} /> diff --git a/src/containers/digest/CommunityDigest/styles/classic_layout/account_unit.ts b/src/containers/digest/CommunityDigest/styles/classic_layout/account_unit.ts index aae149d40..d8c1db0cd 100755 --- a/src/containers/digest/CommunityDigest/styles/classic_layout/account_unit.ts +++ b/src/containers/digest/CommunityDigest/styles/classic_layout/account_unit.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Button from '@/widgets/Buttons/Button' import Img from '@/Img' @@ -9,7 +9,7 @@ import DashboardSVG from '@/icons/Dashboard' import SearchSVG from '@/icons/HeaderSearch' export const Wrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; color: ${theme('article.digest')}; margin-right: 10px; margin-top: 15px; @@ -17,7 +17,7 @@ export const Wrapper = styled.div` ` export const Avatar = styled(Img)` ${css.circle(20)}; - ${css.flex('justify-between')}; + ${css.row('justify-between')}; ` export const SubscribeButton = styled(Button)` margin-right: 18px; diff --git a/src/containers/digest/CommunityDigest/styles/classic_layout/community_brief.ts b/src/containers/digest/CommunityDigest/styles/classic_layout/community_brief.ts index be2970c91..2c1c54f8e 100755 --- a/src/containers/digest/CommunityDigest/styles/classic_layout/community_brief.ts +++ b/src/containers/digest/CommunityDigest/styles/classic_layout/community_brief.ts @@ -1,13 +1,13 @@ import styled from 'styled-components' import Link from 'next/link' -import css, { WIDTH, theme } from '@/utils/css' +import css, { WIDTH, theme } from '@/css' import Img from '@/Img' import ArrowSVG from '@/icons/Arrow' export const Wrapper = styled.div` - ${css.flexColumnGrow('align-center')}; + ${css.columnGrow('align-center')}; ` export const CoverImage = styled(Img)` width: 100%; @@ -30,7 +30,7 @@ export const LogoWrapper = styled.div` ${css.size(100)}; margin-top: -50px; z-index: 2; - ${css.flex('align-both')}; + ${css.row('align-both')}; border-radius: 5px; background: white; box-shadow: ${css.cardShadow}; @@ -39,21 +39,21 @@ export const Logo = styled(Img)` ${css.size(60)}; ` export const CommunityInfo = styled.div` - ${css.flexColumn('justify-center')}; + ${css.column('justify-center')}; margin-top: 18px; ` export const Title = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.title')}; font-size: 22px; font-weight: 600; ` export const Digest = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-top: 6px; ` export const BackHome = styled(Link)` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.digest')}; ` export const Divider = styled.div` diff --git a/src/containers/digest/CommunityDigest/styles/classic_layout/index.ts b/src/containers/digest/CommunityDigest/styles/classic_layout/index.ts index 104c92ce2..56fc08843 100755 --- a/src/containers/digest/CommunityDigest/styles/classic_layout/index.ts +++ b/src/containers/digest/CommunityDigest/styles/classic_layout/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TMetric } from '@/spec' -import css, { WIDTH, theme } from '@/utils/css' +import css, { WIDTH, theme } from '@/css' import { BaseBanner } from '../index' @@ -22,7 +22,7 @@ export const Wrapper = styled(BaseBanner)` min-height: ${({ isMobile }) => getMinHeight(isMobile)}; ` export const InnerWrapper = styled.div` - ${css.flex('justify-center')}; + ${css.row('justify-center')}; min-height: ${({ isMobile }) => getMinHeight(isMobile)}; width: 100%; // if use margin-left will cause horizontal scrollbar @@ -35,15 +35,15 @@ export const InnerWrapper = styled.div` `}; ` export const BaseBannerContent = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; width: 100%; max-width: ${WIDTH.COMMUNITY.PAGE}; ` export const BannerContentWrapper = styled(BaseBannerContent)` - ${css.flexColumn()}; + ${css.column()}; ` export const TabBarWrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; width: 100%; max-width: ${WIDTH.COMMUNITY.CONTENT}; margin-left: 85px; @@ -69,7 +69,7 @@ export const CustomPart = styled.div` /* color: #f8604e; */ ` export const CommunityBaseInfo = styled.div` - ${css.flex('justify-between', 'align-start')}; + ${css.row('justify-between', 'align-start')}; width: 100%; ${css.media.mobile` diff --git a/src/containers/digest/CommunityDigest/styles/index.ts b/src/containers/digest/CommunityDigest/styles/index.ts index 2b11a16a9..5d206ca6a 100755 --- a/src/containers/digest/CommunityDigest/styles/index.ts +++ b/src/containers/digest/CommunityDigest/styles/index.ts @@ -1,17 +1,17 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' export const BaseBanner = styled.nav.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('justify-center', 'align-center')}; + ${css.column('justify-center', 'align-center')}; position: relative; min-height: 108px; ` export const BaseTabber = styled.div` - ${css.flex()}; + ${css.row()}; position: absolute; bottom: 0; diff --git a/src/containers/digest/CommunityDigest/styles/sidebar_layout/account_unit.ts b/src/containers/digest/CommunityDigest/styles/sidebar_layout/account_unit.ts index aae149d40..d8c1db0cd 100644 --- a/src/containers/digest/CommunityDigest/styles/sidebar_layout/account_unit.ts +++ b/src/containers/digest/CommunityDigest/styles/sidebar_layout/account_unit.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Button from '@/widgets/Buttons/Button' import Img from '@/Img' @@ -9,7 +9,7 @@ import DashboardSVG from '@/icons/Dashboard' import SearchSVG from '@/icons/HeaderSearch' export const Wrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; color: ${theme('article.digest')}; margin-right: 10px; margin-top: 15px; @@ -17,7 +17,7 @@ export const Wrapper = styled.div` ` export const Avatar = styled(Img)` ${css.circle(20)}; - ${css.flex('justify-between')}; + ${css.row('justify-between')}; ` export const SubscribeButton = styled(Button)` margin-right: 18px; diff --git a/src/containers/digest/CommunityDigest/styles/sidebar_layout/community_brief.ts b/src/containers/digest/CommunityDigest/styles/sidebar_layout/community_brief.ts index 63c2d9c16..16f16e030 100644 --- a/src/containers/digest/CommunityDigest/styles/sidebar_layout/community_brief.ts +++ b/src/containers/digest/CommunityDigest/styles/sidebar_layout/community_brief.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' -import css, { WIDTH, theme } from '@/utils/css' +import css, { WIDTH, theme } from '@/css' import ArrowSVG from '@/icons/Arrow' import CommunityFaceLogo from '@/widgets/CommunityFaceLogo' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; ` export const MainWrapper = styled.div` width: 100%; @@ -18,24 +18,24 @@ export const LogoWrapper = styled.div` position: relative; ${css.size(30)}; z-index: 2; - ${css.flex('align-both')}; + ${css.row('align-both')}; margin-top: 20px; ` export const Logo = styled(CommunityFaceLogo)` ${css.size(30)}; ` export const CommunityInfo = styled.div` - ${css.flexColumn('justify-center')}; + ${css.column('justify-center')}; margin-top: 14px; ` export const Title = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.title')}; font-size: 18px; font-weight: 600; ` export const Digest = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` export const ArrowIcon = styled(ArrowSVG)` ${css.size(10)}; diff --git a/src/containers/digest/CommunityDigest/styles/sidebar_layout/index.ts b/src/containers/digest/CommunityDigest/styles/sidebar_layout/index.ts index b28ac6bd2..321d642a7 100644 --- a/src/containers/digest/CommunityDigest/styles/sidebar_layout/index.ts +++ b/src/containers/digest/CommunityDigest/styles/sidebar_layout/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TMetric } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import { SexyDivider } from '@/widgets/Common' @@ -26,7 +26,7 @@ export const Wrapper = styled(BaseBanner)` border-image-slice: 1; ` export const TabBarWrapper = styled.div` - ${css.flex('align-center', 'justify-start')}; + ${css.row('align-center', 'justify-start')}; margin-left: 42px; margin-top: 20px; ` diff --git a/src/containers/digest/CommunityDigest/styles/sidebar_layout/main_menu.ts b/src/containers/digest/CommunityDigest/styles/sidebar_layout/main_menu.ts index e878c40ea..4c7c890ca 100644 --- a/src/containers/digest/CommunityDigest/styles/sidebar_layout/main_menu.ts +++ b/src/containers/digest/CommunityDigest/styles/sidebar_layout/main_menu.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import Link from 'next/link' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' // import Img from '@/Img' import LinkOutSVG from '@/icons/LinkOut' @@ -15,13 +15,13 @@ import InfoSVG from '@/icons/Info' import GuideSVG from '@/icons/Guide' export const Wrapper = styled.div` - ${css.flexColumn()}; + ${css.column()}; width: 100%; margin-top: 10px; padding: 5px 40px; ` export const MenuItem = styled(Link)` - ${css.flex('align-center')}; + ${css.row('align-center')}; width: 160px; text-decoration: none; height: 30px; @@ -43,7 +43,7 @@ export const MenuItem = styled(Link)` export const IconWrapper = styled.div` ${css.size(16)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; ` export const HomeIcon = styled(HomeSVG)` ${css.size(13)}; diff --git a/src/containers/digest/CommunityDigest/styles/simple_layout/account_unit.ts b/src/containers/digest/CommunityDigest/styles/simple_layout/account_unit.ts index ae7185a94..ed17b1147 100755 --- a/src/containers/digest/CommunityDigest/styles/simple_layout/account_unit.ts +++ b/src/containers/digest/CommunityDigest/styles/simple_layout/account_unit.ts @@ -1,6 +1,7 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' +import Link from 'next/link' import Button from '@/widgets/Buttons/Button' import Img from '@/Img' @@ -8,12 +9,12 @@ import NotifySVG from '@/icons/Notify' import DashboardSVG from '@/icons/Dashboard' import AccountSVG from '@/icons/Acount' +import GithubSVG from '@/icons/Github8' + export const Wrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; color: ${theme('article.digest')}; - margin-right: 14px; - font-weight: 600; - margin-top: 0; + margin-bottom: 1px; ${css.media.mobile` margin-right: 0; @@ -21,7 +22,7 @@ export const Wrapper = styled.div` ` export const Avatar = styled(Img)` ${css.circle(18)}; - ${css.flex('justify-between')}; + ${css.row('justify-between')}; ` export const SubscribeButton = styled(Button)` margin-right: 18px; @@ -43,13 +44,39 @@ export const NotifyIcon = styled(NotifySVG)` fill: ${theme('article.digest')}; ${css.size(16)}; margin-right: 18px; +` - ${hoverEffect} +export const GithubItem = styled(Link)` + ${css.row('align-center')}; + text-decoration: none; + gap: 0 8px; + font-size: 14px; + margin-right: 25px; + color: ${theme('article.title')}; + opacity: 0.6; + + img { + transform: scale(1.15); + } + + &:hover { + text-decoration: none; + opacity: 0.85; + cursor: pointer; + } + + transition: all 0.2s; ` + +export const GithubIcon = styled(GithubSVG)` + ${css.size(15)}; + fill: ${theme('article.digest')}; +` + export const DashboardIcon = styled(DashboardSVG)` fill: ${theme('article.digest')}; - ${css.size(15)}; - margin-right: 16px; + ${css.size(14)}; + margin-right: 5px; ${hoverEffect} @@ -57,6 +84,22 @@ export const DashboardIcon = styled(DashboardSVG)` display: none; `}; ` + +export const DashboardLink = styled(Link)` + ${css.row('align-center')}; + color: ${theme('article.digest')}; + text-decoration: none; + margin-right: 16px; + font-weight: 400; + font-size: 14px; + ${hoverEffect} + + &:hover { + text-decoration: none; + color: ${theme('article.title')}; + } +` + export const AccountIcon = styled(AccountSVG)` fill: ${theme('article.digest')}; ${css.size(14)}; diff --git a/src/containers/digest/CommunityDigest/styles/simple_layout/community_brief.ts b/src/containers/digest/CommunityDigest/styles/simple_layout/community_brief.ts index 7ac54ed4d..79a6f3795 100755 --- a/src/containers/digest/CommunityDigest/styles/simple_layout/community_brief.ts +++ b/src/containers/digest/CommunityDigest/styles/simple_layout/community_brief.ts @@ -1,10 +1,10 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; transition: all 0.2s; width: 200px; @@ -21,14 +21,14 @@ export const Logo = styled(Img)` ${css.size(20)}; ` export const CommunityInfo = styled.div` - ${css.flexColumn('justify-center')}; + ${css.column('justify-center')}; margin-left: 10px; ` export const TitleWrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` export const Title = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.digest')}; font-size: 16px; font-weight: 600; diff --git a/src/containers/digest/CommunityDigest/styles/simple_layout/index.ts b/src/containers/digest/CommunityDigest/styles/simple_layout/index.ts index 532fd0729..c7a8fe6cb 100755 --- a/src/containers/digest/CommunityDigest/styles/simple_layout/index.ts +++ b/src/containers/digest/CommunityDigest/styles/simple_layout/index.ts @@ -1,8 +1,7 @@ import styled from 'styled-components' import type { THeaderLayout, TMetric } from '@/spec' -import css, { WIDTH, theme } from '@/utils/css' -import { pixelAdd } from '@/utils/dom' +import css, { theme } from '@/css' import { BaseBanner } from '../index' import { HEADER_LAYOUT } from '@/constant/layout' @@ -15,6 +14,7 @@ export const Wrapper = styled(BaseBanner)` width: 100%; min-height: ${({ headerLayout }) => (headerLayout === HEADER_LAYOUT.FLOAT ? '74px' : '64px')}; background: transparent; + ${({ metric }) => css.fitPageWidth(metric)}; border-bottom: ${({ headerLayout }) => headerLayout === HEADER_LAYOUT.FLOAT ? 'none' : '1px solid transparent'}; @@ -34,14 +34,12 @@ export const Wrapper = styled(BaseBanner)` `}; ` export const InnerWrapper = styled.div` - ${css.flex('justify-center')}; + ${css.row('justify-center')}; /* padding-top: 10px; */ margin-bottom: 8px; width: 100%; // if use margin-left will cause horizontal scrollbar - // 70 是经典布局为缩小帖子列表"视觉宽度"手动缩小的值 - padding-left: ${pixelAdd(WIDTH.COMMUNITY.CONTENT_OFFSET, 70)}; - ${({ metric }) => css.fitPageWidth(metric)}; + ${({ metric }) => css.fitContentWidth(metric)}; transition: min-height 0.25s; ${css.media.mobile` @@ -49,9 +47,8 @@ export const InnerWrapper = styled.div` `}; ` export const BaseBannerContent = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; width: 100%; - max-width: ${WIDTH.COMMUNITY.CONTENT}; ${css.media.mobile` padding-left: 18px; @@ -59,14 +56,14 @@ export const BaseBannerContent = styled.div` `}; ` export const BannerContentWrapper = styled(BaseBannerContent)` - ${css.flexColumn('justify-between')}; + ${css.column('justify-between')}; align-items: 'center'; ` export const BannerContainer = styled(BaseBanner)` /* min-height: 125px; */ ` export const CommunityBaseInfo = styled.div` - ${css.flex('justify-between', 'align-center')}; + ${css.row('justify-between', 'align-center')}; width: 100%; padding-top: 10px; ` @@ -75,6 +72,6 @@ export const MobileNaviWrapper = styled.div` display: none; ${css.media.mobile` - ${css.flexGrow()}; + ${css.rowGrow()}; `}; ` diff --git a/src/containers/digest/CommunityDigest/styles/simple_layout/thread_tab.ts b/src/containers/digest/CommunityDigest/styles/simple_layout/thread_tab.ts index 18c633e29..eb771e85c 100755 --- a/src/containers/digest/CommunityDigest/styles/simple_layout/thread_tab.ts +++ b/src/containers/digest/CommunityDigest/styles/simple_layout/thread_tab.ts @@ -2,11 +2,11 @@ import Link from 'next/link' import styled from 'styled-components' import type { TActive, TSpace } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const NormalWrapper = styled.div` - ${css.flex('align-center')}; - gap: 0 32px; + ${css.row('align-center')}; + gap: 0 16px; ${(props) => css.spaceMargins(props)}; @@ -30,13 +30,16 @@ export const Title = styled(Link)` color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))}; font-size: 14px; opacity: ${({ $active }) => ($active ? 1 : 0.9)}; - font-weight: ${({ $active }) => ($active ? 600 : 400)}; + font-weight: ${({ $active }) => ($active ? 500 : 400)}; text-decoration: none; + padding: 3px 10px; + border-radius: 5px; &:hover { color: ${theme('article.title')}; opacity: 1; cursor: pointer; + background: ${theme('hoverBg')}; } transition: all 0.2s; diff --git a/src/containers/editor/AccountEditor/styles/index.ts b/src/containers/editor/AccountEditor/styles/index.ts index 7375081f2..98b95ad81 100755 --- a/src/containers/editor/AccountEditor/styles/index.ts +++ b/src/containers/editor/AccountEditor/styles/index.ts @@ -1,13 +1,13 @@ import styled from 'styled-components' import Img from '@/Img' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import GithubSVG from '@/icons/Github8' import FormInput from '@/widgets/Input' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; padding-top: 20px; padding-bottom: 50px; @@ -27,7 +27,7 @@ export const AvatarPic = styled(Img)` margin-left: -5px; ` export const FormsWrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; ` export const Section = styled.div` width: 100%; @@ -35,12 +35,12 @@ export const Section = styled.div` outline: none; ` export const RowSection = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 28px; ` export const LoginSection = styled.div` width: 100%; - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 15px; ` export const LoginDesc = styled.div` @@ -62,7 +62,7 @@ export const SectionHint = styled.div` margin-left: 12px; ` export const Label = styled.div` - ${css.flex('justify-between', 'align-end')}; + ${css.row('justify-between', 'align-end')}; color: ${theme('article.digest')}; font-size: 14px; margin-bottom: 8px; diff --git a/src/containers/editor/AccountEditor/styles/sex_inputer.ts b/src/containers/editor/AccountEditor/styles/sex_inputer.ts index f0cae9c28..ca846861c 100755 --- a/src/containers/editor/AccountEditor/styles/sex_inputer.ts +++ b/src/containers/editor/AccountEditor/styles/sex_inputer.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ManSVG from '@/icons/Man' import WomanSVG from '@/icons/Woman' @@ -8,7 +8,7 @@ import WomanSVG from '@/icons/Woman' import { SEX } from '../constant' export const Wrapper = styled.div` - ${css.flex()}; + ${css.row()}; width: 250px; ` const sexIcon = ` @@ -19,12 +19,10 @@ const sexIcon = ` ` export const DudeIcon = styled(ManSVG)<{ value: string }>` ${sexIcon}; - fill: ${({ value }) => - value === SEX.DUDE ? theme('baseColor.blue') : theme('article.digest')}; + fill: ${({ value }) => (value === SEX.DUDE ? theme('baseColor.blue') : theme('article.digest'))}; ` export const GirlIcon = styled(WomanSVG)<{ value: string }>` ${sexIcon}; - fill: ${({ value }) => - value === SEX.GIRL ? theme('baseColor.pink') : theme('article.digest')}; + fill: ${({ value }) => (value === SEX.GIRL ? theme('baseColor.pink') : theme('article.digest'))}; margin-top: 1px; ` diff --git a/src/containers/editor/AccountEditor/styles/social_inputer.ts b/src/containers/editor/AccountEditor/styles/social_inputer.ts index 0ba9ba3a0..8bcc320e5 100755 --- a/src/containers/editor/AccountEditor/styles/social_inputer.ts +++ b/src/containers/editor/AccountEditor/styles/social_inputer.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import FormInput from '@/widgets/Input' @@ -20,7 +20,7 @@ export const Input = styled(FormInput)` font-size: 15px; ` export const Section = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 20px; width: 100%; margin-left: 12px; diff --git a/src/containers/editor/ArticleEditor/styles/addon/index.ts b/src/containers/editor/ArticleEditor/styles/addon/index.ts index 22f167e02..dc971a289 100755 --- a/src/containers/editor/ArticleEditor/styles/addon/index.ts +++ b/src/containers/editor/ArticleEditor/styles/addon/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import Input from '@/widgets/Input' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import LinkSVG from '@/icons/Link' @@ -17,7 +17,6 @@ export const LinkInput = styled(Input)<{ invalid?: boolean }>` background: none; height: 26px; width: 100px; - color: ${({ invalid }) => - invalid ? theme('baseColor.red') : theme('article.digest')}; + color: ${({ invalid }) => (invalid ? theme('baseColor.red') : theme('article.digest'))}; width: 200px; ` diff --git a/src/containers/editor/ArticleEditor/styles/addon/job_addon.ts b/src/containers/editor/ArticleEditor/styles/addon/job_addon.ts index 550921a12..87527dd60 100755 --- a/src/containers/editor/ArticleEditor/styles/addon/job_addon.ts +++ b/src/containers/editor/ArticleEditor/styles/addon/job_addon.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import Input from '@/widgets/Input' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import LaptopSVG from '@/icons/Laptop' import LinkSVG from '@/icons/Link' @@ -9,7 +9,7 @@ import LinkSVG from '@/icons/Link' export { LinkInput } from './index' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` export const LaptopIcon = styled(LaptopSVG)` ${css.size(16)}; diff --git a/src/containers/editor/ArticleEditor/styles/addon/post_addon.ts b/src/containers/editor/ArticleEditor/styles/addon/post_addon.ts index 252937782..7c4c539ed 100755 --- a/src/containers/editor/ArticleEditor/styles/addon/post_addon.ts +++ b/src/containers/editor/ArticleEditor/styles/addon/post_addon.ts @@ -1,14 +1,14 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' export { LinkIcon, LinkInput } from './index' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` export const LinkWrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; position: relative; margin-left: 15px; ` diff --git a/src/containers/editor/ArticleEditor/styles/addon/radar_addon.ts b/src/containers/editor/ArticleEditor/styles/addon/radar_addon.ts index 937646216..292fae82b 100755 --- a/src/containers/editor/ArticleEditor/styles/addon/radar_addon.ts +++ b/src/containers/editor/ArticleEditor/styles/addon/radar_addon.ts @@ -1,13 +1,13 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' export { LinkIcon, LinkInput } from './index' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` export const LinkWrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; position: relative; ` diff --git a/src/containers/editor/ArticleEditor/styles/article_cover.ts b/src/containers/editor/ArticleEditor/styles/article_cover.ts index 0e6a56b9c..cb948a919 100644 --- a/src/containers/editor/ArticleEditor/styles/article_cover.ts +++ b/src/containers/editor/ArticleEditor/styles/article_cover.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import AdderSVG from '@/icons/Plus' import ImageSVG from '@/icons/Image' @@ -10,7 +10,7 @@ export const Wrapper = styled.div` margin-bottom: 20px; ` export const Adder = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-left: 25px; opacity: 0.7; diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts b/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts index ba3c82354..ded372d4f 100755 --- a/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts +++ b/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' import { Wrapper as HeaderWrapper } from './index' @@ -12,7 +12,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ position: absolute; top: -8px; left: -78px; - ${css.flex('align-center')}; + ${css.row('align-center')}; width: 60px; cursor: pointer; visibility: hidden; diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts b/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts index 94a69c44b..795ce0f69 100755 --- a/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts +++ b/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' import { SubTitleWrapper } from './index' @@ -12,7 +12,7 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ position: absolute; top: 21px; left: -66px; - ${css.flex('align-center')}; + ${css.row('align-center')}; width: 60px; cursor: pointer; visibility: hidden; diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/index.ts b/src/containers/editor/ArticleEditor/styles/editor/header/index.ts index 2e12b7af3..8aed8c249 100755 --- a/src/containers/editor/ArticleEditor/styles/editor/header/index.ts +++ b/src/containers/editor/ArticleEditor/styles/editor/header/index.ts @@ -2,12 +2,12 @@ import styled from 'styled-components' import Input from '@/widgets/Input' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn()}; + ${css.column()}; width: 100%; min-height: 90px; ` diff --git a/src/containers/editor/ArticleEditor/styles/editor/index.ts b/src/containers/editor/ArticleEditor/styles/editor/index.ts index a42383a52..21139f25b 100755 --- a/src/containers/editor/ArticleEditor/styles/editor/index.ts +++ b/src/containers/editor/ArticleEditor/styles/editor/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' export const Wrapper = styled.div`` export const ContentWrapper = styled.div` @@ -9,7 +9,7 @@ export const ContentWrapper = styled.div` margin: 20px 0; ` export const Footer = styled.div` - ${css.flex('align-center', 'justify-end')}; + ${css.row('align-center', 'justify-end')}; width: 100%; border-top: 2px solid; border-top-color: #03343f; diff --git a/src/containers/editor/ArticleEditor/styles/footer.ts b/src/containers/editor/ArticleEditor/styles/footer.ts index bab0e98a4..6f0654c70 100755 --- a/src/containers/editor/ArticleEditor/styles/footer.ts +++ b/src/containers/editor/ArticleEditor/styles/footer.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div` width: 700px; @@ -13,7 +13,7 @@ export const PublishFooter = styled.div` border-top-color: ${theme('divider')}; margin-top: 28px; padding-top: 20px; - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 100%; padding-left: 20px; padding-right: 35px; diff --git a/src/containers/editor/ArticleEditor/styles/index.ts b/src/containers/editor/ArticleEditor/styles/index.ts index 7b6230f6b..5a1f5c623 100755 --- a/src/containers/editor/ArticleEditor/styles/index.ts +++ b/src/containers/editor/ArticleEditor/styles/index.ts @@ -1,24 +1,24 @@ import styled from 'styled-components' import type { TTestable, TMetric } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flex('justify-center')}; + ${css.row('justify-center')}; width: 100%; margin-top: 40px; ` export const InnerWrapper = styled.div<{ metric: TMetric }>` - ${css.flex('justify-center')}; + ${css.row('justify-center')}; width: 100%; margin-top: 30px; ${({ metric }) => css.fitContentWidth(metric)}; ` export const FuncRow = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-top: 10px; margin-bottom: 10px; margin-left: 28px; @@ -31,7 +31,7 @@ export const ContentWrapper = styled.div` /* min-height: 40vh; */ ` export const Footer = styled.div` - ${css.flex('align-center', 'justify-end')}; + ${css.row('align-center', 'justify-end')}; width: 100%; border-top: 2px solid; border-top-color: #03343f; diff --git a/src/containers/editor/ArticleEditor/styles/publish_rules.ts b/src/containers/editor/ArticleEditor/styles/publish_rules.ts index 9efd34189..ab543ec63 100755 --- a/src/containers/editor/ArticleEditor/styles/publish_rules.ts +++ b/src/containers/editor/ArticleEditor/styles/publish_rules.ts @@ -1,9 +1,9 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; color: ${theme('article.digest')}; width: 280px; height: auto; diff --git a/src/containers/editor/ArticleEditor/styles/title_input.ts b/src/containers/editor/ArticleEditor/styles/title_input.ts index 03a908b79..50c0264ae 100755 --- a/src/containers/editor/ArticleEditor/styles/title_input.ts +++ b/src/containers/editor/ArticleEditor/styles/title_input.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Input from '@/widgets/Input' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; width: 100%; ` export const Inputer = styled(Input)` diff --git a/src/containers/editor/CommunityEditor/Banner/BlockSelector.tsx b/src/containers/editor/CommunityEditor/Banner/BlockSelector.tsx new file mode 100644 index 000000000..3d9a6dbb5 --- /dev/null +++ b/src/containers/editor/CommunityEditor/Banner/BlockSelector.tsx @@ -0,0 +1,35 @@ +import { FC } from 'react' + +import { find } from 'ramda' + +import type { TSelectOption } from '@/spec' + +import { Wrapper, Box } from '../styles/banner/block_selector' + +type TProps = { + options: TSelectOption[] + radius?: number + onChange: (value: string) => void + activeValue: string +} + +const BlockSelector: FC = ({ options, radius = 5, activeValue, onChange }) => { + const activeOption = find((item) => item.value === activeValue, options) + + return ( + + {options.map((option) => ( + onChange(option.value)} + > + {option.label} + + ))} + + ) +} + +export default BlockSelector diff --git a/src/containers/editor/CommunityEditor/Banner/Finished.tsx b/src/containers/editor/CommunityEditor/Banner/Finished.tsx index 74863561b..d47d9be6c 100755 --- a/src/containers/editor/CommunityEditor/Banner/Finished.tsx +++ b/src/containers/editor/CommunityEditor/Banner/Finished.tsx @@ -1,15 +1,32 @@ /* eslint-disable jsx-a11y/accessible-emoji */ import { FC, memo } from 'react' -import { Wrapper, Title, Desc } from '../styles/banner/finished' +import { ROUTE } from '@/constant/route' +import Button from '@/widgets/Buttons/Button' -// import type { TSetupDomainStatus, TValidState } from '../spec' +import { Wrapper, Title, Desc, Footer, TheLink, DashboardIcon } from '../styles/banner/finished' -const Finished: FC = () => { +type TProps = { + community: string +} + +const Finished: FC = ({ community }) => { return ( 👏🏻   感谢你的信任 - 申请将尽快被处理，结果将以邮件等形式告知。 + 申请处理中，在此之前你可以去管理后台完善社区设置 +
+ + + + + + + +
) } diff --git a/src/containers/editor/CommunityEditor/Banner/NextStepButton.tsx b/src/containers/editor/CommunityEditor/Banner/NextStepButton.tsx new file mode 100644 index 000000000..a56df0403 --- /dev/null +++ b/src/containers/editor/CommunityEditor/Banner/NextStepButton.tsx @@ -0,0 +1,31 @@ +import { FC } from 'react' + +import ArrowButton from '@/widgets/Buttons/ArrowButton' +import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' + +import { Wrapper, Text } from '../styles/banner/next_step_button' + +type TProps = { + loading?: boolean + onClick: () => void + disabled: boolean + text?: string +} + +const NextStepButton: FC = ({ loading = false, onClick, disabled, text = '下一步' }) => { + return ( + <> + {loading ? ( + + ) : ( + + + {text} + + + )} + + ) +} + +export default NextStepButton diff --git a/src/containers/editor/CommunityEditor/Banner/ScaleSelector.tsx b/src/containers/editor/CommunityEditor/Banner/ScaleSelector.tsx new file mode 100644 index 000000000..6afa88bbd --- /dev/null +++ b/src/containers/editor/CommunityEditor/Banner/ScaleSelector.tsx @@ -0,0 +1,57 @@ +import { FC, useState } from 'react' + +import { + Wrapper, + SlideBox, + Bar, + BarDot, + IndexDot, + Footer, + Note, + ShineNote, +} from '../styles/banner/scale_selector' + +const STEP = { + S: '15%', + X: '40%', + M: '65%', + L: '91%', +} + +const ScaleSelector: FC = () => { + const [step, setStep] = useState(STEP.X) + + return ( + + + + + + setStep(STEP.S)} /> + setStep(STEP.X)} /> + setStep(STEP.M)} /> + setStep(STEP.L)} /> + +
+ {step !== STEP.S ? ( + setStep(STEP.S)} $active={step === STEP.S}> + 独立开发者 + + ) : ( + setStep(STEP.S)}>独立开发者 + )} + setStep(STEP.X)} $active={step === STEP.X}> + 2-20 + + setStep(STEP.M)} $active={step === STEP.M}> + 20-100 + + setStep(STEP.L)} $active={step === STEP.L}> + 100+ + +
+ + ) +} + +export default ScaleSelector diff --git a/src/containers/editor/CommunityEditor/Banner/SelectType/TypeBoxes.tsx b/src/containers/editor/CommunityEditor/Banner/SelectType/TypeBoxes.tsx index b661d3d6d..7d8da5c0d 100755 --- a/src/containers/editor/CommunityEditor/Banner/SelectType/TypeBoxes.tsx +++ b/src/containers/editor/CommunityEditor/Banner/SelectType/TypeBoxes.tsx @@ -1,12 +1,12 @@ import { FC, memo } from 'react' -import Checker from '@/widgets/Checker' import { Wrapper, Box, HeaderText, MainText, FooterText, + TheChecker, } from '../../styles/banner/select_type/type_boxes' import type { TCommunityType } from '../../spec' @@ -18,52 +18,56 @@ type TProps = { } const TypeBoxes: FC = ({ communityType }) => { - const { PUBLIC, CITY, WORKS, TEAM } = COMMUNITY_TYPE + const { WEB, CLIENT, HARDWARE, GAME } = COMMUNITY_TYPE return ( communityTypeOnChange(PUBLIC)} + touched={!!communityType} + active={communityType === WEB} + onClick={() => communityTypeOnChange(WEB)} >
免费
- + - 公共社区 + Web 应用 已有 114 + communityTypeOnChange(WORKS)} + touched={!!communityType} + active={communityType === CLIENT} + onClick={() => communityTypeOnChange(CLIENT)} > - 免费 / 高级 - + 免费 + - 作品社区 + 客户端软件 已有 12 + communityTypeOnChange(TEAM)} + touched={!!communityType} + active={communityType === HARDWARE} + onClick={() => communityTypeOnChange(HARDWARE)} > - 免费 / 高级 - + 免费 + - 团队社区 + 硬件产品 已有 14 + communityTypeOnChange(CITY)} + touched={!!communityType} + active={communityType === GAME} + onClick={() => communityTypeOnChange(GAME)} >
免费
- + - 同城社区 + 独立游戏 已有 114 + diff --git a/src/containers/editor/CommunityEditor/Banner/SelectType/WarnBox.tsx b/src/containers/editor/CommunityEditor/Banner/SelectType/WarnBox.tsx new file mode 100644 index 000000000..e40b9e9f3 --- /dev/null +++ b/src/containers/editor/CommunityEditor/Banner/SelectType/WarnBox.tsx @@ -0,0 +1,19 @@ +import { FC } from 'react' + +import { Wrapper, Title, Desc } from '../../styles/banner/select_type/warn_box' + +type TProps = { + title: string + desc: string +} + +const WarnBox: FC = ({ title, desc }) => { + return ( + + {title} + {desc} + + ) +} + +export default WarnBox diff --git a/src/containers/editor/CommunityEditor/Banner/SelectType/index.tsx b/src/containers/editor/CommunityEditor/Banner/SelectType/index.tsx index 42ce384a4..488e472ff 100755 --- a/src/containers/editor/CommunityEditor/Banner/SelectType/index.tsx +++ b/src/containers/editor/CommunityEditor/Banner/SelectType/index.tsx @@ -6,24 +6,21 @@ import { FC, memo } from 'react' -import { ICON_CMD } from '@/config' -import SIZE from '@/constant/size' import { buildLog } from '@/utils/logger' -import ArrowButton from '@/widgets/Buttons/ArrowButton' +import { Br } from '@/widgets/Common' +import ArrowLinker from '@/widgets/ArrowLinker' + +import Checker from '@/widgets/Checker' import type { TCommunityType, TValidState } from '../../spec' + +import NextStepButton from '../NextStepButton' import TypeBoxes from './TypeBoxes' +import WarnBox from './WarnBox' -import { - Wrapper, - IntroTitle, - AddNewIcon, - NextBtn, - ErrorMsg, - InfoMsg, -} from '../../styles/banner/select_type' -import { nextStep } from '../../logic' +import { Wrapper, InnerWrapper, IntroTitle, Note, NextBtn } from '../../styles/banner/select_type' +import { nextStep, isOfficalOnChange } from '../../logic' /* eslint-disable-next-line */ const log = buildLog('C:CommunitiesBanner') @@ -36,34 +33,48 @@ type TProps = { } const SelectType: FC = ({ status: { communityType }, validState }) => { + if (!validState.hasPendingApply && !validState.isLogin) { + return + } + + if (validState.isLogin && validState.hasPendingApply) { + return ( + + ) + } + return ( - - - - 你想创建一个什么类型的子社区? - - - - {communityType && ( - - {!validState.hasPendingApply && !validState.isLogin && ( - 创建社区需要先登录 - )} - {validState.isLogin && validState.hasPendingApply && ( - 你上次申请的创建请求还在处理中，请等待处理后再次创建，谢谢! - )} - - {!validState.hasPendingApply && ( - + + 你创建的反馈社区将服务于? + + + + {!communityType &&
} + {communityType && ( + + + 我来自产品官方团队， + 为什么需要官方 + + )} + + {communityType && ( + + - 下一步 - - )} - - )} + disabled={!(validState.isCommunityTypeValid && validState.isOfficalValid)} + /> + + )} + ) } diff --git a/src/containers/editor/CommunityEditor/Banner/SetupDomain.tsx b/src/containers/editor/CommunityEditor/Banner/SetupDomain.tsx index f959ece2d..df21f6316 100755 --- a/src/containers/editor/CommunityEditor/Banner/SetupDomain.tsx +++ b/src/containers/editor/CommunityEditor/Banner/SetupDomain.tsx @@ -4,18 +4,11 @@ import { isEmpty } from 'ramda' import { cutRest } from '@/utils/fmt' import ArrowButton from '@/widgets/Buttons/ArrowButton' -import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' +import NextStepButton from './NextStepButton' import InputBox from './InputBox' -import { - Wrapper, - IntroTitle, - DomainIcon, - StepHint, - NextBtn, - ErrorMsg, -} from '../styles/banner/setup_domain' +import { Wrapper, IntroTitle, DomainIcon, NextBtn, ErrorMsg } from '../styles/banner/setup_domain' import type { TSetupDomainStatus, TValidState } from '../spec' import { pervStep, nextStep, inputOnChange } from '../logic' @@ -32,30 +25,27 @@ const SetupDomain: FC = ({ status, validState }) => { - 社区的子域名 - 2 / 4 + 社区域名 - inputOnChange(e, 'slug')} /> + inputOnChange(e, 'slug')} /> + {!isEmpty(slug) && !communityExist && !isRawValid && ( - 仅支持英文、拼音或数字组合 + 仅支持字母、数字与-_的组合 )} {!checking && communityExist && ( {cutRest(slug, 8)} 已存在（或他人在申请中），请尝试其他域名 )} - - - 上一步 - - - {checking ? ( - - ) : ( - - 下一步 + + {!(!isEmpty(slug) && !communityExist && !isRawValid) && ( + + + 上一步 - )} - + + + + )} ) } diff --git a/src/containers/editor/CommunityEditor/Banner/SetupExtra.tsx b/src/containers/editor/CommunityEditor/Banner/SetupExtra.tsx new file mode 100644 index 000000000..4e596ddaf --- /dev/null +++ b/src/containers/editor/CommunityEditor/Banner/SetupExtra.tsx @@ -0,0 +1,97 @@ +import { FC, memo } from 'react' + +import ArrowButton from '@/widgets/Buttons/ArrowButton' +import { Br, Space } from '@/widgets/Common' + +import { CITY_OPTIONS, SOURCE_OPTIONS } from '../constant' + +import ScaleSelector from './ScaleSelector' +import BlockSelector from './BlockSelector' +import NextStepButton from './NextStepButton' + +import { + Wrapper, + IntroTitle, + IntroDesc, + ApplyIcon, + NextBtn, + InfoWrapper, + InputsWrapper, + InputBox, + // ExtraInputBox, + Label, +} from '../styles/banner/setup_extra' + +import type { TSetupExtraStatus, TValidState } from '../spec' +import { pervStep, nextStep, inputOnChange } from '../logic' + +type TProps = { + status: TSetupExtraStatus + validState: TValidState +} + +const SetupExtra: FC = ({ status, validState }) => { + const { homepage, city, source } = status + + const { isTitleValid, isDescValid, isLogoValid, submitting } = validState + const isValid = isTitleValid && isDescValid && isLogoValid + + return ( + + + + 更多信息 + + + 此处填写的相关信息会在创建成功后，自动同步到该社区的 "关于" 页面 + + + + + inputOnChange(e, 'homepage')} + /> +
+ + + +
+ + + inputOnChange(v, 'city')} + /> +
+ + + inputOnChange(v, 'source')} + /> +
+ {/* inputOnChange(e, 'extraInfo')} + behavior="textarea" + /> */} + + + + + 上一步 + + + + + + ) +} + +export default memo(SetupExtra) diff --git a/src/containers/editor/CommunityEditor/Banner/SetupInfo.tsx b/src/containers/editor/CommunityEditor/Banner/SetupInfo.tsx index e17393221..2b8a92408 100755 --- a/src/containers/editor/CommunityEditor/Banner/SetupInfo.tsx +++ b/src/containers/editor/CommunityEditor/Banner/SetupInfo.tsx @@ -6,15 +6,18 @@ import OSSUploader from '@/widgets/OSSUploader' import ArrowButton from '@/widgets/Buttons/ArrowButton' import { Br, Space } from '@/widgets/Common' +import NextStepButton from './NextStepButton' + import { Wrapper, IntroTitle, ApplyIcon, - StepHint, NextBtn, InfoWrapper, HolderWrapper, + HolderInner, HolderIcon, + HolderText, RealCover, InputsWrapper, InputBox, @@ -39,13 +42,15 @@ const SetupInfo: FC = ({ status, validState }) => { 基本信息 - 3 / 4 inputOnChange(url, 'logo')}> {nilOrEmpty(logo) ? ( - + + + LOGO + ) : ( @@ -54,13 +59,13 @@ const SetupInfo: FC = ({ status, validState }) => { inputOnChange(e, 'title')} />
inputOnChange(e, 'desc')} /> @@ -70,10 +75,8 @@ const SetupInfo: FC = ({ status, validState }) => { 上一步 - - - 下一步 - + + ) diff --git a/src/containers/editor/CommunityEditor/Banner/index.tsx b/src/containers/editor/CommunityEditor/Banner/index.tsx index f2aeb8171..efe6eba86 100755 --- a/src/containers/editor/CommunityEditor/Banner/index.tsx +++ b/src/containers/editor/CommunityEditor/Banner/index.tsx @@ -12,6 +12,7 @@ import { buildLog } from '@/utils/logger' import SelectType from './SelectType' import SetupDomain from './SetupDomain' import SetupInfo from './SetupInfo' +import SetupExtra from './SetupExtra' import Finished from './Finished' import { Wrapper } from '../styles/banner' @@ -21,6 +22,7 @@ import type { TSetupDomainStatus, TSetupInfoStatus, TValidState, + TSetupExtraStatus, } from '../spec' import { STEP } from '../constant' @@ -32,6 +34,7 @@ type TProps = { selectTypeStatus: TSelectTypeStatus setupDomainStatus: TSetupDomainStatus setupInfoStatus: TSetupInfoStatus + setupExtraStatus: TSetupExtraStatus validState: TValidState } @@ -40,30 +43,31 @@ const Banner: FC = ({ selectTypeStatus, setupDomainStatus, setupInfoStatus, + setupExtraStatus, validState, }) => { let stepComp + const { slug } = setupInfoStatus switch (step) { case STEP.SELECT_TYPE: { - stepComp = ( - - ) + stepComp = break } case STEP.SETUP_INFO: { stepComp = break } - + case STEP.SETUP_EXTRA: { + stepComp = + break + } case STEP.FINISHED: { - stepComp = + stepComp = break } default: { - stepComp = ( - - ) + stepComp = break } } diff --git a/src/containers/editor/CommunityEditor/Content/FakeBrowser/Content.tsx b/src/containers/editor/CommunityEditor/Content/FakeBrowser/Content.tsx index c621dfb0e..80dee9d85 100755 --- a/src/containers/editor/CommunityEditor/Content/FakeBrowser/Content.tsx +++ b/src/containers/editor/CommunityEditor/Content/FakeBrowser/Content.tsx @@ -1,84 +1,70 @@ import { FC, memo } from 'react' -import { includes } from 'ramda' -import NoticeBar from '@/widgets/NoticeBar' -import communityIntros from '../communityIntros' +import { Trans } from '@/utils/i18n' -import type { TStep, TCommunityType } from '../../spec' -import { STEP, COMMUNITY_TYPE } from '../../constant' +import communityIntros from '../communityIntros' +import type { TCommunityType } from '../../spec' import { Wrapper, BannerWrapper, IconBlock, + AccountIcon, RealLogo, Intro, Title, Desc, + TitleHolder, ThreadWrapper, ThreadItem, FeedWrapper, + TagWrapper, Feed, } from '../../styles/content/fake_browser/content' type TProps = { - step: TStep title?: string desc?: string logo?: string | null - domain?: string | null communityType: TCommunityType + onHoverThread: (thread: string) => void } -const Content: FC = ({ - step, - title = '', - desc = '', - logo, - domain = null, - communityType, -}) => { - if ( - includes(communityType, [COMMUNITY_TYPE.WORKS, COMMUNITY_TYPE.TEAM]) && - step === STEP.SETUP_DOMAIN - ) { - const customDomain = domain || 'my-domain' - - return ( - - - - ) - } - +const Content: FC = ({ title = '', desc = '', logo, communityType, onHoverThread }) => { return ( - {logo ? : } - {title} - {desc} + {logo ? : } + {title ? {title} : 社区名称} {communityType && ( {communityIntros[communityType].threads.map((thread) => ( - {thread} + onHoverThread(thread)}> + {Trans(thread)} + ))} )} + + {desc} + + + + + + - - + + + + + + ) diff --git a/src/containers/editor/CommunityEditor/Content/FakeBrowser/MaskPanel.tsx b/src/containers/editor/CommunityEditor/Content/FakeBrowser/MaskPanel.tsx new file mode 100644 index 000000000..84442acb9 --- /dev/null +++ b/src/containers/editor/CommunityEditor/Content/FakeBrowser/MaskPanel.tsx @@ -0,0 +1,101 @@ +import { FC } from 'react' + +import ArrowLinker from '@/widgets/ArrowLinker' + +import type { TStep } from '../../spec' +import { STEP } from '../../constant' + +import { + Wrapper, + InnerWrapper, + InnerWrapperColumn, + Item, + CheckIcon, + ColumnItem, + Dot, + Header, + Divider, +} from '../../styles/content/fake_browser/mask_panel' + +type TProps = { + step: TStep +} + +const MaskPanel: FC = ({ step }) => { + if (step === STEP.SETUP_DOMAIN) { + return ( + + + + + 域名对 SEO 有影响，请确保其和你的官方产品 / 服务相关联。 + + + + 创建后域名不可随意修改。 + + + + 如果你的产品 / 服务域名已被占用，请在 + + 这里反馈 + + 。 + + + + ) + } + + return ( + +
+ + 自带丰富功能，查看完整特性 + + +
+ + + + + 反馈分类管理 + + + + 功能投票 & 看板 + + + + 富文本内容 + + + + 团队管理员 + + + + 外观个性化设置 + + + + SEO 优化 + + + + 页头页脚自定义 + + + + 评论表情反馈 + + + + 丰富第三方集成 + + + + ) +} + +export default MaskPanel diff --git a/src/containers/editor/CommunityEditor/Content/FakeBrowser/index.tsx b/src/containers/editor/CommunityEditor/Content/FakeBrowser/index.tsx index df6cdc5e7..841bfddf7 100755 --- a/src/containers/editor/CommunityEditor/Content/FakeBrowser/index.tsx +++ b/src/containers/editor/CommunityEditor/Content/FakeBrowser/index.tsx @@ -1,10 +1,12 @@ -import { FC, memo } from 'react' +import { FC, memo, useState } from 'react' import { isEmpty } from 'ramda' import { ICON_CMD } from '@/config' +import { Row } from '@/widgets/Common' import Favicon from './Favicon' import Content from './Content' +import MaskPanel from './MaskPanel' import type { TStep, TCommunityType } from '../../spec' @@ -19,7 +21,10 @@ import { LockIcon, Form, Input, - DomainText, + Slash, + SubDomain, + ThreadPath, + ThreadText, } from '../../styles/content/fake_browser' type TProps = { @@ -40,6 +45,7 @@ const FakeBrowser: FC = ({ communityType = null, }) => { const tabTitle = title || domain || 'groupher' + const [activePath, setActivePath] = useState('') return ( @@ -67,9 +73,14 @@ const FakeBrowser: FC = ({ {isEmpty(domain) ? (
groupher.com
) : ( -
- groupher.com/{domain.toLowerCase()} -
+ + groupher.com/ + {domain.toLowerCase()} + + / + {activePath} + + )} @@ -81,13 +92,13 @@ const FakeBrowser: FC = ({ + ) } diff --git a/src/containers/editor/CommunityEditor/Content/MoreInfo.tsx b/src/containers/editor/CommunityEditor/Content/MoreInfo.tsx deleted file mode 100755 index 9580babbd..000000000 --- a/src/containers/editor/CommunityEditor/Content/MoreInfo.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { FC, memo } from 'react' - -import type { TSetupInfoStatus } from '../spec' -import { - Wrapper, - LineDivider, - Block, - Logo, - Intro, - Title, - Desc, -} from '../styles/content/more_info' - -type TProps = { - status: TSetupInfoStatus -} - -const MoreInfo: FC = ({ status }) => { - const { title, desc, logo } = status - - return ( - - - - - - {title} - {desc} - - - - ) -} - -export default memo(MoreInfo) diff --git a/src/containers/editor/CommunityEditor/Content/SelectType.tsx b/src/containers/editor/CommunityEditor/Content/SelectType.tsx index a65be73db..0861bdfce 100755 --- a/src/containers/editor/CommunityEditor/Content/SelectType.tsx +++ b/src/containers/editor/CommunityEditor/Content/SelectType.tsx @@ -9,11 +9,12 @@ import { FC, memo } from 'react' import { ICON_CMD } from '@/config' import { buildLog } from '@/utils/logger' +import ArrowLinker from '@/widgets/ArrowLinker' + import DemoCommunity from './DemoCommunity' import COMMUNITY_INTRO from './communityIntros' import type { TSelectTypeStatus } from '../spec' -// import SearchBox from './SearchBox' import { Wrapper, LeftBlock, @@ -24,7 +25,6 @@ import { Title, Desc, CommunityDemoWrapper, - MoreLink, } from '../styles/content/select_type' /* eslint-disable-next-line */ @@ -47,7 +47,7 @@ const SelectType: FC = ({ status: { communityType } }) => { {intro.desc}
- 查看详细 + 查看详细
@@ -60,7 +60,7 @@ const SelectType: FC = ({ status: { communityType } }) => { ))} - 查看更多 + 探索更多 ) diff --git a/src/containers/editor/CommunityEditor/Content/SetupInfo.tsx b/src/containers/editor/CommunityEditor/Content/SetupInfo.tsx index cddc8311c..0065ef8da 100755 --- a/src/containers/editor/CommunityEditor/Content/SetupInfo.tsx +++ b/src/containers/editor/CommunityEditor/Content/SetupInfo.tsx @@ -19,8 +19,8 @@ const SetupInfo: FC = ({ status, communityType }) => { diff --git a/src/containers/editor/CommunityEditor/Content/communityIntros.tsx b/src/containers/editor/CommunityEditor/Content/communityIntros.tsx index 9f004008d..5e4a30533 100755 --- a/src/containers/editor/CommunityEditor/Content/communityIntros.tsx +++ b/src/containers/editor/CommunityEditor/Content/communityIntros.tsx @@ -1,11 +1,13 @@ import { ICON_BASE } from '@/config' import { HCN } from '@/constant/name' +import { ROUTE } from '@/constant/route' + const COMMUNITY_INTRO = { - PUBLIC: { - title: '什么是公共社区?', - desc: '编程语言，编程框架，DevOps 等公共领域的社区，包含帖子，雷达，博客, 101，分布地图，招聘等版块。志愿者参与日常维护管理。', - threads: ['帖子', '雷达', '博客', '酷导航', '成员分布', '工作'], + WEB: { + title: '什么是 Web 应用?', + desc: '你的产品主要通过浏览器 web 端为用户提供服务，如网站，H5 页面等。', + threads: [ROUTE.POST, ROUTE.KANBAN, ROUTE.CHANGELOG, ROUTE.HELP, ROUTE.ABOUT], demos: [ { title: 'javascript', @@ -34,10 +36,10 @@ const COMMUNITY_INTRO = { }, ], }, - WORKS: { - title: '什么是作品社区?', - desc: '为你的作品讨论需求，收集反馈，公布进度等，包含帖子，看板，技术栈，团队信息等版块。管理权限属于作者。', - threads: ['讨论', '看板', '技术栈', '团队'], + CLIENT: { + title: '什么是客户端软件?', + desc: '包括但不限于各行业 PC / Mac 端生产力工具，手机 APP 等。', + threads: [ROUTE.POST, ROUTE.KANBAN, ROUTE.CHANGELOG, ROUTE.HELP, ROUTE.ABOUT], demos: [ { title: 'Groupher', @@ -46,10 +48,10 @@ const COMMUNITY_INTRO = { }, ], }, - TEAM: { - title: '什么是团队社区?', - desc: '为你的团队收集意见反馈，展示作品，动态，招聘等的专门社区。管理权限属于团队成员。', - threads: ['帖子', '博客', '作品', '技术栈', '工作'], + HARDWARE: { + title: '什么是硬件产品', + desc: '各类机器人，无人机及其类似可玩性较强的硬件类及工业类产品。', + threads: [ROUTE.POST, ROUTE.KANBAN, ROUTE.CHANGELOG, ROUTE.HELP, ROUTE.ABOUT], demos: [ { title: 'CP-feedback', @@ -57,10 +59,10 @@ const COMMUNITY_INTRO = { }, ], }, - CITY: { - title: '什么事同城社区？', - desc: '以城市为单元的社区，包含同城的话题讨论，酷团队，作品以及工作招聘等。志愿者参与日常维护管理。', - threads: ['帖子', '酷团队', '作品', '工作'], + GAME: { + title: '什么是独立游戏', + desc: '个人或小团队开发的平台或手机游戏，Indie Game Rocks!', + threads: [ROUTE.POST, ROUTE.KANBAN, ROUTE.CHANGELOG, ROUTE.HELP, ROUTE.ABOUT], demos: [ { title: '北京', diff --git a/src/containers/editor/CommunityEditor/Content/index.tsx b/src/containers/editor/CommunityEditor/Content/index.tsx index b37a3f3ad..0829bf42a 100755 --- a/src/containers/editor/CommunityEditor/Content/index.tsx +++ b/src/containers/editor/CommunityEditor/Content/index.tsx @@ -11,23 +11,24 @@ import { buildLog } from '@/utils/logger' import SelectType from './SelectType' import SetupDomain from './SetupDomain' import SetupInfo from './SetupInfo' -import MoreInfo from './MoreInfo' - -import { Wrapper } from '../styles/content' import type { TStep, + TValidState, TSelectTypeStatus, TSetupDomainStatus, TSetupInfoStatus, } from '../spec' import { STEP } from '../constant' +import { Wrapper } from '../styles/content' + /* eslint-disable-next-line */ const log = buildLog('C:NewExploreContent') type TProps = { step: TStep + validState: TValidState selectTypeStatus: TSelectTypeStatus setupDomainStatus: TSetupDomainStatus setupInfoStatus: TSetupInfoStatus @@ -35,12 +36,21 @@ type TProps = { const Content: FC = ({ step, + validState, selectTypeStatus, setupDomainStatus, setupInfoStatus, }) => { if (step === STEP.FINISHED) return null + if (!validState.hasPendingApply && !validState.isLogin) { + return null + } + + if (validState.isLogin && validState.hasPendingApply) { + return null + } + let stepComp switch (step) { @@ -52,16 +62,13 @@ const Content: FC = ({ stepComp = break } - case STEP.MORE_INFO: { - stepComp = + case STEP.SETUP_EXTRA: { + stepComp = null break } default: { stepComp = ( - + ) break } diff --git a/src/containers/editor/CommunityEditor/Header/StatusBall.tsx b/src/containers/editor/CommunityEditor/Header/StatusBall.tsx new file mode 100644 index 000000000..2d26f642a --- /dev/null +++ b/src/containers/editor/CommunityEditor/Header/StatusBall.tsx @@ -0,0 +1,36 @@ +import { FC } from 'react' + +import { + DoingWrapper, + DoneWrapper, + TodoWrapper, + Dot, + CheckIcon, +} from '../styles/header/status_ball' + +type TProps = { + done?: boolean + doing?: boolean +} + +const StatusBall: FC = ({ done = false, doing = false }) => { + if (done) { + return ( + + + + ) + } + + if (doing) { + return ( + + + + ) + } + + return +} + +export default StatusBall diff --git a/src/containers/editor/CommunityEditor/Header/StepMap.tsx b/src/containers/editor/CommunityEditor/Header/StepMap.tsx new file mode 100644 index 000000000..8a7fb58da --- /dev/null +++ b/src/containers/editor/CommunityEditor/Header/StepMap.tsx @@ -0,0 +1,101 @@ +import { FC, useEffect } from 'react' + +import StatusBall from './StatusBall' + +import type { TStep } from '../spec' +import { STEP } from '../constant' + +import { Wrapper, Line, TadaIcon } from '../styles/header/step_map' +import { tada } from '../logic' + +type TProps = { + step: TStep +} + +const StepMap: FC = ({ step }) => { + useEffect(() => { + if (step === STEP.FINISHED) { + tada() + } + }, [step]) + + switch (step) { + case STEP.SELECT_TYPE: { + return ( + + + + + + + + + + ) + } + + case STEP.SETUP_DOMAIN: { + return ( + + + + + + + + + + ) + } + + case STEP.SETUP_INFO: { + return ( + + + + + + + + + + ) + } + + case STEP.SETUP_EXTRA: { + return ( + + + + + + + + + + ) + } + + case STEP.FINISHED: { + return ( + + + + + + + + + + tada()} /> + + ) + } + + default: { + return null + } + } +} + +export default StepMap diff --git a/src/containers/editor/CommunityEditor/Header/index.tsx b/src/containers/editor/CommunityEditor/Header/index.tsx new file mode 100644 index 000000000..bf21f77e7 --- /dev/null +++ b/src/containers/editor/CommunityEditor/Header/index.tsx @@ -0,0 +1,41 @@ +import { FC } from 'react' + +import { ASSETS_ENDPOINT } from '@/config' +import useAccount from '@/hooks/useAccount' +import { callAuth } from '@/utils/signal' +import { SpaceGrow } from '@/widgets/Common' + +import type { TStep } from '../spec' + +import StepMap from './StepMap' +import { Wrapper, Logo, Title, Divider, SubTitle, Avatar, AccountIcon } from '../styles/header' + +type TProps = { + step: TStep + showStep: boolean +} + +const Header: FC = ({ step, showStep }) => { + const accountInfo = useAccount() + + return ( + + + Groupher + + 创建社区 + + + {showStep && } + + + {accountInfo?.login ? ( + + ) : ( + + )} + + ) +} + +export default Header diff --git a/src/containers/editor/CommunityEditor/constant.ts b/src/containers/editor/CommunityEditor/constant.ts index d26e073e1..88ef89f9e 100755 --- a/src/containers/editor/CommunityEditor/constant.ts +++ b/src/containers/editor/CommunityEditor/constant.ts @@ -1,23 +1,98 @@ import type { TCommunityType, TStep } from './spec' -export const TRANS = { - PUBLIC: '公共', - CITY: '城市', - WORKS: '作品', - TEAM: '团队', -} - export const STEP = { - SELECT_TYPE: 'SELECT_TYPE' as TStep, - SETUP_DOMAIN: 'SETUP_DOMAIN' as TStep, - SETUP_INFO: 'SETUP_INFO' as TStep, - MORE_INFO: 'MORE_INFO' as TStep, - FINISHED: 'FINNISHED' as TStep, -} + SELECT_TYPE: 'SELECT_TYPE', + SETUP_DOMAIN: 'SETUP_DOMAIN', + SETUP_INFO: 'SETUP_INFO', + SETUP_EXTRA: 'SETUP_EXTRA', + FINISHED: 'FINISHED', +} as Record, Uppercase> export const COMMUNITY_TYPE = { - PUBLIC: 'PUBLIC' as TCommunityType, - CITY: 'CITY' as TCommunityType, - WORKS: 'WORKS' as TCommunityType, - TEAM: 'TEAM' as TCommunityType, -} + WEB: 'WEB', + CLIENT: 'CLIENT', + HARDWARE: 'HARDWARE', + GAME: 'GAME', +} as Record, Uppercase> + +export const CITY_OPTIONS = [ + { + label: '北京', + value: 'beijing', + }, + { + label: '上海', + value: 'shanghai', + }, + { + label: '杭州', + value: 'hangzhou', + }, + { + label: '深圳', + value: 'shenzheng', + }, + { + label: '广州', + value: 'guangzhou', + }, + { + label: '苏州', + value: 'suzhou', + }, + { + label: '成都', + value: 'chengdu', + }, + { + label: '武汉', + value: 'wuhan', + }, + { + label: '西安', + value: 'xian', + }, + { + label: '海外', + value: 'oversea', + }, + { + label: '其他', + value: 'others', + }, +] + +export const SOURCE_OPTIONS = [ + { + label: '搜索引擎', + value: 'seo', + }, + { + label: '微信群', + value: 'wechat', + }, + { + label: '微博/Twitter', + value: 'weibo', + }, + { + label: '论坛', + value: 'forum', + }, + { + label: '媒体报道', + value: 'guangzhou', + }, + { + label: '小红书', + value: 'xiaohongshu', + }, + { + label: '其他开发者/同事', + value: 'otherdude', + }, + { + label: '其他', + value: 'others', + }, +] diff --git a/src/containers/editor/CommunityEditor/index.tsx b/src/containers/editor/CommunityEditor/index.tsx index 5864a1214..4df08a306 100755 --- a/src/containers/editor/CommunityEditor/index.tsx +++ b/src/containers/editor/CommunityEditor/index.tsx @@ -12,6 +12,7 @@ import { bond } from '@/utils/mobx' import type { TMetric } from '@/spec' import METRIC from '@/constant/metric' +import Header from './Header' import Banner from './Banner' import Content from './Content' @@ -32,15 +33,24 @@ const CommunityEditorContainer: FC = ({ metric = METRIC.COMMUNITY_EDITOR, }) => { useInit(store) - const { step, selectTypeStatus, setupDomainStatus, setupInfoStatus, validState } = store + const { + step, + selectTypeStatus, + setupDomainStatus, + setupInfoStatus, + setupExtraStatus, + validState, + } = store return ( +
@@ -50,6 +60,7 @@ const CommunityEditorContainer: FC = ({ selectTypeStatus={selectTypeStatus} setupDomainStatus={setupDomainStatus} setupInfoStatus={setupInfoStatus} + validState={validState} /> diff --git a/src/containers/editor/CommunityEditor/logic.ts b/src/containers/editor/CommunityEditor/logic.ts index 1ebe7e467..4d9bc9f6d 100755 --- a/src/containers/editor/CommunityEditor/logic.ts +++ b/src/containers/editor/CommunityEditor/logic.ts @@ -1,10 +1,14 @@ import { useEffect } from 'react' import { pick } from 'ramda' +import { confetti } from 'tsparticles-confetti' import type { TEditValue } from '@/spec' import EVENT from '@/constant/event' import ERR from '@/constant/err' -import { asyncSuit, buildLog, errRescue, updateEditing } from '@/utils' +import { sessionChanged, errRescue } from '@/utils/signal' +import asyncSuit from '@/utils/async' +import { buildLog } from '@/utils/logger' +import { updateEditing } from '@/utils/mobx' import type { TStore } from './store' import type { TCommunityType } from './spec' @@ -34,7 +38,7 @@ export const pervStep = (): void => { if (step === STEP.SETUP_DOMAIN) store.mark({ step: STEP.SELECT_TYPE }) if (step === STEP.SETUP_INFO) store.mark({ step: STEP.SETUP_DOMAIN }) - if (step === STEP.MORE_INFO) store.mark({ step: STEP.SETUP_INFO }) + if (step === STEP.SETUP_EXTRA) store.mark({ step: STEP.SETUP_INFO }) } /** @@ -50,7 +54,10 @@ export const nextStep = (): void => { checkIfCommunityExist() } if (step === STEP.SETUP_INFO) { - store.mark({ step: STEP.MORE_INFO }) + store.mark({ step: STEP.SETUP_EXTRA }) + } + if (step === STEP.SETUP_EXTRA) { + applyCommunity() } } @@ -74,13 +81,20 @@ export const communityTypeOnChange = (communityType: TCommunityType): void => { store.mark({ communityType }) } +export const isOfficalOnChange = (isOfficalValid: boolean): void => { + store.mark({ isOfficalValid }) +} + export const applyCommunity = (): void => { const args = pick(['title', 'logo', 'desc', 'slug', 'applyMsg'], store) store.mark({ submitting: true }) + sr71$.mutate(S.applyCommunity, { - applyCategory: store.communityType, ...args, + applyCategory: store.communityType, + // tmp + logo: 'https://assets.groupher.com/communities/groupher-alpha.png', }) } @@ -97,6 +111,44 @@ export const inputOnChange = (e: TEditValue, part: string): void => { updateEditing(store, part, e) } +/** + * finish tada effect + */ +export const tada = () => { + const defaults = { + spread: 360, + ticks: 100, + gravity: 0, + decay: 0.94, + startVelocity: 30, + } + + function shoot() { + confetti({ + ...defaults, + particleCount: 20, + scalar: 1.2, + shapes: ['circle', 'square', 'heart'], + colors: ['#F8D678', '#F5C5C8', '#BDA3F0', '#C9D8FD', '#DCF8FD'], + }) + + confetti({ + ...defaults, + particleCount: 20, + scalar: 1.8, + shapes: ['text'], + shapeOptions: { + text: { + value: ['🦄', '🌈'], + }, + }, + }) + } + + setTimeout(shoot, 0) + setTimeout(shoot, 100) +} + /* when error occured cancel all the loading state */ const cancelLoading = () => store.mark({ @@ -123,12 +175,12 @@ const DataSolver = [ { match: asyncRes('hasPendingCommunityApply'), action: ({ hasPendingCommunityApply }) => { - store.mark({ hasPendingApply: hasPendingCommunityApply.exist }) + // store.mark({ hasPendingApply: hasPendingCommunityApply.exist }) }, }, { match: asyncRes('applyCommunity'), - action: () => store.mark({ step: STEP.FINISHED }), + action: () => store.mark({ step: STEP.FINISHED, submitting: false }), }, ] @@ -153,6 +205,14 @@ const ErrSolver = [ }, ] +export const initAccount = () => { + const { isLogin, accountInfo } = store + + if (isLogin) { + sessionChanged(accountInfo) + } +} + // ############################### // init & uninit // ############################### @@ -162,6 +222,8 @@ export const useInit = (_store: TStore): void => { // log('effect init') sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) + initAccount() + if (store.isLogin) { checkPendingApply() } diff --git a/src/containers/editor/CommunityEditor/spec.d.ts b/src/containers/editor/CommunityEditor/spec.d.ts index 6657e6606..51c7f73ad 100755 --- a/src/containers/editor/CommunityEditor/spec.d.ts +++ b/src/containers/editor/CommunityEditor/spec.d.ts @@ -1,6 +1,6 @@ -export type TCommunityType = 'PUBLIC' | 'CITY' | 'WORKS' | 'TEAM' | null +export type TCommunityType = 'WEB' | 'CLIENT' | 'HARDWARE' | 'GAME' | null -export type TStep = 'SELECT_TYPE' | 'SETUP_DOMAIN' | 'SETUP_INFO' | 'MORE_INFO' | 'FINISHED' +export type TStep = 'SELECT_TYPE' | 'SETUP_DOMAIN' | 'SETUP_INFO' | 'SETUP_EXTRA' | 'FINISHED' export type TSelectTypeStatus = { communityType: TCommunityType @@ -15,11 +15,18 @@ export type TSetupInfoStatus = { title: string desc: string logo: string - applyMsg: string +} + +export type TSetupExtraStatus = { + homepage: string + extraInfo: string + city: string + source: string } export type TValidState = { isCommunityTypeValid: boolean + isOfficalValid: boolean isRawValid: boolean isTitleValid: boolean isDescValid: boolean diff --git a/src/containers/editor/CommunityEditor/store.ts b/src/containers/editor/CommunityEditor/store.ts index 9ba0939f5..80ba04a74 100755 --- a/src/containers/editor/CommunityEditor/store.ts +++ b/src/containers/editor/CommunityEditor/store.ts @@ -5,10 +5,16 @@ import { pick, values, isEmpty } from 'ramda' -import type { TRootStore, TRoute } from '@/spec' +import type { TRootStore, TRoute, TAccount } from '@/spec' import { T, getParent, markStates, Instance } from '@/utils/mobx' -import type { TSelectTypeStatus, TSetupDomainStatus, TSetupInfoStatus, TValidState } from './spec' +import type { + TSelectTypeStatus, + TSetupDomainStatus, + TSetupInfoStatus, + TSetupExtraStatus, + TValidState, +} from './spec' import { STEP, COMMUNITY_TYPE } from './constant' const CommunityEditor = T.model('CommunityEditorStore', { @@ -17,6 +23,7 @@ const CommunityEditor = T.model('CommunityEditorStore', { // if community exist / has pending apply checking: T.opt(T.bool, false), submitting: T.opt(T.bool, false), + isOfficalValid: T.opt(T.bool, false), communityExist: T.opt(T.bool, false), hasPendingApply: T.opt(T.bool, false), @@ -25,18 +32,32 @@ const CommunityEditor = T.model('CommunityEditorStore', { slug: T.opt(T.string, ''), logo: T.maybeNull(T.string), title: T.opt(T.string, ''), + homepage: T.opt(T.string, ''), + extraInfo: T.opt(T.string, ''), + + city: T.opt(T.string, ''), + source: T.opt(T.string, ''), + desc: T.opt(T.string, ''), - applyMsg: T.opt(T.string, ''), }) .views((self) => ({ get isLogin(): boolean { const root = getParent(self) as TRootStore return root.account.isLogin }, + get accountInfo(): TAccount { + const root = getParent(self) as TRootStore + return root.accountInfo + }, get curRoute(): TRoute { const root = getParent(self) as TRootStore return root.curRoute }, + get applyMsg(): string { + const { homepage, extraInfo } = self + + return `${homepage}\n${extraInfo}` + }, get selectTypeStatus(): TSelectTypeStatus { const { communityType } = self @@ -48,9 +69,10 @@ const CommunityEditor = T.model('CommunityEditorStore', { return { slug } }, get setupInfoStatus(): TSetupInfoStatus { - const { slug, title, desc, logo, applyMsg } = self - - return { slug, title, desc, logo, applyMsg } + return pick(['slug', 'title', 'desc', 'logo'], self) + }, + get setupExtraStatus(): TSetupExtraStatus { + return pick(['homepage', 'extraInfo', 'city', 'source'], self) }, get isCommunityTypeValid(): boolean { const slf = self as TStore @@ -61,7 +83,7 @@ const CommunityEditor = T.model('CommunityEditorStore', { get isRawValid(): boolean { if (self.communityExist) return false - const rule = /^[0-9a-zA-Z]+$/ + const rule = /^[0-9a-zA-Z-_]+$/ return rule.test(self.slug) }, get isTitleValid(): boolean { @@ -71,13 +93,15 @@ const CommunityEditor = T.model('CommunityEditorStore', { return !isEmpty(self.desc) }, get isLogoValid(): boolean { - return self.logo && !isEmpty(self.logo) + // return self.logo && !isEmpty(self.logo) + return true }, get validState(): TValidState { const slf = self as TStore return pick( [ + 'isOfficalValid', 'isCommunityTypeValid', 'isRawValid', 'isTitleValid', diff --git a/src/containers/editor/CommunityEditor/styles/banner/block_selector.ts b/src/containers/editor/CommunityEditor/styles/banner/block_selector.ts new file mode 100644 index 000000000..242b691f7 --- /dev/null +++ b/src/containers/editor/CommunityEditor/styles/banner/block_selector.ts @@ -0,0 +1,31 @@ +import styled from 'styled-components' + +import type { TActive } from '@/spec' +import css, { theme } from '@/css' + +export const Wrapper = styled.div` + ${css.row('align-center')}; + flex-wrap: wrap; + color: ${theme('article.digest')}; + width: 300px; + margin-top: 14px; + gap: 12px 14px; +` +type TBox = TActive & { radius: number } +export const Box = styled.div` + font-size: 13px; + padding: 2px 15px; + color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))}; + border: 1px solid; + border-color: ${({ $active }) => ($active ? theme('article.title') : theme('editor.border'))}; + border-radius: ${({ radius }) => `${radius}px;`}; + font-weight: ${({ $active }) => ($active ? 600 : 400)}; + + &:hover { + border-color: ${theme('article.title')}; + color: ${theme('article.title')}; + cursor: pointer; + } + + transition: all 0.2s; +` diff --git a/src/containers/editor/CommunityEditor/styles/banner/finished.ts b/src/containers/editor/CommunityEditor/styles/banner/finished.ts index d0ed919ea..a5b883bea 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/finished.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/finished.ts @@ -1,10 +1,13 @@ import styled from 'styled-components' +import Link from 'next/link' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' + +import DashboardSVG from '@/icons/Dashboard' export const Wrapper = styled.div` position: relative; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; color: ${theme('article.digest')}; /* background-image: linear-gradient(#043B49, #022A35); */ background-image: ${theme('banner.linearGradient')}; @@ -15,9 +18,29 @@ export const Title = styled.div` color: ${theme('article.title')}; font-size: 18px; margin-bottom: 20px; + font-weight: 550; margin-left: -10px; ` export const Desc = styled.div` color: ${theme('article.digest')}; font-size: 15px; ` + +export const Footer = styled.div` + ${css.row('align-center')}; + gap: 0 20px; + margin-top: 50px; +` + +export const DashboardIcon = styled(DashboardSVG)` + fill: white; + ${css.size(14)}; + margin-right: 10px; +` + +export const TheLink = styled(Link)` + text-decoration: none; + &:hover { + text-decoration: none; + } +` diff --git a/src/containers/editor/CommunityEditor/styles/banner/index.ts b/src/containers/editor/CommunityEditor/styles/banner/index.ts index adc6cfa8f..ab74a17e8 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/index.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/index.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('justify-center')}; + ${css.column('justify-center')}; width: 100%; position: relative; diff --git a/src/containers/editor/CommunityEditor/styles/banner/input_box.ts b/src/containers/editor/CommunityEditor/styles/banner/input_box.ts index 5875b3331..9a695c6bf 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/input_box.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/input_box.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import type { TActive } from '@/spec' // import Img from '@/Img' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div` display: flex; @@ -10,7 +10,7 @@ export const Wrapper = styled.div` ` export const InputWrapper = styled.div` position: relative; - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 8px; transition: all 0.25s ease-in; @@ -22,7 +22,7 @@ export const InputWrapper = styled.div` `}; ` export const InputMask = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; position: absolute; display: ${({ show }) => (show ? 'flex' : 'none')}; top: 0; @@ -43,7 +43,7 @@ export const InputBar = styled.input.attrs(() => ({ autoCapitalize: 'off', }))` text-align: center; - caret-color: #33b7b3; + caret-color: ${theme('article.title')}; flex-grow: 1; height: 100%; width: auto; @@ -52,19 +52,24 @@ export const InputBar = styled.input.attrs(() => ({ color: ${theme('article.title')}; font-size: 18px; max-height: none; - background-color: #0b2631; + background-color: transparent; padding: 10px 18px; border-radius: 15px; transition: all 400ms ease; border: 1px solid; - border-color: ${theme('content.cardBg')}; + border-color: ${theme('editor.border')}; &:hover { opacity: 1; border-color: ${theme('button.primary')}; } + &:focus { + opacity: 1; + border-color: ${theme('editor.borderActive')}; + } + ::placeholder { - color: #135868; + color: ${theme('lightText')}; } ` diff --git a/src/containers/editor/CommunityEditor/styles/banner/next_step_button.ts b/src/containers/editor/CommunityEditor/styles/banner/next_step_button.ts new file mode 100644 index 000000000..41cb7f78c --- /dev/null +++ b/src/containers/editor/CommunityEditor/styles/banner/next_step_button.ts @@ -0,0 +1,23 @@ +import styled from 'styled-components' + +import css, { theme } from '@/css' +import Button from '@/widgets/Buttons/Button' + +export const Wrapper = styled(Button)<{ noPaddingRight: boolean }>` + padding-right: ${({ noPaddingRight }) => (noPaddingRight ? '0px' : '6px')}; + padding-left: 24px; +` + +export const IntroTitle = styled.div` + position: relative; + ${css.row('align-center')}; + color: ${theme('article.title')}; + font-size: 18px; + margin-bottom: 20px; + margin-left: -10px; +` + +export const Text = styled.div<{ disabled: boolean }>` + color: ${({ disabled }) => (disabled ? theme('article.title') : 'white')}; + transition: all 0.2s; +` diff --git a/src/containers/editor/CommunityEditor/styles/banner/scale_selector.ts b/src/containers/editor/CommunityEditor/styles/banner/scale_selector.ts new file mode 100644 index 000000000..9d6bb9561 --- /dev/null +++ b/src/containers/editor/CommunityEditor/styles/banner/scale_selector.ts @@ -0,0 +1,86 @@ +import styled from 'styled-components' + +import type { TActive, TSpace } from '@/spec' +import css, { theme } from '@/css' + +export const Wrapper = styled.div` + ${css.column('align-center')}; + color: ${theme('article.digest')}; + width: 100%; + margin-top: 10px; +` + +export const SlideBox = styled.div` + position: relative; + ${css.row('align-center', 'justify-around')}; + width: 100%; + height: 28px; + border: 1px solid; + border-color: ${theme('editor.border')}; + border-radius: 20px; +` +export const Bar = styled.div<{ width: string }>` + position: absolute; + left: 0; + top: -1px; + border-radius: 15px; + height: 28px; + width: ${({ width }) => width}; + /* background: ${theme('article.title')}; */ + /* background: linear-gradient(to right, #333333, #828282); */ + background: linear-gradient(to right, #e29aaa, #c479de); + transition: width 0.25s; +` +export const BarDot = styled.div` + ${css.circle(20)}; + background: white; + position: absolute; + right: 3px; + top: 4px; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; +` +export const IndexDot = styled.div` + ${css.circle(6)}; + background-color: ${theme('editor.border')}; + margin-left: -8px; + cursor: pointer; + + &:hover { + ${css.circle(8)}; + } + + transition: all 0.2s; +` +export const Footer = styled.div` + ${css.row('align-center', 'justify-around')}; + width: 100%; + margin-top: 7px; +` + +type TNote = TActive & TSpace +export const Note = styled.div` + font-size: 12px; + color: ${({ $active }) => ($active ? theme('article.title') : theme('lightText'))}; + font-weight: ${({ $active }) => ($active ? 500 : 400)}; + + &:hover { + color: ${theme('article.title')}; + cursor: pointer; + font-weight: 500; + } + + transition: color 0.2s; + + ${(props) => css.spaceMargins(props)}; +` +export const ShineNote = styled.div` + font-size: 12px; + background: linear-gradient(to right, #e29aaa, #c479de); + font-weight: 550; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: 500; + cursor: pointer; + margin-left: -22px; +` diff --git a/src/containers/editor/CommunityEditor/styles/banner/select_type/index.ts b/src/containers/editor/CommunityEditor/styles/banner/select_type/index.ts index 9d57a2b65..2cc52d0d8 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/select_type/index.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/select_type/index.ts @@ -1,20 +1,24 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' - +import css, { theme } from '@/css' import Img from '@/Img' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ marginTop: boolean }>` position: relative; - ${css.flexColumn('align-both')}; + ${css.column('align-center')}; color: ${theme('article.digest')}; - /* background-image: linear-gradient(#043B49, #022A35); */ - background-image: ${theme('banner.linearGradient')}; width: 100%; - height: 440px; + min-height: ${({ marginTop }) => (!marginTop ? '480px' : '680px;')}; + margin-top: ${({ marginTop }) => (marginTop ? '68px' : '0')}; + transition: all 0.4s; +` +export const InnerWrapper = styled.div` + ${css.column('align-center')}; + height: 380px; + margin-top: 50px; ` export const IntroTitle = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.title')}; font-size: 18px; margin-bottom: 20px; @@ -25,8 +29,7 @@ export const SloganTextWrapper = styled.div<{ highlight: boolean }>` margin-right: 3px; font-weight: ${({ highlight }) => (highlight ? 'bold' : '')}; - color: ${({ highlight }) => - highlight ? theme('article.title') : theme('article.digest')}; + color: ${({ highlight }) => (highlight ? theme('article.title') : theme('article.digest'))}; ` export const AddNewIcon = styled(Img)` fill: ${theme('article.title')}; @@ -40,20 +43,13 @@ export const Title = styled.div` font-size: 1.1rem; ` export const NextBtn = styled.div` - ${css.flex('justify-center')}; - position: absolute; + ${css.row('justify-center')}; width: 280px; - bottom: 5px; + margin-top: 24px; ` -export const ErrorMsg = styled.div` - position: absolute; - text-align: center; - width: 100%; - bottom: 45px; - color: ${theme('baseColor.red')}; +export const Note = styled.div` + ${css.row('align-center')}; + margin-top: 50px; font-size: 13px; -` -export const InfoMsg = styled(ErrorMsg)` - color: ${theme('button.primary')}; - bottom: 35px; + margin-left: 5px; ` diff --git a/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts b/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts index 8d3004772..c52d2db79 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts @@ -1,20 +1,25 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' // import Img from '@/Img' +import Checker from '@/widgets/Checker' + export const Wrapper = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; margin-top: 30px; height: 105px; width: 700px; ` -export const Box = styled.div` - ${css.flexColumn('align-start', 'justify-between')}; +type TBox = { touched: boolean } & TActive +export const Box = styled.div` + ${css.column('align-start', 'justify-between')}; padding: 10px 12px; - width: ${({ active }) => (active ? '160px' : '154px')}; - height: ${({ active }) => (active ? '105px' : '100px')}; + padding-right: 5px; + width: 154px; + height: 100px; + border-radius: 5px; border: 1px solid; border-color: ${theme('article.digest')}; @@ -22,13 +27,15 @@ export const Box = styled.div` border: ${({ active }) => (active ? '1px solid' : '1px solid')}; border-top: ${({ active }) => (active ? '3px solid' : '1px solid')}; - border-color: ${({ active }) => - active ? theme('button.primary') : '#31576f;'}; - box-shadow: ${({ active }) => - active ? '0px 7px 20px 10px rgba(0, 0, 0, 0.15);' : 'none'}; + border-color: ${({ active }) => (active ? theme('button.primary') : theme('lightText'))}; + box-shadow: ${({ active }) => (active ? 'rgba(0, 0, 0, 0.1) 0px 10px 50px;' : 'none')}; + + opacity: ${({ touched, active }) => (touched && !active ? 0.65 : 1)}; + transform: ${({ touched, active }) => (touched && !active ? 'scale(0.92)' : '')}; &:hover { cursor: pointer; + opacity: 1; border: 1px solid; border-top: ${({ active }) => (active ? '3px solid' : '1px solid')}; border-color: ${theme('button.primary')}; @@ -36,7 +43,7 @@ export const Box = styled.div` transition: all 0.2s; ` export const HeaderText = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 100%; font-size: 12px; ` @@ -48,3 +55,8 @@ export const MainText = styled.div` export const FooterText = styled.div` font-size: 13px; ` +export const TheChecker = styled(Checker)` + transform: scale(0.85); + margin-top: -3px; + margin-right: -2px; +` diff --git a/src/containers/editor/CommunityEditor/styles/banner/select_type/warn_box.ts b/src/containers/editor/CommunityEditor/styles/banner/select_type/warn_box.ts new file mode 100644 index 000000000..a05fb5671 --- /dev/null +++ b/src/containers/editor/CommunityEditor/styles/banner/select_type/warn_box.ts @@ -0,0 +1,21 @@ +import styled from 'styled-components' + +import css, { theme } from '@/css' + +export const Wrapper = styled.div` + ${css.column('align-both')}; + width: 100%; + height: 50vh; + color: ${theme('baseColor.red')}; + font-size: 14px; +` +export const Title = styled.div` + color: ${theme('article.title')}; + font-size: 16px; + font-weight: 500; + margin-bottom: 10px; +` +export const Desc = styled.div` + color: ${theme('article.digest')}; + font-size: 14px; +` diff --git a/src/containers/editor/CommunityEditor/styles/banner/setup_domain.ts b/src/containers/editor/CommunityEditor/styles/banner/setup_domain.ts index f3b7aa80c..fb20f4354 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/setup_domain.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/setup_domain.ts @@ -1,21 +1,21 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import DomainSVG from '@/icons/Domain' export const Wrapper = styled.div` position: relative; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; color: ${theme('article.digest')}; /* background-image: linear-gradient(#043B49, #022A35); */ background-image: ${theme('banner.linearGradient')}; width: 100%; - height: 320px; + height: 260px; ` export const IntroTitle = styled.div` position: relative; - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.title')}; font-size: 18px; margin-bottom: 20px; @@ -26,14 +26,6 @@ export const Title = styled.div` color: ${theme('banner.title')}; font-size: 1.1rem; ` -export const StepHint = styled.div` - position: absolute; - color: ${theme('article.title')}; - font-size: 15px; - top: -35px; - left: 41%; - opacity: 0.5; -` export const DomainIcon = styled(DomainSVG)` fill: ${theme('article.title')}; ${css.size(18)}; @@ -41,14 +33,15 @@ export const DomainIcon = styled(DomainSVG)` ` export const NextBtn = styled.div` position: absolute; - ${css.flex('align-center', 'justify-around')}; + ${css.row('align-center', 'justify-around')}; width: 200px; - bottom: 42px; - margin-left: -2px; + bottom: 25px; + margin-left: 10px; + filter: grayscale(1); ` export const ErrorMsg = styled.div` position: absolute; - bottom: 85px; + bottom: 55px; color: ${theme('baseColor.red')}; font-size: 13px; ` diff --git a/src/containers/editor/CommunityEditor/styles/banner/setup_extra.ts b/src/containers/editor/CommunityEditor/styles/banner/setup_extra.ts new file mode 100644 index 000000000..1142aff9d --- /dev/null +++ b/src/containers/editor/CommunityEditor/styles/banner/setup_extra.ts @@ -0,0 +1,88 @@ +import styled from 'styled-components' + +import css, { theme } from '@/css' + +import FormInput from '@/widgets/Input' +import ApplySVG from '@/icons/Apply' + +import { InputBar } from './input_box' + +export const Wrapper = styled.div` + position: relative; + ${css.column('align-both')}; + color: ${theme('article.digest')}; + background-image: ${theme('banner.linearGradient')}; + width: 100%; + min-height: 840px; +` +export const IntroTitle = styled.div` + position: relative; + ${css.row('align-center')}; + color: ${theme('article.title')}; + font-size: 18px; +` +export const IntroDesc = styled.div` + color: ${theme('article.digest')}; + opacity: 0.8; + font-size: 13px; + margin-top: 8px; + margin-bottom: 42px; +` +export const InfoWrapper = styled.div` + ${css.row('align-center')}; + margin-bottom: 38px; +` +export const InputsWrapper = styled.div` + margin-left: 15px; +` +export const Label = styled.div` + color: ${theme('article.title')}; + font-size: 13px; + margin-left: 1px; + margin-bottom: 8px; +` +export const InputBox = styled(InputBar)` + width: 300px; + min-width: 300px; + font-size: 14px; + text-align: left; + padding: 6px 18px; + border-radius: 8px; + height: 38px; + flex-grow: 0; + padding-left: 10px; + + ::placeholder { + font-size: 13px; + } +` + +export const ExtraInputBox = styled(FormInput)` + width: 300px; + background: transparent; + min-width: 300px; + font-size: 14px; + text-align: left; + padding: 6px 18px; + border-radius: 8px; + + ::placeholder { + font-size: 14px; + } +` + +export const ApplyIcon = styled(ApplySVG)` + fill: ${theme('article.title')}; + ${css.size(18)}; + margin-right: 10px; +` +export const Title = styled.div` + color: ${theme('banner.title')}; + font-size: 1.1rem; +` +export const NextBtn = styled.div` + ${css.row('align-center', 'justify-center')}; + width: 200px; + margin-left: -10px; + filter: grayscale(1); +` diff --git a/src/containers/editor/CommunityEditor/styles/banner/setup_info.ts b/src/containers/editor/CommunityEditor/styles/banner/setup_info.ts index e57a0510d..a6797221f 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/setup_info.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/setup_info.ts @@ -1,32 +1,31 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import { InputBar } from './input_box' import Img from '@/Img' import ApplySVG from '@/icons/Apply' -import WorksHolderSVG from '@/icons/WorksHolder' +import UploadSVG from '@/icons/Upload' export const Wrapper = styled.div` position: relative; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; color: ${theme('article.digest')}; - /* background-image: linear-gradient(#043B49, #022A35); */ background-image: ${theme('banner.linearGradient')}; width: 100%; - height: 350px; + height: 300px; ` export const IntroTitle = styled.div` position: relative; - ${css.flex('align-center')}; + ${css.row('align-center')}; color: ${theme('article.title')}; font-size: 18px; margin-bottom: 20px; - margin-left: -10px; ` export const InfoWrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; + margin-bottom: 38px; ` export const RealCover = styled(Img)` ${css.size(80)}; @@ -34,30 +33,39 @@ export const RealCover = styled(Img)` ` export const HolderWrapper = styled.div` ${css.size(80)}; - ${css.flex('align-both')}; border-radius: 6px; - background: #0c2631; + background: ${theme('hoverBg')}; ` - -export const HolderIcon = styled(WorksHolderSVG)` - ${css.size(58)}; - fill: #043b49; +export const HolderInner = styled.div` + width: 100%; + height: 100%; + ${css.column('align-both')}; opacity: 0.6; - transform: rotate(90deg); ${HolderWrapper}:hover & { opacity: 0; } transition: all 0.2s; ` - +export const HolderIcon = styled(UploadSVG)` + ${css.size(28)}; + fill: ${theme('lightText')}; + margin-bottom: 4px; + margin-top: 3px; +` +export const HolderText = styled.div` + font-size: 15px; + font-weight: 600; + color: ${theme('lightText')}; + font-style: italic; +` export const InputsWrapper = styled.div` margin-left: 15px; ` export const InputBox = styled(InputBar)` width: 300px; min-width: 300px; - font-size: 16px; + font-size: 14px; text-align: left; padding: 6px 18px; border-radius: 8px; @@ -76,17 +84,9 @@ export const Title = styled.div` color: ${theme('banner.title')}; font-size: 1.1rem; ` -export const StepHint = styled.div` - position: absolute; - color: ${theme('article.title')}; - font-size: 15px; - top: -35px; - left: 41%; - opacity: 0.5; -` export const NextBtn = styled.div` - position: absolute; - ${css.flex('align-center', 'justify-center')}; + ${css.row('align-center', 'justify-center')}; width: 200px; - bottom: 30px; + margin-left: 16px; + filter: grayscale(1); ` diff --git a/src/containers/editor/CommunityEditor/styles/content/demo_community.ts b/src/containers/editor/CommunityEditor/styles/content/demo_community.ts index 9db092f32..19484c0b7 100755 --- a/src/containers/editor/CommunityEditor/styles/content/demo_community.ts +++ b/src/containers/editor/CommunityEditor/styles/content/demo_community.ts @@ -1,16 +1,16 @@ import Link from 'next/link' import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import CommunityFaceLogo from '@/widgets/CommunityFaceLogo' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; flex-wrap: wrap; ` /* header bg */ export const Community = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; height: 30px; margin-right: 16px; margin-bottom: 5px; diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/content.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/content.ts index 87cffe173..0f9fe049a 100755 --- a/src/containers/editor/CommunityEditor/styles/content/fake_browser/content.ts +++ b/src/containers/editor/CommunityEditor/styles/content/fake_browser/content.ts @@ -1,68 +1,92 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' export const Wrapper = styled.div` - ${css.flexColumn()}; + ${css.column()}; width: 100%; + position: relative; +` +export const Desc = styled.div` + ${css.lineClamp(2)}; + position: absolute; + right: 70px; + top: 100px; + font-size: 12px; + color: ${theme('article.digest')}; + opacity: 0.5; + width: 150px; + word-break: break-all; ` export const BannerWrapper = styled.div` position: relative; - ${css.flex('align-center')}; - height: 130px; + ${css.row('align-center', 'justify-between')}; + height: 68px; padding: 0 80px; border-radius: 6px; - background: ${theme('banner.bg')}; ` export const IconBlock = styled.div` - ${css.size(52)}; - margin-top: -20px; - background: #083542; /* browser header bg */ + ${css.size(25)}; + background: ${theme('hoverBg')}; border: 1px solid; - border-color: #042a35; /* browser tab bg */ + border-color: ${theme('hoverBg')}; border-radius: 3px; ` +export const AccountIcon = styled(IconBlock)` + ${css.size(20)}; +` export const RealLogo = styled(Img)` - ${css.size(52)}; - margin-top: -20px; + ${css.size(25)}; margin-right: 20px; border: 1px solid; border-radius: 3px; ` export const Intro = styled.div` - ${css.flexColumn('align-start')}; - margin-top: -23px; - margin-left: 20px; + ${css.row('align-center')}; ` export const Title = styled.div` color: ${theme('article.title')}; - font-size: 16px; - margin-bottom: 4px; + font-size: 15px; + margin-left: 8px; + min-width: 100px; + ${css.cutRest('100px')}; ` -export const Desc = styled.div` - font-size: 14px; +export const TitleHolder = styled(Title)` color: ${theme('article.digest')}; - opacity: 0.8; + font-size: 14px; + opacity: 0.6; ` export const ThreadWrapper = styled.div` - position: absolute; - ${css.flex('align-center')}; - height: 20px; - bottom: 8px; + ${css.row('align-center')}; + gap: 0 15px; + margin-left: -60px; ` export const ThreadItem = styled.div` - margin-right: 32px; + font-size: 13px; + + &:hover { + color: ${theme('article.title')}; + cursor: pointer; + } ` export const FeedWrapper = styled.div` - ${css.flexColumn('align-start')} + ${css.column('align-start')} margin-top: 10px; padding: 25px 80px; ` +export const TagWrapper = styled.div<{ hasDesc: boolean }>` + position: absolute; + right: 70px; + top: 150px; + top: ${({ hasDesc }) => (hasDesc ? '150px' : '105px')}; + width: 150px; + transition: all 0.2s; +` export const Feed = styled.div<{ width: string }>` height: 10px; width: ${({ width }) => width}; border-radius: 4px; - background: ${theme('banner.bg')}; + background: ${theme('hoverBg')}; margin-bottom: 16px; ` diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/favicon.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/favicon.ts index b12a01eab..ac24d1092 100755 --- a/src/containers/editor/CommunityEditor/styles/content/fake_browser/favicon.ts +++ b/src/containers/editor/CommunityEditor/styles/content/fake_browser/favicon.ts @@ -1,19 +1,17 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css, { theme } from '@/css' import Img from '@/Img' -const headerBg = '#053542' - export const HolderIcon = styled.div` ${css.size(14)}; border-radius: 3px; - background: ${headerBg}; + background: ${theme('lightText')}; margin-left: 15px; ` export const RealIcon = styled(Img)` margin-left: 15px; ${css.size(14)}; border-radius: 3px; - background: ${headerBg}; + background: ${theme('lightText')}; ` diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts index 00ea00fd7..48552396f 100755 --- a/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts +++ b/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts @@ -1,23 +1,27 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import type { TActive } from '@/spec' + +import css, { theme } from '@/css' import Img from '@/Img' -const headerBg = '#053542' -const taberBg = '#022A35' -const contentBg = '#03303c' +const taberBg = '#F1F3F4' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; width: 100%; - height: 70vh; /* TODO */ - border-radius: 6px; - background: ${contentBg}; + min-height: 500px; + border-radius: 12px; + background: ${theme('alplaBg')}; border: 1px solid; - border-color: ${contentBg}; + border-color: #e5e5e5; + /* border-color: ${theme('hoverBg')}; */ + border-bottom: none; + + position: relative; ` export const Header = styled.div` - ${css.flex()}; + ${css.row()}; width: 100%; display: flex; padding: 8px 20px 0 12px; @@ -25,10 +29,10 @@ export const Header = styled.div` border-top-left-radius: 5px; border-top-right-radius: 5px; height: 36px; - background: ${headerBg}; + background: ${theme('alplaBg')}; ` export const Tab = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; flex-basis: 218px; background: ${taberBg}; border-bottom: 1px solid; @@ -86,7 +90,7 @@ export const TabContent = styled.div` ` export const AddressBar = styled.div` width: 100%; - ${css.flex('align-center')}; + ${css.row('align-center')}; background: ${taberBg}; border-bottom: 1px solid; border-bottom-color: ${taberBg}; @@ -102,18 +106,19 @@ export const ToolbarWrapper = styled.div` height: 24px; ` export const ToolIcon = styled(Img)<{ reverse?: boolean }>` - fill: ${theme('article.title')}; + fill: ${theme('article.digest')}; + opacity: 0.6; ${css.size(16)}; transform: ${({ reverse }) => (reverse ? 'rotate(180deg)' : '')}; ` export const LockIcon = styled(ToolIcon)` - ${css.size(12)}; - margin-top: 2px; + ${css.size(11)}; + margin-top: 3px; ` export const Form = styled.form` - ${css.flex('align-center')}; + ${css.row('align-center')}; flex-grow: 1; - background: ${headerBg}; + background: ${theme('alphaBg2')}; height: 28px; border-radius: 15px; margin-left: 4px; @@ -126,7 +131,27 @@ export const Input = styled.div` padding-left: 4px; font-size: 14px; ` -export const DomainText = styled.span` - color: #309999; - margin-left: 1px; +export const SubDomain = styled.div` + background: linear-gradient(to right, rgb(196, 121, 222), rgb(248, 190, 109)); + font-weight: 550; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +` +export const Slash = styled.div` + display: inline-block; + margin-left: 2px; + margin-right: 1px; + font-size: 10px; + margin-top: 1px; + color: ${theme('article.digest')}; + opacity: 0.8; +` +export const ThreadPath = styled.div` + ${css.row('align-center')}; + opacity: ${({ $active }) => ($active ? 1 : 0)}; +` +export const ThreadText = styled.div` + color: ${theme('article.digest')}; + opacity: 0.6; ` diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts new file mode 100644 index 000000000..1c0a023bd --- /dev/null +++ b/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts @@ -0,0 +1,70 @@ +import styled from 'styled-components' + +import css, { theme } from '@/css' + +import CheckSVG from '@/icons/Check' + +export const Wrapper = styled.div` + height: 320px; + width: calc(100% + 6px); + position: absolute; + left: -3px; + bottom: -50px; + background: rgb(255, 255, 255); + background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%); + border-radius: 10px; + padding: 0 82px; + padding-top: 120px; +` +export const InnerWrapper = styled.div` + width: calc(100% + 148px); + ${css.row()}; + flex-wrap: wrap; + gap: 16px 0; +` +export const InnerWrapperColumn = styled.div` + ${css.column()}; + width: calc(100% + 118px); + gap: 12px; +` +export const Item = styled.div` + ${css.row('align-center')}; + color: ${theme('article.title')}; + width: 33%; +` +export const ColumnItem = styled(Item)` + width: 100%; +` +export const Dot = styled.div` + ${css.circle(4)}; + background: ${theme('article.digest')}; + margin-right: 8px; +` +export const CheckIcon = styled(CheckSVG)` + ${css.size(15)}; + margin-right: 8px; + fill: ${theme('baseColor.green')}; +` +export const Header = styled.div` + ${css.column('align-both')}; + width: 100%; + margin-bottom: 30px; + margin-left: 25px; +` +export const Divider = styled.div` + width: 160px; + height: 2px; + margin-left: -10px; + margin-top: 20px; + border-bottom: 1px solid transparent; + border-image: linear-gradient( + 0.25turn, + transparent, + ${theme('divider')}, + ${theme('divider')}, + ${theme('divider')}, + transparent + ); + + border-image-slice: 1; +` diff --git a/src/containers/editor/CommunityEditor/styles/content/index.ts b/src/containers/editor/CommunityEditor/styles/content/index.ts index 7808a31fc..a845b5970 100755 --- a/src/containers/editor/CommunityEditor/styles/content/index.ts +++ b/src/containers/editor/CommunityEditor/styles/content/index.ts @@ -1,9 +1,8 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' export const Wrapper = styled.div` - ${css.flex('justify-center')}; - min-height: calc(100vh - 350px); /* 350 is the banner max height */ + ${css.row('justify-center')}; ` export const holder = 1 diff --git a/src/containers/editor/CommunityEditor/styles/content/more_info.ts b/src/containers/editor/CommunityEditor/styles/content/more_info.ts deleted file mode 100755 index 4c30b4f11..000000000 --- a/src/containers/editor/CommunityEditor/styles/content/more_info.ts +++ /dev/null @@ -1,37 +0,0 @@ -import styled from 'styled-components' - -import { Divider } from '@/widgets/Common' - -import Img from '@/Img' -import css, { theme } from '@/utils/css' - -export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; - width: 380px; - height: 300px; - margin-top: 50px; - margin-bottom: 60px; -` - -export const LineDivider = styled(Divider)` - margin-bottom: 50px; -` -export const Block = styled.div` - ${css.flex('align-center')}; - padding: 0 25px; -` -export const Logo = styled(Img)` - ${css.size(50)}; -` -export const Intro = styled.div` - margin-left: 20px; -` -export const Title = styled.div` - color: ${theme('article.title')}; - font-size: 17px; -` -export const Desc = styled.div` - ${css.lineClamp(2)} - color: ${theme('article.digest')}; - font-size: 14px; -` diff --git a/src/containers/editor/CommunityEditor/styles/content/select_type.ts b/src/containers/editor/CommunityEditor/styles/content/select_type.ts index 4801a9556..61927f613 100755 --- a/src/containers/editor/CommunityEditor/styles/content/select_type.ts +++ b/src/containers/editor/CommunityEditor/styles/content/select_type.ts @@ -1,17 +1,16 @@ -import Link from 'next/link' import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' + import Img from '@/Img' export const Wrapper = styled.div` - ${css.flex('justify-between')}; + ${css.row('justify-between')}; width: 700px; - margin-top: 60px; min-height: 300px; ` const Block = styled.div` - ${css.flexColumn('align-start')}; + ${css.column('align-start')}; padding: 15px; width: 45%; ` @@ -23,7 +22,7 @@ export const RightBlock = styled(Block)` padding-left: 40px; ` export const Header = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-bottom: 18px; ` const Icon = styled(Img)` @@ -46,22 +45,9 @@ export const Desc = styled.div` color: ${theme('article.digest')}; line-height: 1.7; ` - export const CommunityDemoWrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; flex-wrap: wrap; margin-bottom: 10px; -` -export const MoreLink = styled(Link)` - font-size: 13px; - color: #139c9e; - cursor: pointer; - text-decoration: none; - opacity: 0.8; - - &:hover { - opacity: 1; - text-decoration: underline; - color: #139c9e; - } + margin-top: -4px; ` diff --git a/src/containers/editor/CommunityEditor/styles/content/setup_domain.ts b/src/containers/editor/CommunityEditor/styles/content/setup_domain.ts index 95c8154ed..5fae2ca71 100755 --- a/src/containers/editor/CommunityEditor/styles/content/setup_domain.ts +++ b/src/containers/editor/CommunityEditor/styles/content/setup_domain.ts @@ -1,12 +1,11 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; width: 80%; max-width: 820px; - height: 400px; border-radius: 6px; margin-top: 20px; margin-bottom: 60px; diff --git a/src/containers/editor/CommunityEditor/styles/header/index.ts b/src/containers/editor/CommunityEditor/styles/header/index.ts new file mode 100644 index 000000000..a39076958 --- /dev/null +++ b/src/containers/editor/CommunityEditor/styles/header/index.ts @@ -0,0 +1,59 @@ +import styled from 'styled-components' + +import Img from '@/Img' +import css, { theme } from '@/css' + +import AccountSVG from '@/icons/Acount' +import { LineDivider } from '@/widgets/Common' + +export const Wrapper = styled.div` + ${css.row('align-center')}; + padding: 0 10%; + width: 100%; + height: 78px; +` +export const Logo = styled(Img)` + ${css.size(20)}; + margin-right: 8px; +` +export const Title = styled.div` + color: ${theme('article.title')}; + font-size: 15px; + font-weight: 500; +` +export const Divider = styled(LineDivider)` + background: ${theme('lightText')}; +` + +export const SubTitle = styled.div` + color: ${theme('article.digest')}; + font-size: 14px; +` + +export const Avatar = styled(Img)` + ${css.circle(18)}; + ${css.row('justify-between')}; + margin-top: -4px; +` + +const hoverEffect = ` + opacity: 0.8; + + &:hover { + opacity: 1; + cursor: pointer; + } + transition: all 0.2s; +` + +export const AccountIcon = styled(AccountSVG)` + fill: ${theme('article.digest')}; + ${css.size(14)}; + margin-top: -4px; + + ${hoverEffect} + + ${css.media.mobile` + margin-right: 0; + `}; +` diff --git a/src/containers/editor/CommunityEditor/styles/header/status_ball.ts b/src/containers/editor/CommunityEditor/styles/header/status_ball.ts new file mode 100644 index 000000000..e0a3d27fb --- /dev/null +++ b/src/containers/editor/CommunityEditor/styles/header/status_ball.ts @@ -0,0 +1,32 @@ +import styled from 'styled-components' + +import css, { theme } from '@/css' + +import CheckSVG from '@/icons/CheckBold' + +const Wrapper = styled.div` + ${css.circle(20)}; + ${css.row('align-both')}; + border: 1px solid; + border-color: ${theme('article.digest')}; +` +export const DoneWrapper = styled(Wrapper)` + background: ${theme('article.digest')}; + transform: scale(0.8); +` +export const DoingWrapper = styled(Wrapper)` + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + transform: scale(1); +` +export const Dot = styled.div` + ${css.circle(6)}; + background: ${theme('article.digest')}; +` +export const TodoWrapper = styled(Wrapper)` + opacity: 0.4; + transform: scale(0.8); +` +export const CheckIcon = styled(CheckSVG)` + ${css.size(12)}; + fill: white; +` diff --git a/src/containers/editor/CommunityEditor/styles/header/step_map.ts b/src/containers/editor/CommunityEditor/styles/header/step_map.ts new file mode 100644 index 000000000..f1095f973 --- /dev/null +++ b/src/containers/editor/CommunityEditor/styles/header/step_map.ts @@ -0,0 +1,32 @@ +import styled from 'styled-components' + +import css, { theme } from '@/css' + +import TadaSVG from '@/icons/Tada' + +export const Wrapper = styled.div` + ${css.row('align-center', 'justify-between')}; + margin-left: -160px; +` +export const Line = styled.div` + width: 30px; + height: 2px; + margin: 0 4px; + opacity: 0.5; + + border-bottom: 1px solid transparent; + border-image: linear-gradient( + 0.25turn, + transparent, + ${theme('lightText')}, + ${theme('lightText')}, + ${theme('lightText')}, + transparent + ); + + border-image-slice: 1; +` + +export const TadaIcon = styled(TadaSVG)` + ${css.size(20)}; +` diff --git a/src/containers/editor/CommunityEditor/styles/hinter.ts b/src/containers/editor/CommunityEditor/styles/hinter.ts index b98efb761..b9f1805b3 100755 --- a/src/containers/editor/CommunityEditor/styles/hinter.ts +++ b/src/containers/editor/CommunityEditor/styles/hinter.ts @@ -1,9 +1,9 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div` - ${css.flexColumn('align-start')}; + ${css.column('align-start')}; ` export const Title = styled.div` color: ${theme('article.digest')}; diff --git a/src/containers/editor/CommunityEditor/styles/index.ts b/src/containers/editor/CommunityEditor/styles/index.ts index 77e5de3ad..e7ccd2101 100755 --- a/src/containers/editor/CommunityEditor/styles/index.ts +++ b/src/containers/editor/CommunityEditor/styles/index.ts @@ -1,15 +1,17 @@ import styled from 'styled-components' import type { TMetric } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' export const Wrapper = styled.div<{ metric: TMetric }>` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 100%; + height: 100%; + ${({ metric }) => css.fitPageWidth(metric)}; ` export const InnerWrapper = styled.div<{ metric: TMetric }>` - ${css.flexColumn('justify-center')}; + ${css.column('justify-center')}; width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; ` diff --git a/src/containers/editor/CoverEditor/styles/cover/index.ts b/src/containers/editor/CoverEditor/styles/cover/index.ts index ad3dd9cd9..00e8adac6 100644 --- a/src/containers/editor/CoverEditor/styles/cover/index.ts +++ b/src/containers/editor/CoverEditor/styles/cover/index.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import Img from '@/Img' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import { pixelAdd } from '@/utils/dom' import type { TCoverImage, TImagePos } from '../../spec' @@ -19,7 +19,7 @@ import { getImageTranslate, getLinearBorder, getImageSize, getLightPos } from '. type TWrapper = { hasImage: boolean; background: string } export const Wrapper = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: ${IMAGE_CONTAINER_SIZE.WIDTH}; height: ${IMAGE_CONTAINER_SIZE.HEIGHT}; border: 1px solid; @@ -36,7 +36,7 @@ type TGlassBorder = TCoverImage & { hasGlassBorder: boolean } export const GlassBorder = styled.div` border-radius: ${({ borderRadiusLevel }) => pixelAdd(IMAGE_BORDER_RADIUS[borderRadiusLevel], 5)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; min-width: ${({ size, ratio, hasGlassBorder }) => pixelAdd(getImageSize(size, ratio).width, hasGlassBorder ? 15 : 0)}; diff --git a/src/containers/editor/CoverEditor/styles/cover/placeholder.ts b/src/containers/editor/CoverEditor/styles/cover/placeholder.ts index ccd358986..8f5d76fb4 100644 --- a/src/containers/editor/CoverEditor/styles/cover/placeholder.ts +++ b/src/containers/editor/CoverEditor/styles/cover/placeholder.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' import Img from '@/Img' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import UploadSVG from '@/icons/Upload' export const Wrapper = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 680px; height: 400px; border: 1px solid; diff --git a/src/containers/editor/CoverEditor/styles/index.ts b/src/containers/editor/CoverEditor/styles/index.ts index 70b1ffd0e..0a1d5e2d7 100644 --- a/src/containers/editor/CoverEditor/styles/index.ts +++ b/src/containers/editor/CoverEditor/styles/index.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import css from '@/utils/css' +import css from '@/css' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; margin-bottom: 30px; position: relative; padding-bottom: 30px; diff --git a/src/containers/editor/CoverEditor/styles/metric.ts b/src/containers/editor/CoverEditor/styles/metric.ts index 7a7dd5f3f..194a9d50a 100644 --- a/src/containers/editor/CoverEditor/styles/metric.ts +++ b/src/containers/editor/CoverEditor/styles/metric.ts @@ -1,4 +1,4 @@ -// import { theme } from '@/utils/css' +// import { theme } from '@/css' import type { TWallpaperGradientDir } from '@/spec' import { GRADIENT_DIRECTION } from '@/constant/wallpaper' diff --git a/src/containers/editor/CoverEditor/styles/toolbox/action_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/action_block.ts index 0b66a3763..cb70cbfc7 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/action_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/action_block.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import SettingSVG from '@/icons/Setting' import DeleteSVG from '@/icons/Delete' @@ -8,13 +8,13 @@ import { SettingBlock, SettingTitle } from '.' export const Wrapper = styled.div` ${css.size(60)}; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Block = styled(SettingBlock)`` export const Panel = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; gap: 0 15px; color: ${theme('article.digest')}; width: 200px; @@ -24,7 +24,7 @@ export const Panel = styled.div` backdrop-filter: blur(5px); ` export const Item = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; font-size: 11px; border: 1px solid transparent; border-radius: 3px; diff --git a/src/containers/editor/CoverEditor/styles/toolbox/background_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/background_block.ts index 86bb066fc..5ea76762a 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/background_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/background_block.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TActive, TWallpaperGradientDir } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ArchSVG from '@/icons/Arch' import ArrowSVG from '@/icons/Arrow' @@ -11,12 +11,12 @@ import { getBgGradientDirAngle } from '../metric' export const Wrapper = styled.div` ${css.size(60)}; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Block = styled(SettingBlock)`` export const Panel = styled.div` - ${css.flexColumn('align-start')}; + ${css.column('align-start')}; width: 320px; height: 200px; padding: 10px; @@ -35,7 +35,7 @@ export const Title = styled.div` ` export const BgRow = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; flex-wrap: wrap; gap: 10px; ` @@ -50,7 +50,7 @@ export const Divider = styled.div` ` export const DirRow = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; flex-wrap: wrap; gap: 0 12px; ` @@ -65,7 +65,7 @@ export const BgImage = styled.div<{ background: string }>` export const ImageWrapper = styled.div` ${css.size(28)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; border: 1px solid transparent; background-color: white; border-radius: 3px; @@ -82,7 +82,7 @@ export const ImageWrapper = styled.div` export const DirWrapper = styled(ImageWrapper)` ${css.size(24)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; ` type TImageBlock = { background: string } diff --git a/src/containers/editor/CoverEditor/styles/toolbox/border_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/border_block.ts index 62aefde41..f6027d555 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/border_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/border_block.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ArchSVG from '@/icons/Arch' import EmptySVG from '@/icons/Empty' @@ -13,13 +13,13 @@ import { getLinearBorder } from '../metric' export const Wrapper = styled.div` ${css.size(60)}; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Block = styled(SettingBlock)`` export const Panel = styled.div` - ${css.flexColumn('justify-center', 'align-start')}; + ${css.column('justify-center', 'align-start')}; color: ${theme('article.digest')}; width: 252px; height: 180px; @@ -44,10 +44,10 @@ export const Desc = styled(SettingTitle)` } ` export const Row = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; ` export const RadiusContentsRow = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; width: 160px; gap: 10px 12px; margin-left: 13px; @@ -66,11 +66,11 @@ export const RowTitle = styled.div` width: 45px; ` export const BorderRow = styled.div` - ${css.flex('align-start')}; + ${css.row('align-start')}; gap: 0 18px; ` export const BorderContentsRow = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; flex-wrap: wrap; width: 160px; gap: 10px 12px; @@ -140,7 +140,7 @@ export const BorderBox = styled.div` ` export const SelectBox = styled.div` ${css.size(16)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; border: 1px solid; border-radius: 3px; background: white; diff --git a/src/containers/editor/CoverEditor/styles/toolbox/index.ts b/src/containers/editor/CoverEditor/styles/toolbox/index.ts index c83c96b14..e56a68bf1 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/index.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/index.ts @@ -1,14 +1,14 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { animate, theme } from '@/utils/css' +import css, { animate, theme } from '@/css' import UploadSVG from '@/icons/Upload' import { Wrapper as Container } from '..' export const Wrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; position: absolute; bottom: 0; width: 440px; @@ -47,7 +47,7 @@ export const Desc = styled.div` ` export const SettingBlock = styled.div` ${css.size(29)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; border-radius: 2px; border: 1px solid; border-color: ${({ $active }) => ($active ? theme('article.digest') : theme('divider'))}; diff --git a/src/containers/editor/CoverEditor/styles/toolbox/light_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/light_block.ts index e78e26530..86b3727a7 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/light_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/light_block.ts @@ -1,17 +1,17 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' // import UploadSVG from '@/icons/Upload' export const Wrapper = styled.div` ${css.size(60)}; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Block = styled.div` ${css.size(48)}; - ${css.flex()}; + ${css.row()}; flex-wrap: wrap; gap: 3px; padding: 4px; diff --git a/src/containers/editor/CoverEditor/styles/toolbox/position_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/position_block.ts index 414a07276..c5e24a2bd 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/position_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/position_block.ts @@ -1,17 +1,17 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' // import UploadSVG from '@/icons/Upload' export const Wrapper = styled.div` ${css.size(60)}; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Block = styled.div` ${css.size(47)}; - ${css.flex()}; + ${css.row()}; flex-wrap: wrap; border-radius: 2px; border: 1px solid; diff --git a/src/containers/editor/CoverEditor/styles/toolbox/ratio_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/ratio_block.ts index 7213c11a5..70338ce61 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/ratio_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/ratio_block.ts @@ -1,20 +1,20 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import RatioSVG from '@/icons/Ratio' import { SettingBlock, SettingTitle } from '.' export const Wrapper = styled.div` ${css.size(60)}; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Block = styled(SettingBlock)`` export const Panel = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; gap: 0 15px; color: ${theme('article.digest')}; width: 200px; diff --git a/src/containers/editor/CoverEditor/styles/toolbox/rotate_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/rotate_block.ts index 411750458..91418cc3e 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/rotate_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/rotate_block.ts @@ -1,19 +1,19 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import RotateSVG from '@/icons/Rotate' import { SettingBlock, SettingTitle } from '.' export const Wrapper = styled.div` ${css.size(60)}; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Block = styled(SettingBlock)`` export const Panel = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; color: ${theme('article.digest')}; width: 220px; height: 100px; diff --git a/src/containers/editor/CoverEditor/styles/toolbox/shadow_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/shadow_block.ts index 1938d3a86..415b2a75b 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/shadow_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/shadow_block.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ShadowSVG from '@/icons/Shadow' import EmptySVG from '@/icons/Empty' @@ -10,7 +10,7 @@ import { SettingBlock, SettingTitle } from '.' export const Wrapper = styled.div` ${css.size(60)}; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Block = styled(SettingBlock)`` @@ -30,7 +30,7 @@ export const Desc = styled(SettingTitle)` } ` export const Panel = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; gap: 0 15px; color: ${theme('article.digest')}; width: 200px; @@ -58,7 +58,7 @@ export const ShadowBox = styled.div` export const SelectBox = styled.div` ${css.size(20)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; border: 1px solid; border-radius: 3px; background: white; diff --git a/src/containers/editor/CoverEditor/styles/toolbox/size_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/size_block.ts index 3815f6be1..7d2ac3cb4 100644 --- a/src/containers/editor/CoverEditor/styles/toolbox/size_block.ts +++ b/src/containers/editor/CoverEditor/styles/toolbox/size_block.ts @@ -1,19 +1,19 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ImageSizeSVG from '@/icons/ImageSize' import { SettingBlock, SettingTitle } from '.' export const Wrapper = styled.div` ${css.size(60)}; - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; ` export const Block = styled(SettingBlock)`` export const Panel = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; gap: 0 15px; color: ${theme('article.digest')}; width: 200px; @@ -26,7 +26,7 @@ export const Panel = styled.div` type TItem = { fontSize: number } & TActive export const Item = styled.div` ${css.size(26)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; font-size: ${({ fontSize }) => `${fontSize}px`}; color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))}; border: 1px solid transparent; diff --git a/src/containers/editor/PassportEditor/Selects.tsx b/src/containers/editor/PassportEditor/Selects.tsx new file mode 100644 index 000000000..acda6a8fe --- /dev/null +++ b/src/containers/editor/PassportEditor/Selects.tsx @@ -0,0 +1,60 @@ +import { FC } from 'react' + +import { keys, includes } from 'ramda' + +import Checker from '@/widgets/Checker' + +import { Wrapper, Item, ReadonlyItem, CheckIcon, RootCheckIcon, ItemTitle } from './styles/selects' +import { toggleCheck } from './logic' + +type TProps = { + rules: string + moderatorRules: string + selectedRules: string[] + readonly?: boolean +} + +const Selects: FC = ({ rules, moderatorRules, selectedRules, readonly = false }) => { + const optionsJson = JSON.parse(rules) + const optionKeys = keys(optionsJson) + + if (readonly) { + const moderatorKeys = keys(JSON.parse(moderatorRules)) + + return ( + + {optionKeys.map((ruleKey: string) => { + const isRootRule = !includes(ruleKey, moderatorKeys) + + return ( + + {isRootRule ? : } + + {ruleKey} + + ) + })} + + ) + } + + return ( + + {optionKeys.map((ruleKey: string) => { + return ( + + toggleCheck(ruleKey, checked)} + > + {ruleKey} + + + ) + })} + + ) +} + +export default Selects diff --git a/src/containers/editor/PassportEditor/index.tsx b/src/containers/editor/PassportEditor/index.tsx new file mode 100644 index 000000000..c082e16f3 --- /dev/null +++ b/src/containers/editor/PassportEditor/index.tsx @@ -0,0 +1,83 @@ +/* * + * PassportEditor + * + */ + +import { FC } from 'react' + +// import { buildLog } from '@/utils/logger' +import { bond } from '@/utils/mobx' + +import { SexyDivider } from '@/widgets/Common' +import Button from '@/widgets/Buttons/Button' + +import type { TStore } from './store' +import Selects from './Selects' + +import { Wrapper, Desc, Footer, RootSign } from './styles' +import { useInit, updatePassport } from './logic' /* eslint-disable-next-line */ + +// const log = buildLog('C:PassportEditor') + +type TProps = { + passportEditor?: TStore + testid: string +} + +const PassportEditorContainer: FC = ({ passportEditor: store, testid }) => { + useInit(store) + const { + curCommunity, + allModeratorRules, + allRootRules, + selectedRulesData, + activeModerator, + isActiveModeratorRoot, + isCurUserModeratorRoot, + } = store + + const rules = isActiveModeratorRoot ? allRootRules : allModeratorRules + const readonly = isActiveModeratorRoot || !isCurUserModeratorRoot + + return ( + + {!isActiveModeratorRoot ?

权限设置

: ROOT} + {isActiveModeratorRoot ? ( + + {activeModerator.nickname} 拥有 {curCommunity.title} 社区的所有管理权限 + + ) : ( + + 在 {curCommunity.title} 社区范围内，{activeModerator.nickname} 拥有以下权限 + + )} + + + + + {!readonly && ( +
+ + +
+ )} + + {isActiveModeratorRoot && isCurUserModeratorRoot && ( +
+ +
+ )} + + ) +} + +export default bond(PassportEditorContainer, 'passportEditor') as FC diff --git a/src/containers/editor/PassportEditor/logic.ts b/src/containers/editor/PassportEditor/logic.ts new file mode 100644 index 000000000..42296cd42 --- /dev/null +++ b/src/containers/editor/PassportEditor/logic.ts @@ -0,0 +1,136 @@ +import { useEffect } from 'react' + +import { uniq, reject, keys } from 'ramda' + +import EVENT from '@/constant/event' + +import { buildLog } from '@/utils/logger' +import asyncSuit from '@/utils/async' +import { send, errRescue, closeDrawer } from '@/utils/signal' +import { toJS } from '@/utils/mobx' +import ERR from '@/constant/err' + +import S from './schema' +import type { TStore } from './store' + +let sub$ = null +let store: TStore | undefined + +const { SR71, $solver, asyncRes, asyncErr } = asyncSuit +const sr71$ = new SR71() + +/* eslint-disable-next-line */ +const log = buildLog('L:PassportEditor') + +export const toggleCheck = (rule: string, checked: boolean): void => { + const { selectedRulesData } = store + const _selectedRules = checked + ? [...selectedRulesData, rule] + : reject((i) => i === rule, selectedRulesData) + + store.mark({ selectedRules: uniq(_selectedRules) }) +} + +export const updatePassport = (): void => { + const { curCommunity, allModeratorRules, selectedRules, activeModerator } = store + const community = curCommunity.slug + + const innerRules = {} + toJS(keys(JSON.parse(allModeratorRules))).forEach((key) => { + innerRules[key] = false + }) + + toJS(selectedRules).forEach((key) => { + innerRules[key] = true + }) + + const rules = JSON.stringify({ + [community]: innerRules, + }) + + sr71$.mutate(S.updateModeratorPassport, { community, user: activeModerator.login, rules }) +} + +export const loadUserPassport = (): void => { + store.mark({ selectedRules: [] }) + sr71$.query(S.userPassport, { login: store.activeModerator.login }) +} + +export const loadAllPassportRules = (): void => { + const { allPassportLoaded } = store + if (allPassportLoaded) { + loadUserPassport() + return + } + + sr71$.query(S.allPassportRules) +} + +// ############################### +// init & uninit handlers +// ############################### +const DataSolver = [ + { + match: asyncRes('user'), + action: ({ user }) => { + const { curCommunity } = store + const { cmsPassportString } = user + const passportJson = JSON.parse(cmsPassportString) + + if (passportJson[curCommunity.slug]) { + store.mark({ selectedRules: keys(passportJson[curCommunity.slug]) }) + } + }, + }, + + { + match: asyncRes('allPassportRules'), + action: ({ allPassportRules }) => { + const { moderator, root } = allPassportRules + store.setAllPassportRules(root, moderator) + sr71$.query(S.userPassport, { login: store.activeModerator.login }) + }, + }, + { + match: asyncRes('updateModeratorPassport'), + action: () => { + closeDrawer() + send(EVENT.REFRESH_MODERATORS) + }, + }, +] + +const ErrSolver = [ + { + match: asyncErr(ERR.GRAPHQL), + action: ({ details }) => { + errRescue({ type: ERR.GRAPHQL, details, path: 'PassportEditor' }) + }, + }, + { + match: asyncErr(ERR.TIMEOUT), + action: ({ details }) => { + errRescue({ type: ERR.TIMEOUT, details, path: 'PassportEditor' }) + }, + }, + { + match: asyncErr(ERR.NETWORK), + action: () => errRescue({ type: ERR.NETWORK, path: 'PassportEditor' }), + }, +] + +export const useInit = (_store: TStore): void => { + useEffect(() => { + store = _store + + if (!sub$) { + sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) + } + loadAllPassportRules() + + return () => { + sub$.unsubscribe() + sub$ = null + } + }, [_store]) +} diff --git a/src/containers/editor/PassportEditor/schema.ts b/src/containers/editor/PassportEditor/schema.ts new file mode 100644 index 000000000..430b70f6b --- /dev/null +++ b/src/containers/editor/PassportEditor/schema.ts @@ -0,0 +1,34 @@ +import { gql } from 'urql/core' + +const userPassport = gql` + query ($login: String) { + user(login: $login) { + cmsPassportString + } + } +` + +const allPassportRules = gql` + query { + allPassportRules { + root + moderator + } + } +` + +const updateModeratorPassport = gql` + mutation ($community: String!, $user: String!, $rules: Json!) { + updateModeratorPassport(community: $community, user: $user, rules: $rules) { + slug + } + } +` + +const schema = { + userPassport, + allPassportRules, + updateModeratorPassport, +} + +export default schema diff --git a/src/containers/editor/PassportEditor/store.ts b/src/containers/editor/PassportEditor/store.ts new file mode 100644 index 000000000..2137ed948 --- /dev/null +++ b/src/containers/editor/PassportEditor/store.ts @@ -0,0 +1,83 @@ +/* + * PassportEditor store + */ + +import { find } from 'ramda' + +import type { TCommunity, TRootStore, TUser, TAccount } from '@/spec' +import { buildLog } from '@/utils/logger' +import { markStates, toJS, T, getParent, Instance } from '@/utils/mobx' + +/* eslint-disable-next-line */ +const log = buildLog('S:PassportEditor') + +const PassportEditor = T.model('PassportEditor', { + selectedRules: T.opt(T.array(T.str), []), +}) + .views((self) => ({ + get accountInfo(): TAccount { + const root = getParent(self) as TRootStore + return root.accountInfo + }, + get curCommunity(): TCommunity { + const root = getParent(self) as TRootStore + + return toJS(root.viewing.community) + }, + get activeModerator(): TUser { + const root = getParent(self) as TRootStore + + return toJS(root.dashboardThread.activeModerator) + }, + get isCurUserModeratorRoot(): boolean { + const slf = self as TStore + const { curCommunity, accountInfo } = slf + + const curModerators = curCommunity.moderators + const curRoot = find((moderator) => moderator.role === 'root', curModerators) + + return curRoot.user.login === accountInfo.login + }, + get isActiveModeratorRoot(): boolean { + const slf = self as TStore + const { curCommunity, activeModerator } = slf + + const curModerators = curCommunity.moderators + const curRoot = find((moderator) => moderator.role === 'root', curModerators) + + return curRoot.user.login === activeModerator.login + }, + get allRootRules(): string { + const root = getParent(self) as TRootStore + + return toJS(root.dashboardThread.allRootRules) + }, + get allModeratorRules(): string { + const root = getParent(self) as TRootStore + + return toJS(root.dashboardThread.allModeratorRules) + }, + get selectedRulesData(): string[] { + return toJS(self.selectedRules) + }, + + get allPassportLoaded(): boolean { + const root = getParent(self) as TRootStore + + return toJS(root.dashboardThread.allModeratorRules) !== '{}' + }, + })) + .actions((self) => ({ + setAllPassportRules(rootRules: string, moderatorRules): void { + const root = getParent(self) as TRootStore + + root.dashboardThread.setAllPassportRules(rootRules, moderatorRules) + }, + mark(sobj: Record): void { + markStates(sobj, self) + }, + })) + +export type TStore = Instance + +export default PassportEditor diff --git a/src/containers/editor/PassportEditor/styles/index.ts b/src/containers/editor/PassportEditor/styles/index.ts new file mode 100644 index 000000000..7e04f1e48 --- /dev/null +++ b/src/containers/editor/PassportEditor/styles/index.ts @@ -0,0 +1,36 @@ +import styled from 'styled-components' + +import type { TTestable } from '@/spec' +import css, { theme } from '@/css' + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` + padding: 24px 30px; + // +` +export const Desc = styled.div` + color: ${theme('article.digest')}; + margin-top: 3px; + opacity: 0.8; + font-size: 13px; +` +export const Footer = styled.div` + width: 100%; + ${css.row('align-both')}; + padding-right: 50px; + gap: 0 14px; +` + +export const RootSign = styled.span` + display: inline-block; + background: ${theme('baseColor.blueBg')}; + color: ${theme('baseColor.blue')}; + border: 1px solid; + border-color: ${theme('baseColor.blue')}; + font-size: 12px; + font-weight: bold; + padding: 1px 6px; + border-radius: 5px; + margin-bottom: 5px; +` diff --git a/src/containers/editor/PassportEditor/styles/selects.ts b/src/containers/editor/PassportEditor/styles/selects.ts new file mode 100644 index 000000000..bfec8faa6 --- /dev/null +++ b/src/containers/editor/PassportEditor/styles/selects.ts @@ -0,0 +1,35 @@ +import styled from 'styled-components' + +import css, { theme } from '@/css' + +import RootCheckSVG from '@/icons/CheckCircle' +import CheckSVG from '@/icons/Check' + +export const Wrapper = styled.div` + width: 100%; + ${css.row()}; + flex-wrap: wrap; + gap: 10px 0; + position: relative; +` +export const Item = styled.div` + width: 50%; +` +export const ReadonlyItem = styled.div` + ${css.row('align-center')}; + width: 50%; +` +export const CheckIcon = styled(CheckSVG)` + ${css.size(12)}; + fill: ${theme('baseColor.green')}; + margin-right: 5px; +` +export const RootCheckIcon = styled(RootCheckSVG)` + ${css.size(12)}; + fill: ${theme('baseColor.green')}; + margin-right: 5px; +` + +export const ItemTitle = styled.div` + ${css.lineClamp(1)}; +` diff --git a/src/containers/editor/PassportEditor/tests/index.test.js b/src/containers/editor/PassportEditor/tests/index.test.js new file mode 100644 index 000000000..ffb5244e1 --- /dev/null +++ b/src/containers/editor/PassportEditor/tests/index.test.js @@ -0,0 +1,10 @@ +// import React from 'react' +// import { shallow } from 'enzyme' + +// import PassportEditor from '../index' + +describe('TODO ', () => { + it('Expect to have unit tests specified', () => { + expect(true).toEqual(true) + }) +}) diff --git a/src/containers/editor/PassportEditor/tests/store.test.js b/src/containers/editor/PassportEditor/tests/store.test.js new file mode 100644 index 000000000..8b04e937d --- /dev/null +++ b/src/containers/editor/PassportEditor/tests/store.test.js @@ -0,0 +1,10 @@ +/* + * PassportEditor store test + * + */ + +// import PassportEditor from '../index' + +it('TODO: store test PassportEditor', () => { + expect(1 + 1).toBe(2) +}) diff --git a/src/containers/editor/RichEditor/styles/index.ts b/src/containers/editor/RichEditor/styles/index.ts index ef45694ae..4e21df886 100755 --- a/src/containers/editor/RichEditor/styles/index.ts +++ b/src/containers/editor/RichEditor/styles/index.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import { getWidth, getMinHeight } from './metric' export const Wrapper = styled.div` - ${css.flexColumn('align-center')}; + ${css.column('align-center')}; position: relative; width: 100%; /* height: 100%; */ diff --git a/src/containers/editor/RichEditor/styles/options.ts b/src/containers/editor/RichEditor/styles/options.ts index 98adf2edc..9a835a985 100755 --- a/src/containers/editor/RichEditor/styles/options.ts +++ b/src/containers/editor/RichEditor/styles/options.ts @@ -1,9 +1,9 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' export const Wrapper = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: calc(100% + 10px); margin-top: 20px; margin-bottom: 20px; diff --git a/src/containers/editor/RichEditor/styles/overwrite.ts b/src/containers/editor/RichEditor/styles/overwrite.ts index a2a96662c..d563ebd10 100755 --- a/src/containers/editor/RichEditor/styles/overwrite.ts +++ b/src/containers/editor/RichEditor/styles/overwrite.ts @@ -1,5 +1,5 @@ import { createGlobalStyle } from 'styled-components' -import { theme } from '@/utils/css' +import { theme } from '@/css' const mateColor = '#30B1AC' const linkColor = '#30B1AC' diff --git a/src/containers/editor/TagSettingEditor/styles/footer.ts b/src/containers/editor/TagSettingEditor/styles/footer.ts index 026a0b79a..ea7badc3d 100644 --- a/src/containers/editor/TagSettingEditor/styles/footer.ts +++ b/src/containers/editor/TagSettingEditor/styles/footer.ts @@ -1,17 +1,17 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' import Button from '@/widgets/Buttons/Button' export const Wrapper = styled.div` - ${css.flex('align-both')}; + ${css.row('align-both')}; width: 100%; margin-top: 15px; padding: 0 18px; ` export const UpdateWrapper = styled.div` - ${css.flexColumn()}; + ${css.column()}; ` export const ActionButton = styled(Button)` width: 180px; diff --git a/src/containers/editor/TagSettingEditor/styles/index.ts b/src/containers/editor/TagSettingEditor/styles/index.ts index d935db4d4..1e1012676 100644 --- a/src/containers/editor/TagSettingEditor/styles/index.ts +++ b/src/containers/editor/TagSettingEditor/styles/index.ts @@ -3,7 +3,7 @@ import Link from 'next/link' import type { TTestable } from '@/spec' import { COLORS } from '@/constant/colors' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Input from '@/widgets/Input' @@ -14,13 +14,13 @@ export const Wrapper = styled.div.attrs(({ testid }) => ({ padding-bottom: 100px; ` export const BasicInfo = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-left: 28px; margin-bottom: 24px; ` export const DotSelector = styled.div` ${css.size(34)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; border: 1px solid; border-color: ${theme('editor.border')}; background: white; diff --git a/src/containers/editor/TagSettingEditor/styles/post_layout.ts b/src/containers/editor/TagSettingEditor/styles/post_layout.ts index af542daba..e5572ca91 100644 --- a/src/containers/editor/TagSettingEditor/styles/post_layout.ts +++ b/src/containers/editor/TagSettingEditor/styles/post_layout.ts @@ -2,13 +2,13 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import UpvoteSVG from '@/icons/Upvote' import CommentSVG from '@/icons/Comment' export const Wrapper = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; flex-wrap: wrap; gap: 0 45px; width: 100%; @@ -73,12 +73,12 @@ export const Cover = styled.div` type TColumn = { center?: boolean; grow?: boolean } export const Column = styled.div` - ${css.flexColumn()}; + ${css.column()}; ${({ center }) => (center ? 'align-items: center;' : '')}; ${({ grow }) => (grow ? 'flex-grow: 1;' : '')}; ` export const Layout = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; width: 150px; height: 100px; ` diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts b/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts index 69385e2b8..203fb46ff 100755 --- a/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts +++ b/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import type { TActive } from '@/spec' import { GRADIENT_DIRECTION } from '@/constant/wallpaper' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ArrowSVG from '@/icons/ArrowSolid' const metric = { @@ -69,7 +69,7 @@ const Point = styled.div` position: absolute; font-size: 8px; ${css.circle(16)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; z-index: 2; font-weight: ${({ $active }) => ($active ? 600 : 'bormal')}; @@ -89,7 +89,7 @@ const Point = styled.div` const SidePoint = styled(Point)` ${css.circle(10)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; opacity: ${({ $active }) => ($active ? 1 : 0.4)}; diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/custom_gradient_editor.ts b/src/containers/editor/WallpaperEditor/styles/build_in/custom_gradient_editor.ts index 08d96b792..72f6a7afc 100644 --- a/src/containers/editor/WallpaperEditor/styles/build_in/custom_gradient_editor.ts +++ b/src/containers/editor/WallpaperEditor/styles/build_in/custom_gradient_editor.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' import Link from 'next/link' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import Input from '@/widgets/Input' export const Wrapper = styled.div` - ${css.flexColumn()}; + ${css.column()}; width: 100%; margin-top: 25px; padding: 20px; @@ -33,7 +33,7 @@ export const Inputer = styled(Input)` } ` export const Footer = styled.div` - ${css.flex('align-center')}; + ${css.row('align-center')}; margin-top: 15px; ` diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts b/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts index d20b8a542..b5dba7728 100755 --- a/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts +++ b/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts @@ -1,12 +1,12 @@ import styled from 'styled-components' import type { TActive } from '@/spec' -import css, { animate, theme } from '@/utils/css' +import css, { animate, theme } from '@/css' import PenSVG from '@/icons/EditPen' export const Wrapper = styled.div` - ${css.flex()}; + ${css.row()}; width: calc(100% + 30px); flex-wrap: wrap; gap: 0 12px; @@ -19,7 +19,7 @@ export const Wrapper = styled.div` ` export const BallWrapper = styled.div` ${css.size(36)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; border-radius: 100%; border: 1.5px solid; border-color: ${({ $active }) => ($active ? theme('article.title') : 'transparent')}; @@ -54,7 +54,7 @@ export const ColorBall = styled.div` export const CustomColorBall = styled(ColorBall)` ${({ $active }) => ($active ? css.circle(26) : css.circle(30))}; - ${css.flex('align-both')}; + ${css.row('align-both')}; background: ${theme('hoverBg')}; background: conic-gradient( rgb(235, 87, 87), @@ -71,7 +71,7 @@ export const CustomColorBall = styled(ColorBall)` export const PenWrapper = styled.div` ${css.circle(16)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; background: radial-gradient(circle, white 40%, transparent 100%); ` export const PenIcon = styled(PenSVG)` diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/index.ts b/src/containers/editor/WallpaperEditor/styles/build_in/index.ts index 5f66eec6c..28a07679b 100755 --- a/src/containers/editor/WallpaperEditor/styles/build_in/index.ts +++ b/src/containers/editor/WallpaperEditor/styles/build_in/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TTestable, TActive } from '@/spec' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import { LineDivider } from '@/widgets/Common' export const Wrapper = styled.div.attrs(({ testid }) => ({ @@ -33,12 +33,12 @@ export const Title = styled.div` margin-left: 2px; ` export const SettingWrapper = styled.div` - ${css.flex()}; + ${css.row()}; display: ${({ show }) => (show ? 'flex' : 'none')}; margin-left: 3px; ` export const SwitchWrapper = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; padding-right: 10px; margin-left: 1px; ` diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts b/src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts index cae9a3032..4f67dea44 100644 --- a/src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts +++ b/src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts @@ -2,12 +2,12 @@ import styled from 'styled-components' import type { TActive } from '@/spec' import Img from '@/Img' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import CheckedSVG from '@/icons/CheckBold' import CircleArrowSVG from '@/icons/CircleArrow' export const Wrapper = styled.div<{ showMore: boolean }>` - ${css.flex()}; + ${css.row()}; width: calc(100% + 30px); flex-wrap: wrap; gap: 15px 16px; @@ -67,7 +67,7 @@ export const CheckIcon = styled(CheckedSVG)` ` export const ShowMoreMask = styled.div<{ showMore: boolean }>` - ${css.flex('align-both')}; + ${css.row('align-both')}; position: absolute; bottom: ${({ showMore }) => (!showMore ? 0 : '-25px')}; width: 350px; diff --git a/src/containers/editor/WallpaperEditor/styles/custom/index.ts b/src/containers/editor/WallpaperEditor/styles/custom/index.ts index d3edb3edd..0430407a4 100755 --- a/src/containers/editor/WallpaperEditor/styles/custom/index.ts +++ b/src/containers/editor/WallpaperEditor/styles/custom/index.ts @@ -1,9 +1,9 @@ import styled from 'styled-components' -import css from '@/utils/css' +import css from '@/css' export const Wrapper = styled.div` - ${css.flexColumn()}; + ${css.column()}; margin-top: 15px; ` export const holder = 1 diff --git a/src/containers/editor/WallpaperEditor/styles/custom/upload_box.ts b/src/containers/editor/WallpaperEditor/styles/custom/upload_box.ts index 2f36eb302..a55b2fd0b 100755 --- a/src/containers/editor/WallpaperEditor/styles/custom/upload_box.ts +++ b/src/containers/editor/WallpaperEditor/styles/custom/upload_box.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import UploadSVG from '@/icons/Upload' import MoreSVG from '@/icons/menu/More' export const Wrapper = styled.div` - ${css.flexColumn('align-both')}; + ${css.column('align-both')}; position: relative; border: 1px dashed; border-radius: 5px; @@ -40,7 +40,7 @@ export const Title = styled.div` ` export const Menu = styled.div` ${css.size(30)}; - ${css.flex('align-both')}; + ${css.row('align-both')}; position: absolute; right: 10px; top: 10px; diff --git a/src/containers/editor/WallpaperEditor/styles/footer.ts b/src/containers/editor/WallpaperEditor/styles/footer.ts index bf4819425..a78c5539a 100755 --- a/src/containers/editor/WallpaperEditor/styles/footer.ts +++ b/src/containers/editor/WallpaperEditor/styles/footer.ts @@ -1,11 +1,11 @@ import styled from 'styled-components' -import css, { theme } from '@/utils/css' +import css, { theme } from '@/css' import ForbidSVG from '@/icons/ForbidImg' export const Wrapper = styled.div` - ${css.flex('align-center', 'justify-between')}; + ${css.row('align-center', 'justify-between')}; width: 100%; padding: 0 30px; padding-left: 25px; diff --git a/src/containers/editor/WallpaperEditor/styles/index.ts b/src/containers/editor/WallpaperEditor/styles/index.ts index 6a825005c..8d46ff481 100755 --- a/src/containers/editor/WallpaperEditor/styles/index.ts +++ b/src/containers/editor/WallpaperEditor/styles/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' -import { theme } from '@/utils/css' +import { theme } from '@/css' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx index 5fc1b0f48..79b9a7bf4 100755 --- a/src/containers/layout/GlobalLayout/index.tsx +++ b/src/containers/layout/GlobalLayout/index.tsx @@ -7,6 +7,7 @@ import { FC, ReactNode, useEffect, useState } from 'react' import { useRouter } from 'next/router' import dynamic from 'next/dynamic' +import { Provider as BalancerTextProvider } from 'react-wrap-balancer' import METRIC from '@/constant/metric' import { TOPBAR_LAYOUT } from '@/constant/layout' @@ -101,39 +102,41 @@ const GlobalLayoutContainer: FC = ({ }, [showDashboardAlert]) return ( - - {load && } - - - - - - - - - {childrenWithProps(children, { metric })} -