color picker + fileview

Makefile

@@ -19,7 +19,7 @@ coffees= 	src/core/core.coffee\
 
 
 
-packages = NotePad wTerm ActivityMonitor DummyApp
+packages = NotePad wTerm ActivityMonitor DummyApp Files
 services = PushNotification Spotlight Calendar
 
 main: clean build_coffees build_tags build_themes schemes libs build_services build_packages

src/core/BaseDialog.coffee

@@ -44,13 +44,14 @@ class BasicDialog extends BaseDialog
                 <afx-hbox>"
         html += "<#{@conf.tag} data-id = 'content'></#{@conf.tag}>"
         html += "<div data-height = '40' style='padding:5px; text-align:right;'>"
-        html += "<afx-button data-id = 'bt#{k}' text = '#{v.label}' style='margin-left:5px;'></afx-button>" for k,v of @conf.buttons
+        html += "<afx-button data-id = 'bt#{k}' text = '#{v.label}' style='margin-left:3px;'></afx-button>" for k,v of @conf.buttons
         html += "</div></afx-hbox></afx-app-window>"
         #render the html
         _GUI.htmlToScheme html, @, @host
     
     main: () ->
         @scheme.set "minimizable", false
+        @scheme.set "resizable", @conf.resizable if @conf.resizable isnt undefined
         me = @
         f = (_v) -> () -> _v.onclick me
         # bind action to button
@@ -64,6 +65,7 @@ class CalendarDialog extends BasicDialog
             tag: 'afx-calendar-view',
             width: 300,
             height: 220,
+            resizable: false,
             buttons: [
                 {
                     label: 'Ok',
@@ -83,3 +85,28 @@ class CalendarDialog extends BasicDialog
         }
 this.OS.register "CalendarDialog", CalendarDialog
 
+class ColorPickerDialog extends BasicDialog
+    constructor: () ->
+        super "ColorPickerDialog", {
+            tag: 'afx-color-picker',
+            width: 313,
+            height: 220,
+            resizable: false,
+            buttons: [
+                {
+                    label: 'Ok',
+                    onclick: (d) ->
+                        c = (d.find "content").get "selectedColor"
+                        if c
+                            d.handler c if d.handler
+                            d.quit()
+                        else
+                            d.notify "Please select a color"
+                },
+                {
+                    label: 'Cancel',
+                    onclick: (d) -> d.quit()
+                }
+            ]
+        }
+this.OS.register "ColorPickerDialog", ColorPickerDialog

src/core/tags/afx-app-window.js

@@ -3,20 +3,20 @@
         <ul class= "afx-window-top" >
             <li class = "afx-window-close" onclick = {close}></li>
              <li if = {minimizable == true} class = "afx-window-minimize" onclick = {minimize}></li>
-             <li if = {maximizable == true} class = "afx-window-maximize" onclick={maximize}></li>
+             <li if = {resizable == true} class = "afx-window-maximize" onclick={maximize}></li>
              <li  ref = "dragger" class = "afx-window-title">{ apptitle }</li>
         </ul>
         <div class = "afx-clear"></div>
         <div ref = "content" class = "afx-window-content">
             <yield/>
         </div>
-        <div ref = "grip" class = "afx-window-grip">
+        <div if = {resizable == true} ref = "grip" class = "afx-window-grip">
     </div>
 
     <script>
         this.apptitle = opts.apptitle || ""
         this.minimizable = eval(opts.minimizable) || true
-        this.maximizable = eval(opts.maximizable) || true
+        this.resizable = eval(opts.resizable) || true
         var self = this
         var offset = {top:0,left:0}
         var desktop_pos = $("#desktop").offset()
@@ -147,6 +147,7 @@
 
         var enable_resize = function()
         {
+            if(!self.resizable) return
             $(self.refs.grip)
                 .css("user-select","none")
                 .css("cursor","default")
@@ -181,7 +182,7 @@
 
         var toggle_window = function()
         {
-            if(!self.maximizable) return;
+            if(!self.resizable) return
             if(isMaxi == false)
             {
                 history = {

src/core/tags/afx-color-picker.js

@@ -0,0 +1,104 @@
+<afx-color-picker>
+<div style = "width:310px; height:190px;display:block; padding:3px;">
+    <canvas class = "color-palette" width="284" height="155" style ="float:left;" ref = "palette" ></canvas>
+    <div class = "color-sample"  style= "width:15px; height:155px; text-align:center; margin-left:3px; display:block;float:left;" ref = "colorval"></div>
+    <div class = "afx-clear"></div>
+    <div style ="margin-top:3px;"> 
+        <span>Hex:</span><input type = "text" ref = "hextext" style = "width:70px; margin-left:3px;margin-right:5px;"></input>
+        <span ref = 'rgbtext'></span>
+    </div>
+</div>
+<script>
+    var self = this
+    var colorctx = undefined
+    self.root.observable = opts.observable
+    self.oncolorsetect = opts.oncolorsetect
+    self.selectedColor = undefined
+    self.root.set = function(k,v)
+        {
+            if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+    self.root.get = function(k)
+    {
+        return self[k]
+    }
+
+    var build_palette = function()
+    {
+        colorctx = $(self.refs.palette).get(0).getContext('2d')
+        var gradient = colorctx.createLinearGradient(0,0,$(self.refs.palette).width(),0)
+        // fill color
+        gradient.addColorStop(0,    "rgb(255,   0,   0)")
+        gradient.addColorStop(0.15, "rgb(255,   0, 255)")
+        gradient.addColorStop(0.33, "rgb(0,     0, 255)")
+        gradient.addColorStop(0.49, "rgb(0,   255, 255)")
+        gradient.addColorStop(0.67, "rgb(0,   255,   0)")
+        gradient.addColorStop(0.84, "rgb(255, 255,   0)")
+        gradient.addColorStop(1,    "rgb(255,   0,   0)")
+        gradient.addColorStop(0,    "rgb(0,   0,   0)")
+        // Apply gradient to canvas
+        colorctx.fillStyle = gradient;
+        colorctx.fillRect(0, 0, colorctx.canvas.width, colorctx.canvas.height)
+        
+        // Create semi transparent gradient (white -> trans. -> black)
+        gradient = colorctx.createLinearGradient(0, 0, 0, $(self.refs.palette).width())
+        gradient.addColorStop(0,   "rgba(255, 255, 255, 1)")
+        gradient.addColorStop(0.5, "rgba(255, 255, 255, 0)")
+        gradient.addColorStop(0.5, "rgba(0,     0,   0, 0)")
+        gradient.addColorStop(1,   "rgba(0,     0,   0, 1)")
+        // Apply gradient to canvas
+        colorctx.fillStyle = gradient
+        colorctx.fillRect(0, 0, colorctx.canvas.width, colorctx.canvas.height)
+        //$(self.refs.palette).css("position", "absolute")
+        // now add mouse move event
+        var pick_color = function(e)
+        {
+            $(self.refs.palette).css("cursor","crosshair")
+            var offset = $(self.refs.palette).offset()
+            var x = e.pageX - offset.left
+            var y = e.pageY - offset.top
+            var color = colorctx.getImageData(x,y, 1, 1)
+            var data = {
+                r:color.data[0],
+                g:color.data[1],
+                b:color.data[2],
+                text:'rgb(' + color.data[0] + ', ' + color.data[1] + ', ' + color.data[2] + ')',
+                hex:'#' + color.data[0].toString(16) + color.data[1].toString(16) + color.data[2].toString(16)
+            }
+            return data
+        }
+        var mouse_move_h = function(e)
+        {
+            var data = pick_color(e)
+            $(self.refs.colorval).css("background-color", data.text)
+        }
+        $(self.refs.palette).mouseenter(function(e){
+            $(self.refs.palette).on("mousemove",mouse_move_h)
+        })
+        $(self.refs.palette).mouseout(function(e){
+            $(self.refs.palette).unbind("mousemove",mouse_move_h)
+            if(self.selectedColor)
+                $(self.refs.colorval).css("background-color", self.selectedColor.text)
+        })
+        $(self.refs.palette).on("click", function(e){
+            data = pick_color(e)
+            $(self.refs.rgbtext).html(data.text)
+            $(self.refs.hextext).val(data.hex)
+            self.selectedColor = data
+            if(self.oncolorsetect)
+                self.oncolorsetect(data)
+            if(! self.root.observable) return 
+            self.root.observable.trigger("colorselect",data)
+        })
+    }
+
+    this.on("mount", function(){
+        build_palette()
+    })
+</script>
+</afx-color-picker>

src/core/tags/afx-file-view.js

@@ -0,0 +1,25 @@
+<afx-file-view>
+    <afx-list-view if = {view == 'icon'} child = {data.items}></afx-list-view>
+    <afx-grid-view if = {view == 'list'} header = {data.header} rows = {data.items}></afx-grid-view>
+    <afx-tree-view if = {view == 'tree'}></afx-tree-view>
+
+    <script>
+        var self = this
+        self.root.observable = opts.observable
+        self.view = opts.view || 'icon'
+        self.data = opts.data
+        self.root.set = function(k,v)
+        {
+            if(k == "*")
+                for(var i in v)
+                    self[i] = v[i]
+            else
+                self[k] = v
+            self.update()
+        }
+        self.root.get = function(k)
+        {
+            return self[k]
+        }
+    </script>
+</afx-file-view>

src/packages/DummyApp/main.coffee

@@ -6,7 +6,7 @@ class DummyApp extends this.OS.GUI.BaseApplication
         self = @
         @on "btclick", (e)->
             #_GUI.pushService "Budgy"
-            self.openDialog "CalendarDialog", (d) -> console.log d
+            self.openDialog "ColorPickerDialog", (d) -> console.log d
         @on "resize", (w,h)->
             console.log "#{self.name}: resize"
         #@on "listselect", (i)->

src/packages/DummyApp/scheme.html

@@ -1,12 +1,12 @@
-<afx-app-window apptitle="Preview" width="600" height="400">
+<afx-app-window apptitle="Preview" width="650" height="500">
     <afx-vbox>
         <afx-tree-view data-id="mytree"> </afx-tree-view>
         <afx-hbox>
-            <afx-button data-height="50" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button">
+            <afx-button data-height="40" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button">
             </afx-button>
             <afx-calendar-view></afx-calendar-view>
-            <afx-list-view data-id = "mylist" dropdown = "true" width="200" data-height = "50"></afx-list-view>
-            
+            <afx-color-picker></afx-color-picker>
+            <afx-list-view data-id = "mylist" dropdown = "true" width="200" data-height = "40"></afx-list-view>
         </afx-hbox>
     </afx-vbox>
 </afx-app-window>

src/packages/Files/Makefile

@@ -0,0 +1,33 @@
+coffee_files = main.coffee
+
+jsfiles =
+
+cssfiles = main.css
+
+copyfiles = scheme.html package.json
+
+
+BLUE=\033[1;34m
+NC=\033[0m
+
+main: title clean js css copy
+
+title:
+	@echo "$(BLUE)======= Package Files =======$(NC)"
+
+coffee:
+	- mkdir build
+	for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
+	for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
+	- rm build/*.coffee.js
+
+js: coffee
+	for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done
+
+css:
+	for f in $(cssfiles); do (cat "$${f}"; echo) >> build/main.css; done
+
+copy:
+	cp -rf $(copyfiles) build/
+clean:
+	- rm -rf build/*

src/packages/Files/main.coffee

@@ -0,0 +1,17 @@
+_GUI = this.OS.GUI
+class Files extends this.OS.GUI.BaseApplication
+    constructor: () ->
+        super "Files"
+    main: () ->
+        me = @
+        @scheme.set "apptitle", "Files manager"
+        @view = @find "fileview"
+        @scheme.contextmenuHandler = (e, m) ->
+            mdata = [ { text: " Child 1" }, { text: "child2", child: [{text: "sub child", child:[{text:"sub sub child"}] }]}]
+            m.set "items", mdata
+            m.show(e)
+
+    samples: () ->
+        
+
+this.OS.register "Files",Files

src/packages/Files/package.json

@@ -0,0 +1,12 @@
+{
+    "app":"Files",
+    "name":"Files manager",
+    "description":"System files manager",
+    "author":{
+        "name": "Xuan Sang LE",
+        "email": "xsang.le@gmail.com"
+    },
+    "category":"System",
+    "iconclass":"fa fa-archive",
+    "mimes":["*"]
+}

src/packages/Files/scheme.html

@@ -0,0 +1,5 @@
+<afx-app-window apptitle="Preview" width="600" height="400">
+    <afx-vbox>
+        <afx-file-view data-id = "fileview"></afx-file-view>
+    </afx-vbox>
+</afx-app-window>

src/services/PushNotification.coffee

@@ -31,7 +31,7 @@ class PushNotification extends this.OS.GUI.BaseService
 
     pushout: (s, o, mfeed) ->
         d = {
-            text: "#{o.name} (#{o.id}) - #{s}: #{o.data.m}",
+            text: "[#{s}] #{o.name} (#{o.id}): #{o.data.m}",
             icon: o.data.icon,
             iconclass: o.data.iconclass,
             closable: true }

src/themes/antos/afx-color-picker.css

@@ -0,0 +1,4 @@
+afx-color-picker canvas.color-palette, afx-color-picker div.color-sample{
+    border: 1px solid #a6a6a6;
+    /*border-radius: 3px;*/
+}

src/themes/antos/antos.css

@@ -40,4 +40,16 @@ html,body{
     user-select:none;
     cursor: default;
     padding:0px;
+}
+input {
+    outline: none;
+    padding: 2px;
+    height:23px;
+    border: 1px solid #a6a6a6;
+    background-color: white;
+    color: #414339;
+    border-radius: 5px;
+    box-sizing: border-box;
+    font-family: "Ubuntu";
+    font-size: 13px;
 }