add resizer

This commit is contained in:
Xuan Sang LE 2018-01-31 18:19:02 +01:00
parent b44ef3ce0e
commit 69849db99a
13 changed files with 171 additions and 10 deletions

View File

@ -367,10 +367,11 @@ self.OS.GUI =
_GUI.pushServices [
"CoreServices/PushNotification",
"CoreServices/Spotlight",
#"CoreServices/Calendar"
"CoreServices/Calendar"
]
# startup application here
_courrier.observable.one "desktoploaded", () ->
#_GUI.launch "DummyApp"
console.log "startup app"
_GUI.launch "DummyApp"
#_GUI.launch "NotePad"

View File

@ -204,6 +204,9 @@
self.root.observable.on("resize", function(e){
calibre_size()
})
self.root.observable.on("calibrate", function(e){
calibre_size()
})
})
</script>
</afx-file-view>

View File

@ -17,6 +17,10 @@
self.root.observable.on("resize", function(w,h){
calibrate_size()
})
self.root.observable.on("calibrate", function(){
console.log("calibrate")
calibrate_size()
})
}
})
var calibrate_size = function()

View File

@ -0,0 +1,83 @@
<afx-resizer>
<script>
var self = this
self.dir = "hz"
self.resizable = undefined
self.parent = undefined
self.minsize = 0
self.on("mount", function(){
//self.parent = $(self.root).parent().parent()
var tagname = $(self.parent.root).prop("tagName")
self.resizable = $(self.root).prev().length == 1 ? $(self.root).prev()[0]: undefined
if(tagname == "AFX-HBOX")
{
self.dir = "hz"
$(self.root).css("cursor", "col-resize")
if(self.resizable)
{
self.minsize = parseInt($(self.resizable).attr("min-width"))
}
}
else if(tagname == "AFX-VBOX")
{
self.dir = "ve"
$(self.root).css("cursor", "row-resize")
if(self.resizable)
{
self.minsize = parseInt($(self.resizable).attr("min-height"))
}
}
else
{
//$(self.root).css("cursor", "normal")
self.dir = "none"
}
enable_dragging()
})
var enable_dragging = function()
{
$(self.root)
.css("user-select","none")
$(self.root).on("mousedown", function(e){
e.preventDefault()
$(window).on("mousemove", function(evt){
if(!self.resizable) return
if(self.dir == "hz")
horizontalResize(evt)
else if (self.dir == "ve")
verticalResize(evt)
})
$(window).on("mouseup", function(evt){
//console.log("unbind mouse up")
$(window).unbind("mousemove", null)
})
})
}
var horizontalResize = function(e)
{
if(!self.resizable) return
var offset = $(self.resizable).offset()
w = Math.round(e.clientX - offset.left)
if(w < self.minsize) w = self.minsize
$(self.resizable).attr("data-width", w.toString())
self.parent.root.observable.trigger("calibrate")
}
var verticalResize = function(e)
{
//console.log("vboz")
if(!self.resizable) return
var offset = $(self.resizable).offset()
//console.log($(self.resizable).innerHeight())
//console.log(e.clientY, offset.top)
h = Math.round(e.clientY - offset.top)
if(h < self.minsize) h = minsize
$(self.resizable).attr("data-height", h.toString())
self.parent.root.observable.trigger("calibrate")
}
</script>
</afx-resizer>

View File

@ -19,6 +19,9 @@
self.root.observable.on("resize", function(w,h){
calibrate_size()
})
self.root.observable.on("calibrate", function(){
calibrate_size()
})
}
})

View File

@ -1,13 +1,16 @@
<afx-app-window apptitle="Preview" width="650" height="500">
<afx-hbox>
<afx-switch enable= true data-width="50"></afx-switch>
<afx-vbox>
<afx-tab-container data-height = "50" data-id="mytabs" closable = true></afx-tab-container>
<afx-tree-view data-id="mytree"> </afx-tree-view>
</afx-vbox>
<afx-resizer data-width = "5" ></afx-resizer>
<afx-vbox>
<afx-button data-height="30" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button"></afx-button>
<afx-switch enable= true data-height="30"></afx-switch>
<afx-calendar-view></afx-calendar-view>
<afx-resizer data-height = "5" ></afx-resizer>
<afx-color-picker></afx-color-picker>
<afx-list-view data-id = "mylist" dropdown = "true" width="200" data-height = "40"></afx-list-view>
</afx-vbox>

View File

@ -18,7 +18,7 @@ class Files extends this.OS.GUI.BaseApplication
m.set "items", [ me.mnFile(), me.mnEdit() ]
m.set "onmenuselect", (evt) ->
me._gui.launch evt.item.data.app, evt.item.data.args if evt.item.data.app
m.show(e)
m.show e
#@on "fileselect", (d) -> console.log d
@view.set "onfileopen", (e) ->
return unless e

View File

@ -3,11 +3,14 @@ afx-app-window[data-id ='files-app-window'] afx-list-view{
}
afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri']{
background-color: #f6F6F6;
border-right: 1px solid #cbcbcb;
border-right: 0;
border-top:1px solid #A6A6A6;
padding:0;
}
afx-app-window[data-id ='files-app-window'] afx-resizer{
background-color: transparent;
border-left: 1px solid #cbcbcb;
}
afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri'] li{
background-color: transparent;
}

View File

@ -6,8 +6,9 @@
<div data-width = "5"></div>
</afx-hbox>
<afx-hbox>
<afx-list-view data-id = "favouri" data-width = "150">
<afx-list-view data-id = "favouri" data-width = "150" min-width="100">
</afx-list-view>
<afx-resizer data-width = "3" ></afx-resizer>
<afx-file-view data-id = "fileview"></afx-file-view>
</afx-hbox>
</afx-vbox>

View File

@ -20,6 +20,12 @@ class NotePad extends this.OS.GUI.BaseApplication
@.editor.completers.push { getCompletions: ( editor, session, pos, prefix, callback ) -> }
@.editor.getSession().setUseWrapMode true
@fileview.contextmenuHandler = (e, m) ->
m.set "items", me.contextMenu()
m.set "onmenuselect", (evt) ->
me.contextAction evt
m.show e
@mlist = @find "modelist"
@modes = ace.require "ace/ext/modelist"
ldata = []
@ -78,6 +84,9 @@ class NotePad extends this.OS.GUI.BaseApplication
@fileview.set "onfileopen", (e) ->
return if e.type is "dir"
me.open e.path.asFileHandler()
@subscribe "VFS", (d) ->
p = (me.fileview.get "path").asFileHandler()
me.chdir p.path if d.data.file.hash() is p.hash() or d.data.file.parent().hash() is p.hash()
@location.set "onlistselect", (e) ->
me.chdir e.data.path
@location.set "items", ( i for i in @systemsetting.VFS.mountpoints when i.type isnt "app" )
@ -107,6 +116,48 @@ class NotePad extends this.OS.GUI.BaseApplication
file.cache = d or ""
me.newtab file
contextMenu: () ->
[
{ text: "New file", dataid: "#{@name}-mkf" },
{ text: "New folder", dataid: "#{@name}-mkd" },
{ text: "Delete", dataid: "#{@name}-rm" }
{ text: "Refresh", dataid: "#{@name}-refresh" }
]
contextAction: (e) ->
me = @
file = @fileview.get "selectedFile"
dir = if file then file.path.asFileHandler() else (@fileview.get "path").asFileHandler()
dir = dir.parent().asFileHandler() if file and file.type isnt "dir"
switch e.item.data.dataid
when "#{@name}-mkd"
@openDialog "PromptDialog",
(d) ->
dir.mk d, (r) ->
me.error "Fail to create #{d}: #{r.error}" if r.error
, "New folder"
when "#{@name}-mkf"
@openDialog "PromptDialog",
(d) ->
fp = "#{dir.path}/#{d}".asFileHandler()
fp.write "", (r) ->
me.error "Fail to create #{d}: #{r.error}" if r.error
, "New file"
when "#{@name}-rm"
return unless file
@openDialog "YesNoDialog",
(d) ->
return unless d
file.path.asFileHandler()
.remove (r) ->
me.error "Fail to delete #{file.filename}: #{r.error}" if r.error
, "Delete" ,
{ iconclass: "fa fa-question-circle", text: "Do you really want to delete: #{file.filename} ?" }
when "#{@name}-refresh"
@.chdir ( @fileview.get "path" )
save: (file) ->
me = @
file.write (file.getb64 "text/plain"), (d) ->

View File

@ -6,7 +6,11 @@ afx-app-window[data-id="notepad"] afx-list-view {
afx-app-window[data-id="notepad"] afx-list-view div.list-container{
z-index: 10;
}
afx-app-window[data-id="notepad"] afx-resizer{
z-index: 11;
background-color: transparent;
border-right: 1px solid #a6a6a6;
}
afx-app-window[data-id="notepad"] span[data-id="editorstat"]{
padding:5px;
display: inline-block;
@ -29,7 +33,7 @@ afx-tab-container[data-id="tabarea"] afx-list-view li {
afx-tab-container[data-id="tabarea"] afx-list-view{
padding:0;
margin: 0;
border-left: 1px solid #a6a6a6;
border-left: 0;
border-bottom: 1px solid #a6a6a6;
}
/*afx-tab-container[data-id="tabarea"] afx-list-view i.closable:before{

View File

@ -1,9 +1,10 @@
<afx-app-window apptitle="" width="600" height="400" data-id="notepad">
<afx-hbox>
<afx-vbox data-width = "175" data-id = "sidebar">
<afx-vbox data-width = "172" data-id = "sidebar" min-width="172">
<afx-list-view data-id = "location" dropdown = "true" data-height= "30" width = "150"></afx-list-view>
<afx-file-view data-id = "fileview" view='tree' status = false></afx-file-view>
</afx-vbox>
<afx-resizer data-width = "3" ></afx-resizer>
<afx-vbox>
<afx-tab-container data-id="tabarea" data-height="26" closable = true></afx-tab-container>
<div data-id="datarea"></div>

View File

@ -0,0 +1,4 @@
afx-resizer {
display: block;
background-color: #a6a6a6;
}