dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-12-26 01:18:21 +01:00
Code Issues 1 Actions Projects Releases Wiki Activity

color picker + fileview

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
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
main: clean build_coffees build_tags build_themes schemes libs build_services build_packages

29
src/core/BaseDialog.coffee
View File

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

9
src/core/tags/afx-app-window.js
View File

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

104
src/core/tags/afx-color-picker.js Normal file
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>

25
src/core/tags/afx-file-view.js Normal file
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>

2
src/packages/DummyApp/main.coffee
View File

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

8
src/packages/DummyApp/scheme.html
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-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>

33
src/packages/Files/Makefile Normal file
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/*

17
src/packages/Files/main.coffee Normal file
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

0
src/packages/Files/main.css Normal file
View File

12
src/packages/Files/package.json Normal 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":["*"]
}

5
src/packages/Files/scheme.html Normal file
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>

2
src/services/PushNotification.coffee
View File

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

4
src/themes/antos/afx-color-picker.css Normal file
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;*/
}

12
src/themes/antos/antos.css
View File

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