functional command palette

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)/

src/core/api.coffee

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

src/core/tags/ListViewTag.coffee

@@ -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"

src/core/vfs.coffee

@@ -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 = @

src/packages/CodePad/assets/scheme.html

@@ -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>
+            <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>

src/packages/CodePad/coffees/CommandPalette.coffee

@@ -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"

src/packages/CodePad/coffees/main.coffee

@@ -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: () ->
+    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 = [
     "ace/ace",

src/packages/CodePad/css/main.css

@@ -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;
 }
 

src/themes/antos/afx-list-view.css

@@ -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{

src/themes/antos/afx-sys-panel.css

@@ -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;