color picker + fileview

This commit is contained in:
Xuan Sang LE 2017-08-25 00:18:35 +02:00
parent 8f9dd68213
commit 2284f50523
15 changed files with 252 additions and 12 deletions

View File

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

View File

@ -44,13 +44,14 @@ class BasicDialog extends BaseDialog
<afx-hbox>" <afx-hbox>"
html += "<#{@conf.tag} data-id = 'content'></#{@conf.tag}>" html += "<#{@conf.tag} data-id = 'content'></#{@conf.tag}>"
html += "<div data-height = '40' style='padding:5px; text-align:right;'>" 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>" html += "</div></afx-hbox></afx-app-window>"
#render the html #render the html
_GUI.htmlToScheme html, @, @host _GUI.htmlToScheme html, @, @host
main: () -> main: () ->
@scheme.set "minimizable", false @scheme.set "minimizable", false
@scheme.set "resizable", @conf.resizable if @conf.resizable isnt undefined
me = @ me = @
f = (_v) -> () -> _v.onclick me f = (_v) -> () -> _v.onclick me
# bind action to button # bind action to button
@ -64,6 +65,7 @@ class CalendarDialog extends BasicDialog
tag: 'afx-calendar-view', tag: 'afx-calendar-view',
width: 300, width: 300,
height: 220, height: 220,
resizable: false,
buttons: [ buttons: [
{ {
label: 'Ok', label: 'Ok',
@ -83,3 +85,28 @@ class CalendarDialog extends BasicDialog
} }
this.OS.register "CalendarDialog", CalendarDialog 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

View File

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

View File

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

View File

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

View File

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

View File

@ -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-vbox>
<afx-tree-view data-id="mytree"> </afx-tree-view> <afx-tree-view data-id="mytree"> </afx-tree-view>
<afx-hbox> <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-button>
<afx-calendar-view></afx-calendar-view> <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-hbox>
</afx-vbox> </afx-vbox>
</afx-app-window> </afx-app-window>

View File

@ -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/*

View File

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

View File

View File

@ -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":["*"]
}

View File

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

View File

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

View File

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

View File

@ -41,3 +41,15 @@ html,body{
cursor: default; cursor: default;
padding:0px; 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;
}