mirror of
https://github.com/lxsang/antos-frontend.git
synced 2024-12-27 09:48:21 +01:00
add resizer
This commit is contained in:
parent
b44ef3ce0e
commit
69849db99a
@ -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"
|
@ -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>
|
@ -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()
|
||||
|
83
src/core/tags/afx-resizer.js
Normal file
83
src/core/tags/afx-resizer.js
Normal 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>
|
@ -19,6 +19,9 @@
|
||||
self.root.observable.on("resize", function(w,h){
|
||||
calibrate_size()
|
||||
})
|
||||
self.root.observable.on("calibrate", function(){
|
||||
calibrate_size()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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) ->
|
||||
|
@ -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{
|
||||
|
@ -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>
|
||||
|
4
src/themes/antos/afx-resizer.css
Normal file
4
src/themes/antos/afx-resizer.css
Normal file
@ -0,0 +1,4 @@
|
||||
afx-resizer {
|
||||
display: block;
|
||||
background-color: #a6a6a6;
|
||||
}
|
Loading…
Reference in New Issue
Block a user