functional command palette

This commit is contained in:
lxsang 2020-05-14 23:08:57 +02:00
parent d2de593974
commit 74534e976c
10 changed files with 179 additions and 15 deletions

View File

@ -52,7 +52,7 @@ coffees= src/core/core.coffee \
packages = CoreServices ActivityMonitor Files Setting ShowCase MarkOn# Files MarketPlace Preview NotePad wTerm packages = CoreServices ActivityMonitor Files Setting ShowCase MarkOn CodePad# Files MarketPlace Preview NotePad wTerm
main: initd build_coffees build_themes libs build_packages languages main: initd build_coffees build_themes libs build_packages languages
- cp src/index.html $(BUILDDIR)/ - cp src/index.html $(BUILDDIR)/

View File

@ -29,6 +29,9 @@ class FormatedString
hash: () -> hash: () ->
@__().hash() @__().hash()
match: (t) ->
@__().match t
asBase64: () -> asBase64: () ->
@__().asBase64() @__().asBase64()

View File

@ -200,6 +200,14 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
@set "selectedItem", e.item @set "selectedItem", e.item
@set "selectedItems", [e.item] @set "selectedItems", [e.item]
e.items = [e.item] e.items = [e.item]
#scroll element
li = $(e.item).children()[0]
offset = $(@refs.container).offset()
top = $(@refs.container).scrollTop()
if ($(li).offset().top + $(li).height() > $(@refs.container).height() + offset.top)
$(@refs.container).scrollTop(top + $(@refs.container).height() - $(li).height())
else if ($(li).offset().top < offset.top)
$(@refs.container).scrollTop(top - $(@refs.container).height() + $(li).height())
if @get "dropdown" if @get "dropdown"
@refs.drlabel.set "*", e.item.get "data" @refs.drlabel.set "*", e.item.get "data"

View File

@ -106,7 +106,7 @@ class BaseFileHandle
me.info = d.result me.info = d.result
me.ready = true me.ready = true
resolve(d.result) resolve(d.result)
.catch (e) -> resolve e .catch (e) -> reject e
read: (t) -> read: (t) ->
me = @ me = @

View File

@ -4,7 +4,10 @@
<afx-file-view data-width = "155" min-width="155" data-id = "fileview" view="tree" status = "false"> <afx-file-view data-width = "155" min-width="155" data-id = "fileview" view="tree" status = "false">
</afx-file-view> </afx-file-view>
<afx-resizer data-width = "3" ></afx-resizer> <afx-resizer data-width = "3" ></afx-resizer>
<div data-id="datarea"></div> <afx-vbox>
<afx-tab-bar data-height="25" id = "tabbar"></afx-tab-bar>
<div data-id="datarea"></div>
</afx-vbox>
</afx-hbox> </afx-hbox>
<afx-hbox data-height="20" data-id="bottom-hbox"> <afx-hbox data-height="20" data-id="bottom-hbox">
<afx-label data-id="editorstat"></afx-label> <afx-label data-id="editorstat"></afx-label>

View File

@ -7,16 +7,55 @@ class CommandPalette extends this.OS.GUI.BasicDialog
offset = $(".afx-window-content", @parent.scheme).offset() offset = $(".afx-window-content", @parent.scheme).offset()
pw = @parent.scheme.get("width") / 5 pw = @parent.scheme.get("width") / 5
@scheme.set "width", 3 * pw @scheme.set "width", 3 * pw
$(@scheme).offset { top: offset.top, left: offset.left + pw } $(@scheme).offset { top: offset.top - 2, left: offset.left + pw }
cb = (e) -> cb = (e) ->
if ($ e.target).closest(me.scheme).length > 0 if ($ e.target).closest(me.scheme).length > 0
$(me.find "searchbox").focus() $(me.find "searchbox").focus()
else else
$(document).unbind "mousedown", cb $(document).unbind "mousedown", cb
me.quit() me.quit()
$(document).on "mousedown", cb $(document).on "mousedown", cb
$(me.find "searchbox").focus() $(me.find "searchbox").focus()
@cmdlist = @find("container")
@cmdlist.set "data", @data if @data
$(@cmdlist).click (e) ->
me.selectCommand()
@searchbox = @find "searchbox"
($ @searchbox).keyup (e) ->
me.search e
search: (e) ->
switch e.which
when 37
e.preventDefault()
when 38
@cmdlist.selectPrev()
e.preventDefault()
when 39
e.preventDefault()
when 40
@cmdlist.selectNext()
e.preventDefault()
when 13
e.preventDefault()
@selectCommand()
else
text = @searchbox.value
@cmdlist.set "data", @data if text.length is 2
return if text.length < 3
result = []
term = new RegExp text, 'i'
result.push v for v in @data when v.text.match term
@cmdlist.set "data", result
selectCommand: () ->
el = @cmdlist.get "selectedItem"
return unless el
@quit()
@handle { data: { item: el } } if @handle
CommandPalette.scheme = """ CommandPalette.scheme = """
<afx-app-window data-id = "cmd-win" <afx-app-window data-id = "cmd-win"

View File

@ -1,3 +1,37 @@
class CMDMenu
constructor: (@text, @shortcut) ->
@child = []
@select = (e) ->
addAction: (v) ->
@child.push v
@
addActions: (list) ->
@addAction v for v in list
onchildselect: (f) ->
@select = f
@
run: (root) ->
me = @
root.openDialog(new CommandPalette(), @child)
.then (d) ->
data = d.data.item.get("data")
return data.run root if data.run
me.select d, root
CMDMenu.fromMenu = (mn) ->
m = new CMDMenu mn.text, mn.shortcut
m.onchildselect mn.onchildselect
for v in mn.child
if v.child
m.addAction CMDMenu.fromMenu v
else
m.addAction v
m
class CodePad extends this.OS.GUI.BaseApplication class CodePad extends this.OS.GUI.BaseApplication
constructor: (args) -> constructor: (args) ->
super "CodePad", args super "CodePad", args
@ -30,26 +64,80 @@ class CodePad extends this.OS.GUI.BaseApplication
fontSize: "9pt" fontSize: "9pt"
} }
#themes = ace.require "ace/ext/themelist" #themes = ace.require "ace/ext/themelist"
#console.log themes.themesByName.monokai.theme
@editor.setTheme "ace/theme/monokai" @editor.setTheme "ace/theme/monokai"
#console.log themes
@editor.completers.push { getCompletions: ( editor, session, pos, prefix, callback ) -> } @editor.completers.push { getCompletions: ( editor, session, pos, prefix, callback ) -> }
@editor.getSession().setUseWrapMode true @editor.getSession().setUseWrapMode true
@on "resize", () -> me.editor.resize() @on "resize", () -> me.editor.resize()
@on "focus", () -> me.editor.focus() @on "focus", () -> me.editor.focus()
@spotlight = new CMDMenu __("Command palette")
@bindKey "ALT-P", () -> me.spotlight.run me
@find("datarea").contextmenuHandle = (e, m) -> @find("datarea").contextmenuHandle = (e, m) ->
m.set "items", [{ m.set "items", [{
text: __("Command palete"), text: __("Command palete"),
onmenuselect: (e) -> onmenuselect: (e) ->
me.showCmdPalette() me.spotlight.run me
}] }]
m.show e m.show e
@initCommandPalete()
@editor.resize() @editor.resize()
showCmdPalette: () -> addAction: (action) ->
@openDialog(new CommandPalette(), { @spotlight.addAction action
@
}).then (d) ->
addActions: (list) ->
@spotlight.addActions list
@
initCommandPalete: () ->
themes = ace.require "ace/ext/themelist"
cmdtheme = new CMDMenu __("Change theme")
cmdtheme.addAction { text: v.caption, theme: v.theme } for k, v of themes.themesByName
cmdtheme.onchildselect (d, r) ->
data = d.data.item.get("data")
r.editor.setTheme data.theme
r.editor.focus()
@spotlight.addAction cmdtheme
modes = ace.require "ace/ext/modelist"
cmdmode = new CMDMenu __("Change language mode")
cmdmode.addAction { text: v.name, mode: v.mode } for v in modes.modes
cmdmode.onchildselect (d, r) ->
data = d.data.item.get("data")
r.editor.session.setMode data.mode
r.editor.focus()
@spotlight.addAction cmdmode
@addAction CMDMenu.fromMenu @fileMenu()
fileMenu: () ->
me = @
{
text: __("File"),
child: [
{ text: __("New"), dataid: "new", shortcut: "A-N" },
{ text: __("Open"), dataid: "open", shortcut: "A-O" },
{ text: __("Save"), dataid: "save", shortcut: "C-S" },
{ text: __("Save as"), dataid: "saveas", shortcut: "A-W" }
],
onchildselect: (e, r) ->
console.log e.data.item.get "data"
}
menu: () ->
me = @
menu = [
@fileMenu()
{
text: "__(View)",
child: [
{ text: "__(Command Palette)", dataid: "cmdpalette", shortcut: "A-P" }
],
onchildselect: (e, r) ->
me.spotlight.run me
}
]
menu
CodePad.dependencies = [ CodePad.dependencies = [
"ace/ace", "ace/ace",

View File

@ -1,6 +1,9 @@
afx-app-window[data-id = "notepad"] .afx-window-wrapper afx-file-view{ afx-app-window[data-id = "notepad"] .afx-window-wrapper afx-file-view{
background-color:#272822; background-color:#272822;
} }
afx-app-window[data-id = "notepad"] div.afx-window-content {
background-color:#2d2d2d;
}
afx-app-window[data-id = "notepad"] afx-resizer { afx-app-window[data-id = "notepad"] afx-resizer {
background-color:#272822; background-color:#272822;
border-right: 1px solid #37373d; border-right: 1px solid #37373d;
@ -36,7 +39,24 @@ afx-app-window[data-id = "cmd-win"] .afx-window-wrapper{
background-color: transparent; background-color: transparent;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
} }
afx-app-window[data-id = "cmd-win"] .afx-window-wrapper afx-list-view ul afx-list-item:nth-child(even) li
{
background-color: transparent;
}
afx-app-window[data-id = "cmd-win"] .afx-window-wrapper afx-list-view afx-list-item li{
background-color: transparent;
color:#afafaf;
}
afx-app-window[data-id = "cmd-win"] .afx-window-wrapper div.list-container > ul li:hover{
background-color: #37373d;
}
afx-app-window[data-id = "cmd-win"] .afx-window-wrapper afx-list-view ul afx-list-item:nth-child(even) li.selected,
afx-app-window[data-id = "cmd-win"] .afx-window-wrappe dafx-list-viewafx-list-view ul li.selected
{
background-color: #116cd6;
color:white;
}
afx-app-window[data-id = "cmd-win"] .afx-window-top{ afx-app-window[data-id = "cmd-win"] .afx-window-top{
height: 0; height: 0;
border:0; border:0;
@ -47,6 +67,7 @@ afx-app-window[data-id = "cmd-win"] input{
font-size: 12px; font-size: 12px;
color:#afafaf; color:#afafaf;
background-color:#272822; background-color:#272822;
padding-left: 5px;
margin: 3px; margin: 3px;
} }

View File

@ -34,7 +34,7 @@ afx-list-view.dropdown > div.list-container > ul{
box-shadow: 1px 1px 1px #9f9F9F; box-shadow: 1px 1px 1px #9f9F9F;
border-radius: 3px; border-radius: 3px;
max-height: 150px; max-height: 150px;
background-color: white; background-color: transparent;
border-top-left-radius: 0px; border-top-left-radius: 0px;
z-index: 10; z-index: 10;
} }
@ -45,7 +45,7 @@ afx-list-view.dropdown div.list-container div{
padding-bottom: 3px; padding-bottom: 3px;
border:1px solid #a6a6a6; border:1px solid #a6a6a6;
border-radius: 3px; border-radius: 3px;
background-color: white; background-color: transparent;
height: 17px; height: 17px;
} }
afx-list-view.dropdown div.list-container div > afx-label{ afx-list-view.dropdown div.list-container div > afx-label{

View File

@ -68,7 +68,9 @@ afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
border-left: 1px solid #afafaf; border-left: 1px solid #afafaf;
} }
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover, afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover{
background-color: #cecece;
}
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li.selected afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li.selected
{ {
background-color: #116cd6; background-color: #116cd6;