diff --git a/app/components/app-links.imba b/app/components/app-links.imba index 0041e29..ce1e772 100644 --- a/app/components/app-links.imba +++ b/app/components/app-links.imba @@ -11,88 +11,95 @@ tag app-links return unless state.sorted_links.length > 0 refs.edit.open api.selected_link + get tips + let tips = [] + + tips.push <> + <.tip + @click=api.handle_click_link + @hotkey('return').force.if(!loading)=api.handle_click_link + > + <.tip-hotkey> "Return" + <.tip-content> "Navigate To Link" + + tips.push <> + <.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 " "}\"" + + tips.push <> + <.tip + @click=handle_edit + @hotkey('shift+backspace').capture.if(!state.loading)=handle_edit + > + <.tip-hotkey> "Shift + Backspace" + <.tip-content> "Edit Link" + + tips + + get tips_more + let tips_more = [] + + tips_more.push <> + <.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" + + tips_more.push <> + <.tip + @click.if(!state.loading)=refs.settings.open + @hotkey('shift+tab').capture.if(!state.loading)=refs.settings.open + > + <.tip-hotkey> "Shift + Tab" + <.tip-content> "Toggle Settings" + + tips_more.push <> + <.tip @click.if(!loading)=api.handle_cut> + if api.math_result + <.tip-hotkey> "Cut (Math, If No Selection)" + <.tip-content> "Cut Math Result" + else + <.tip-hotkey> "Cut (If No Selection)" + <.tip-content> "Cut All Text" + + tips_more.push <> + <.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" + + tips_more.push <> + <.tip.noclick> + <.tip-hotkey> "Paste (If Input Empty)" + <.tip-content> "Instant Search" + + tips_more + def render css w:100% d:flex fld:column gap:15px ofy:hidden - - - <.tip-row> - - <.tip - @click=api.handle_click_link - @hotkey('return').force.if(!loading)=api.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_edit - @hotkey('shift+backspace').capture.if(!state.loading)=handle_edit - > - <.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)=refs.settings.open - @hotkey('shift+tab').capture.if(!state.loading)=refs.settings.open - > - <.tip-hotkey> "Shift + Tab" - <.tip-content> "Toggle Settings" - - <.tip - @click.if(!loading)=api.handle_cut - > - if api.math_result - <.tip-hotkey> "Cut (Math, If No Selection)" - <.tip-content> "Cut Math Result" - else - <.tip-hotkey> "Cut (If No Selection)" - <.tip-content> "Cut All Text" - - <.tip-row> - - <.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.noclick> - <.tip-hotkey> "Paste (If Input Empty)" - <.tip-content> "Instant Search" - - <.tip.placeholder> + + unless $tips-more.active <.links> diff --git a/app/components/app-tips.imba b/app/components/app-tips.imba index d771a59..4601142 100644 --- a/app/components/app-tips.imba +++ b/app/components/app-tips.imba @@ -1,3 +1,5 @@ +import { chunk, fill } from 'lodash' + tag app-tips css >>> .tip-row @@ -29,7 +31,9 @@ tag app-tips pt:2px fs:14px c:purple3 - + <.tip-row> + for tip in tips + <> tip tag app-tips-more < app-tips @@ -44,6 +48,22 @@ tag app-tips-more < app-tips open = do active = yes close = do active = no + get placeholder + <.tip.placeholder> + + def pad arr + p arr + let i = arr.length + while i < 3 + arr.push placeholder + i += 1 + p arr + + get chunks + let chunks = chunk(tips, 3) + pad(chunks[-1]) + chunks + css d:flex fld:column gap:15px @@ -64,4 +84,8 @@ tag app-tips-more < app-tips css d:flex fld:column gap:15px if hidden css d:none - + + for row in chunks + <.tip-row> + for tip in row + <> tip