mirror of
https://github.com/lxsang/antos-frontend.git
synced 2024-12-27 01:38:21 +01:00
functional command palette
This commit is contained in:
parent
d2de593974
commit
74534e976c
2
Makefile
2
Makefile
@ -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
|
||||
- cp src/index.html $(BUILDDIR)/
|
||||
|
@ -29,6 +29,9 @@ class FormatedString
|
||||
hash: () ->
|
||||
@__().hash()
|
||||
|
||||
match: (t) ->
|
||||
@__().match t
|
||||
|
||||
asBase64: () ->
|
||||
@__().asBase64()
|
||||
|
||||
|
@ -200,6 +200,14 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
|
||||
@set "selectedItem", e.item
|
||||
@set "selectedItems", [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"
|
||||
@refs.drlabel.set "*", e.item.get "data"
|
||||
|
@ -106,7 +106,7 @@ class BaseFileHandle
|
||||
me.info = d.result
|
||||
me.ready = true
|
||||
resolve(d.result)
|
||||
.catch (e) -> resolve e
|
||||
.catch (e) -> reject e
|
||||
|
||||
read: (t) ->
|
||||
me = @
|
||||
|
@ -4,7 +4,10 @@
|
||||
<afx-file-view data-width = "155" min-width="155" data-id = "fileview" view="tree" status = "false">
|
||||
</afx-file-view>
|
||||
<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 data-height="20" data-id="bottom-hbox">
|
||||
<afx-label data-id="editorstat"></afx-label>
|
||||
|
@ -7,16 +7,55 @@ class CommandPalette extends this.OS.GUI.BasicDialog
|
||||
offset = $(".afx-window-content", @parent.scheme).offset()
|
||||
pw = @parent.scheme.get("width") / 5
|
||||
@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) ->
|
||||
if ($ e.target).closest(me.scheme).length > 0
|
||||
$(me.find "searchbox").focus()
|
||||
else
|
||||
$(document).unbind "mousedown", cb
|
||||
me.quit()
|
||||
|
||||
$(document).on "mousedown", cb
|
||||
$(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 = """
|
||||
<afx-app-window data-id = "cmd-win"
|
||||
|
@ -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
|
||||
constructor: (args) ->
|
||||
super "CodePad", args
|
||||
@ -30,26 +64,80 @@ class CodePad extends this.OS.GUI.BaseApplication
|
||||
fontSize: "9pt"
|
||||
}
|
||||
#themes = ace.require "ace/ext/themelist"
|
||||
#console.log themes.themesByName.monokai.theme
|
||||
@editor.setTheme "ace/theme/monokai"
|
||||
#console.log themes
|
||||
@editor.completers.push { getCompletions: ( editor, session, pos, prefix, callback ) -> }
|
||||
@editor.getSession().setUseWrapMode true
|
||||
@on "resize", () -> me.editor.resize()
|
||||
@on "focus", () -> me.editor.focus()
|
||||
@spotlight = new CMDMenu __("Command palette")
|
||||
@bindKey "ALT-P", () -> me.spotlight.run me
|
||||
@find("datarea").contextmenuHandle = (e, m) ->
|
||||
m.set "items", [{
|
||||
text: __("Command palete"),
|
||||
onmenuselect: (e) ->
|
||||
me.showCmdPalette()
|
||||
me.spotlight.run me
|
||||
}]
|
||||
m.show e
|
||||
@initCommandPalete()
|
||||
@editor.resize()
|
||||
|
||||
showCmdPalette: () ->
|
||||
@openDialog(new CommandPalette(), {
|
||||
addAction: (action) ->
|
||||
@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 = [
|
||||
"ace/ace",
|
||||
|
@ -1,6 +1,9 @@
|
||||
afx-app-window[data-id = "notepad"] .afx-window-wrapper afx-file-view{
|
||||
background-color:#272822;
|
||||
}
|
||||
afx-app-window[data-id = "notepad"] div.afx-window-content {
|
||||
background-color:#2d2d2d;
|
||||
}
|
||||
afx-app-window[data-id = "notepad"] afx-resizer {
|
||||
background-color:#272822;
|
||||
border-right: 1px solid #37373d;
|
||||
@ -36,7 +39,24 @@ afx-app-window[data-id = "cmd-win"] .afx-window-wrapper{
|
||||
background-color: transparent;
|
||||
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{
|
||||
height: 0;
|
||||
border:0;
|
||||
@ -47,6 +67,7 @@ afx-app-window[data-id = "cmd-win"] input{
|
||||
font-size: 12px;
|
||||
color:#afafaf;
|
||||
background-color:#272822;
|
||||
padding-left: 5px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
|
@ -34,7 +34,7 @@ afx-list-view.dropdown > div.list-container > ul{
|
||||
box-shadow: 1px 1px 1px #9f9F9F;
|
||||
border-radius: 3px;
|
||||
max-height: 150px;
|
||||
background-color: white;
|
||||
background-color: transparent;
|
||||
border-top-left-radius: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
@ -45,7 +45,7 @@ afx-list-view.dropdown div.list-container div{
|
||||
padding-bottom: 3px;
|
||||
border:1px solid #a6a6a6;
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
background-color: transparent;
|
||||
height: 17px;
|
||||
}
|
||||
afx-list-view.dropdown div.list-container div > afx-label{
|
||||
|
@ -68,7 +68,9 @@ afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
|
||||
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
|
||||
{
|
||||
background-color: #116cd6;
|
||||
|
Loading…
Reference in New Issue
Block a user