1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-22 06:21:15 +02:00

command palette ui fixes

This commit is contained in:
Kushagra Gour
2019-03-03 19:04:22 +05:30
parent 4a16b77dc8
commit 7d61a8924f
3 changed files with 24 additions and 10 deletions

View File

@@ -24,6 +24,7 @@ function Row({ item, onClick, isSelected }) {
}`} }`}
onClick={onClick} onClick={onClick}
> >
<div>
{item.path ? <FileIcon file={item} /> : null} {item.path ? <FileIcon file={item} /> : null}
{item.name} {item.name}
{item.path ? ( {item.path ? (
@@ -31,6 +32,12 @@ function Row({ item, onClick, isSelected }) {
{getFolder(item.path)} {getFolder(item.path)}
</span> </span>
) : null} ) : null}
</div>
<div>
<span class="command-palette__option-subtitle">
{item.keyboardShortcut ? item.keyboardShortcut : ''}
</span>
</div>
</button> </button>
</li> </li>
); );
@@ -101,6 +108,7 @@ export class CommandPalette extends Component {
closeHandler={this.props.closeHandler} closeHandler={this.props.closeHandler}
noOverlay noOverlay
hideCloseButton hideCloseButton
extraClasses="modal--command-palette"
> >
<AutoFocusInput <AutoFocusInput
type="search" type="search"
@@ -108,6 +116,7 @@ export class CommandPalette extends Component {
value={this.state.search} value={this.state.search}
onInput={this.inputHandler.bind(this)} onInput={this.inputHandler.bind(this)}
onKeyUp={this.keyDownHandler.bind(this)} onKeyUp={this.keyDownHandler.bind(this)}
style="width:100%"
/> />
<ul class="command-palette__option-list"> <ul class="command-palette__option-list">
{this.state.list.map((item, index) => ( {this.state.list.map((item, index) => (

View File

@@ -9,10 +9,10 @@ export function KeyboardShortcutsModal({ show, closeHandler }) {
<div class="flex"> <div class="flex">
<div> <div>
<h2>Global</h2> <h2>Global</h2>
<p> {/*<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + ?</span> <span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + ?</span>
<span class="kbd-shortcut__details">See keyboard shortcuts</span> <span class="kbd-shortcut__details">See keyboard shortcuts</span>
</p> </p>*/}
<p> <p>
<span class="kbd-shortcut__keys">Ctrl/ + Shift + 5</span> <span class="kbd-shortcut__keys">Ctrl/ + Shift + 5</span>
<span class="kbd-shortcut__details">Refresh preview</span> <span class="kbd-shortcut__details">Refresh preview</span>

View File

@@ -395,7 +395,7 @@ a > svg {
} }
*:focus { *:focus {
outline-width: 4px; outline-width: 3px;
outline-color: var(--color-button); outline-color: var(--color-button);
outline-style: solid; outline-style: solid;
outline-offset: 1px; outline-offset: 1px;
@@ -1015,6 +1015,9 @@ body > #demo-frame {
.modal--settings > .modal__content { .modal--settings > .modal__content {
width: 850px; width: 850px;
} }
.modal--command-palette > .modal__content {
width: 600px;
}
} }
.pledge-modal .modal__content, .pledge-modal .modal__content,
@@ -1679,7 +1682,7 @@ body:not(.is-app) .show-when-app {
.help-text { .help-text {
font-size: 0.9em; font-size: 0.9em;
color: rgba(255, 255, 255, 0.65); color: var(--color-text-dark-1);
margin: 5px 0; margin: 5px 0;
} }
@@ -1906,6 +1909,8 @@ while the theme CSS file is loading */
list-style: none; list-style: none;
} }
.command-palette__option-row { .command-palette__option-row {
display: flex;
justify-content: space-between;
padding: 4px 5px; padding: 4px 5px;
width: 100%; width: 100%;
text-align: left; text-align: left;
@@ -1919,7 +1924,7 @@ while the theme CSS file is loading */
.command-palette__option-subtitle { .command-palette__option-subtitle {
color: var(--color-text-dark-1); color: var(--color-text-dark-1);
margin-left: 10px; margin-left: 10px;
font-size: 0.8em; font-size: 0.875em;
} }
.preview-dimension { .preview-dimension {