-
Notifications
You must be signed in to change notification settings - Fork 129
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: support a new Welcome page (#508)
* feat: remove entry in Storybook * feat: improve the Welcome page in editor * fix: improve the ci * fix: improve the order of style * test: update snapshot
- Loading branch information
1 parent
bfe99a4
commit e5e0a0c
Showing
12 changed files
with
281 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { localize } from 'mo/i18n/localize'; | ||
| import { constants } from 'mo/services/builtinService/const'; | ||
| import { KeybindingHelper } from 'mo/services/keybinding'; | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| const KEYBINDINGS = () => [ | ||
| { | ||
| id: constants.ACTION_QUICK_COMMAND, | ||
| name: localize('menu.commandPalette', 'Command Palette'), | ||
| }, | ||
| { | ||
| id: constants.ACTION_QUICK_ACCESS_SETTINGS, | ||
| name: localize('menu.settings', 'Settings'), | ||
| }, | ||
| { | ||
| id: constants.ACTION_SELECT_THEME, | ||
| name: localize('menu.colorTheme', 'Color Theme'), | ||
| }, | ||
| ]; | ||
|
|
||
| export const useGetKeys = () => { | ||
| const [keys, setKeys] = useState< | ||
| { | ||
| keybindings: string; | ||
| id: string; | ||
| name: any; | ||
| }[] | ||
| >([]); | ||
|
|
||
| useEffect(() => { | ||
| const res = KEYBINDINGS() | ||
| .map((acessCommand) => { | ||
| const simpleKeybindings = KeybindingHelper.queryGlobalKeybinding( | ||
| acessCommand.id | ||
| ); | ||
| if (simpleKeybindings?.length) { | ||
| const keybindings = KeybindingHelper.convertSimpleKeybindingToString( | ||
| simpleKeybindings | ||
| ); | ||
| return { ...acessCommand, keybindings }; | ||
| } | ||
| return null; | ||
| }) | ||
| .filter(Boolean); | ||
| setKeys( | ||
| res as { | ||
| keybindings: string; | ||
| id: string; | ||
| name: any; | ||
| }[] | ||
| ); | ||
| }, []); | ||
|
|
||
| return keys; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,29 @@ | ||
| import { prefixClaName } from 'mo/common/className'; | ||
| import React from 'react'; | ||
| import Logo from './logo'; | ||
| import { prefixClaName } from 'mo/common/className'; | ||
| import { useGetKeys } from './hooks'; | ||
|
|
||
| export default function Welcome() { | ||
| const keys = useGetKeys(); | ||
|
|
||
| return ( | ||
| <div className={prefixClaName('welcome')}> | ||
| <h1>Molecule.</h1> | ||
| <Logo className="logo" /> | ||
| <h1 className="title">Molecule</h1> | ||
| <div className="keybindings"> | ||
| <ul> | ||
| {keys.map((item) => { | ||
| return ( | ||
| <li className="keys" key={item.id}> | ||
| <span>{item.name}</span> | ||
| <span> | ||
| {item.keybindings.split('').join(' ')} | ||
| </span> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import React from 'react'; | ||
|
|
||
| export default function ({ className }) { | ||
| return ( | ||
| <span style={{ fontSize: 0 }}> | ||
| <svg | ||
| width="1em" | ||
| height="1em" | ||
| viewBox="0 0 120 120" | ||
| className={className} | ||
| > | ||
| <g | ||
| fill="none" | ||
| fillRule="evenodd" | ||
| stroke="none" | ||
| strokeWidth="1" | ||
| opacity="0.48" | ||
| > | ||
| <g fill="#A2A2A2" transform="translate(-660 -152)"> | ||
| <g transform="translate(660 152)"> | ||
| <path d="M59.3 96.335c4.87 0 8.817 3.954 8.817 8.832S64.169 114 59.3 114c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.832 8.818-8.832zm-22.444-6.826a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm44.887 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 72.245c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.833 8.818-8.833zm-42.483 0c4.87 0 8.817 3.955 8.817 8.833s-3.947 8.833-8.817 8.833S8 85.956 8 81.078s3.948-8.833 8.817-8.833zm85.366 0c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.833 8.817-8.833zm-65.327-6.022a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm44.887 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 48.156c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.833 8.818-8.833zm-42.483 0c4.87 0 8.817 3.955 8.817 8.833s-3.947 8.833-8.817 8.833S8 61.867 8 56.989s3.948-8.833 8.817-8.833zm85.366 0c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.833 8.817-8.833zM80.942 35.31c4.87 0 8.817 3.954 8.817 8.832s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.832 8.817-8.832zm-43.284 0c4.87 0 8.817 3.954 8.817 8.832s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.832 8.818-8.832zm64.525-11.242c4.87 0 8.817 3.954 8.817 8.833 0 4.878-3.948 8.832-8.817 8.832-4.87 0-8.817-3.954-8.817-8.832 0-4.879 3.947-8.833 8.817-8.833zm-85.366 0c4.87 0 8.817 3.954 8.817 8.833 0 4.878-3.947 8.832-8.817 8.832S8 37.778 8 32.9c0-4.879 3.948-8.833 8.817-8.833zm42.483 5.62a3.21 3.21 0 013.206 3.213 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.207-3.212 3.21 3.21 0 013.207-3.212zm-19.238-13.65a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm38.475 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 6a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.207-3.212A3.21 3.21 0 0159.3 6z"></path> | ||
| </g> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| </span> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React from 'react'; | ||
|
|
||
| export default function () { | ||
| return ( | ||
| <span> | ||
| <svg width="132" height="24" viewBox="0 0 132 24"> | ||
| <g | ||
| fill="none" | ||
| fillRule="evenodd" | ||
| stroke="none" | ||
| strokeWidth="1" | ||
| fontFamily="GEETYPE-TakaLineGB-Flash-Heavy, GEETYPE-TakaLineGB-Flash" | ||
| fontSize="24" | ||
| fontWeight="800" | ||
| letterSpacing="2.667" | ||
| opacity="0.48" | ||
| > | ||
| <g | ||
| fill="#A2A2A2" | ||
| fillRule="nonzero" | ||
| transform="translate(-654 -304)" | ||
| > | ||
| <g transform="translate(654 304)"> | ||
| <text> | ||
| <tspan x="1.097" y="21"> | ||
| Molecule | ||
| </tspan> | ||
| </text> | ||
| </g> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| </span> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,65 @@ | ||
| @import 'mo/style/common'; | ||
|
|
||
| $border-color: rgba(115, 115, 115, 0.4); | ||
|
|
||
| #{prefix('welcome')} { | ||
| align-items: center; | ||
| background-color: var(--panel-background); | ||
| background-color: var(--editor-background); | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-flow: column wrap; | ||
| height: 100%; | ||
| overflow: hidden; | ||
| text-align: center; | ||
| width: 100%; | ||
|
|
||
| > h1 { | ||
| font-family: monospace; | ||
| opacity: 0.6; | ||
| > * { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .logo { | ||
| font-size: 120px; | ||
| margin-top: 10vh; | ||
| } | ||
|
|
||
| .title { | ||
| color: #a2a2a2; | ||
| font-family: GEETYPE-TakaLineGB-Flash-Heavy, GEETYPE-TakaLineGB-Flash, | ||
| sans-serif; | ||
| font-weight: 800; | ||
| height: 24px; | ||
| letter-spacing: 2.667px; | ||
| line-height: 24px; | ||
| margin: 3vh auto 0; | ||
| opacity: 0.48; | ||
| user-select: none; | ||
| width: 132px; | ||
| } | ||
|
|
||
| .keybindings { | ||
| user-select: none; | ||
|
|
||
| > ul { | ||
| align-items: center; | ||
| background-color: rgba(162, 162, 162, 0.11); | ||
| border-top: 1px solid $border-color; | ||
| box-sizing: border-box; | ||
| color: #b6b6b6; | ||
| display: inline-grid; | ||
| font-size: 14px; | ||
| grid-template-rows: repeat(3, 1fr); | ||
| height: 148px; | ||
| line-height: 20px; | ||
| list-style: none; | ||
| margin: 8vh auto 0; | ||
| min-width: 183px; | ||
| opacity: 0.6; | ||
| padding: 24px; | ||
| } | ||
|
|
||
| .keys { | ||
| display: grid; | ||
| grid-gap: 32px; | ||
| grid-template-columns: 1fr minmax(47px, min-content); | ||
| text-align: left; | ||
| } | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.