diff --git a/app/client.imba b/app/client.imba index 4fc84e8..118b95f 100644 --- a/app/client.imba +++ b/app/client.imba @@ -16,13 +16,14 @@ let refs = {} import api from './api' import config from './config' -import app-community-links from './components/app-community-links' -import app-settings from './components/app-settings' -import app-prompt from './components/app-prompt' -import app-edit from './components/app-edit' -import app-links from './components/app-links' -import app-link from './components/app-link' -import app-bang from './components/app-bang' +import './components/app-community-links' +import './components/app-settings' +import './components/app-prompt' +import './components/app-edit' +import './components/app-links' +import './components/app-link' +import './components/app-bang' +import './components/app-tips' import './styles' extend tag element diff --git a/app/components/app-links.imba b/app/components/app-links.imba index 78ab8de..33b8125 100644 --- a/app/components/app-links.imba +++ b/app/components/app-links.imba @@ -26,14 +26,14 @@ tag app-links s ||= state.query await window.navigator.clipboard.writeText(s) state.query = '' - sort_links! + api.sort_links! def handle_add state.loading = yes try await api.add_link state.query state.query = '' - sort_links! + api.sort_links! catch e err "adding link", e state.loading = no @@ -61,11 +61,6 @@ tag app-links else api.navigate link - def handle_del - if state.query.length < 1 - state.active_bang = no - api.sort_links! - def handle_click_delete link return unless window.confirm "Do you really want to delete {link..display_name}?" handle_delete link @@ -122,15 +117,6 @@ tag app-links + <.tip @click=(state.active_bang = no) @@ -160,39 +146,91 @@ tag app-links else - <.tips> - - <.tip - @click=handle_click_link - @hotkey('return').force.if(!loading)=handle_click_link - > - <.tip-hotkey> "Return" - <.tip-content> "Navigate To Link" - - <.tip[fl:2] @click=handle_shift_return> - <.tip-hotkey> "Shift + Return" - <.tip-content.ellipsis> - "Add New Link " - let sq = state.query.trim!.split /\s+/ - if sq.length >= 2 - let url = sq.pop! - '"' - sq.join " " - " {url}" - '"' + + + <.tip-row> + + <.tip + @click=handle_click_link + @hotkey('return').force.if(!loading)=handle_click_link + > + <.tip-hotkey> "Return" + <.tip-content> "Navigate To Link" + + <.tip + @click=handle_shift_return + @hotkey('shift+return').capture.if(!state.loading)=handle_shift_return + > + <.tip-hotkey> "Shift + Return" + <.tip-content.ellipsis> + "Create Link " + let sq = state.query.trim!.split /\s+/ + if sq.length >= 2 + let url = sq.pop! + '"' + sq.join " " + " {url}" + '"' + else + "\"{sq.join " "}\"" + + <.tip + @click=handle_shift_backspace + @hotkey('shift+backspace').capture.if(!state.loading)=handle_shift_backspace + > + <.tip-hotkey> "Shift + Backspace" + <.tip-content> "Edit Link" + + + + <.tip-row> + + <.tip + @click.if(!state.loading)=api.toggle_effective_names + @hotkey('tab').capture.if(!state.loading)=api.toggle_effective_names + > + <.tip-hotkey> "Tab" + <.tip-content> "Toggle Effective Names" + + <.tip + @click.if(!state.loading)=api.toggle_settings + @hotkey('esc').capture.if(!state.loading)=toggle_settings + > + <.tip-hotkey> "Esc" + <.tip-content> "Toggle Settings" + + <.tip.noclick + @hotkey('down').capture.if(!state.loading)=api.increment_link_selection_index + @hotkey('up').capture.if(!state.loading)=api.decrement_link_selection_index + > + <.tip-hotkey> "Up/Down Arrow" + <.tip-content> "Move Selection" + + <.tip-row> + + <.tip + @click.if(!loading)=handle_cut + > + if math_result + <.tip-hotkey> "Cut (Math, If No Selection)" + <.tip-content> "Cut Math Result" else - "\"{sq.join " "}\"" + <.tip-hotkey> "Cut (If No Selection)" + <.tip-content> "Cut All Text" - <.tip @click=handle_shift_backspace> - <.tip-hotkey> "Shift + Backspace" - <.tip-content> "Edit Link" + <.tip.noclick> + <.tip-hotkey> "Paste (If Input Empty)" + <.tip-content> "Instant Search" - <.links> - css d:flex fld:column jc:flex-start - fl:1 w:100% ofy:auto pt:15px + <.tip.placeholder> - if not viewing_community_links and (state.active_bang or state.sorted_links.length < 1) - - else - for link, index in state.sorted_links - + unless $tips-more.active + <.links> + css d:flex fld:column jc:flex-start + fl:1 w:100% ofy:auto + + if not viewing_community_links and (state.active_bang or state.sorted_links.length < 1) + + else + for link, index in state.sorted_links + diff --git a/app/components/app-tips.imba b/app/components/app-tips.imba new file mode 100644 index 0000000..317abed --- /dev/null +++ b/app/components/app-tips.imba @@ -0,0 +1,59 @@ +tag app-tips + + css >>> .tip-row + d:flex fld:row w:100% fl:1 + fs:20px + fs:14px pt:15px + jc:end ta:center + bg:#20222f c:purple4 + + css >>> .tip + d:flex fld:column jc:start fl:1 + bdr:1px solid blue3/10 + min-width:0 ta:center p:10px + cursor:pointer transition:background 100ms + @first ta:left rdl:3px + @last ta:right bd:none rdr:3px + @hover bg:purple3/3 + + css >>> .tip.placeholder + visibility:hidden + + css >>> .tip.noclick + @hover bg:none cursor:auto + + css >>> .tip-hotkey + fs:12px c:purple3/50 + + css >>> .tip-content + pt:2px fs:14px c:purple3 + + + + +tag app-tips-more < app-tips + + active = no + get hide do !active + def toggle + active = !active + + + + <@click=toggle> + css w:100% d:flex ja:center c:purple3 rdb:4px cursor:pointer + my:7px py:2px transition:background 100ms + @hover bg:purple3/3 + if active + css rd:0 + + css svg w:15px + if active + + else + + + css >>> .hide .tip-row d:none + css >>> .more .tip-row @first pt:0 + <.more .hide=hide> + diff --git a/app/styles.imba b/app/styles.imba index e7c0ffc..0a2cb3d 100644 --- a/app/styles.imba +++ b/app/styles.imba @@ -20,28 +20,6 @@ global css .disabled * global css .disabled $main-input @important bg:gray4/10 bc:gray4 -global css .tips - d:flex fld:row w:100% fl:1 - c:purple4 fs:20px cursor:pointer - fs:14px pt:15px - jc:end ta:center - -global css .tip - d:flex fld:column jc:start fl:1 - bdr:1px solid blue3/10 - min-width:0 p:5px ta:center - @first ta:left - @last ta:right bd:none - -global css .tip.noclick - cursor:auto - -global css .tip-hotkey - fs:12px c:purple3/50 - -global css .tip-content - pt:2px fs:14px c:purple3 - global css .selected bg:blue3/5