mirror of
https://github.com/lxsang/antos-frontend.git
synced 2024-12-28 02:08:22 +01:00
add resizer
This commit is contained in:
parent
b44ef3ce0e
commit
69849db99a
@ -367,10 +367,11 @@ self.OS.GUI =
|
|||||||
_GUI.pushServices [
|
_GUI.pushServices [
|
||||||
"CoreServices/PushNotification",
|
"CoreServices/PushNotification",
|
||||||
"CoreServices/Spotlight",
|
"CoreServices/Spotlight",
|
||||||
#"CoreServices/Calendar"
|
"CoreServices/Calendar"
|
||||||
]
|
]
|
||||||
|
|
||||||
# startup application here
|
# startup application here
|
||||||
_courrier.observable.one "desktoploaded", () ->
|
_courrier.observable.one "desktoploaded", () ->
|
||||||
#_GUI.launch "DummyApp"
|
console.log "startup app"
|
||||||
|
_GUI.launch "DummyApp"
|
||||||
#_GUI.launch "NotePad"
|
#_GUI.launch "NotePad"
|
@ -204,6 +204,9 @@
|
|||||||
self.root.observable.on("resize", function(e){
|
self.root.observable.on("resize", function(e){
|
||||||
calibre_size()
|
calibre_size()
|
||||||
})
|
})
|
||||||
|
self.root.observable.on("calibrate", function(e){
|
||||||
|
calibre_size()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
</afx-file-view>
|
</afx-file-view>
|
@ -17,6 +17,10 @@
|
|||||||
self.root.observable.on("resize", function(w,h){
|
self.root.observable.on("resize", function(w,h){
|
||||||
calibrate_size()
|
calibrate_size()
|
||||||
})
|
})
|
||||||
|
self.root.observable.on("calibrate", function(){
|
||||||
|
console.log("calibrate")
|
||||||
|
calibrate_size()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
var calibrate_size = function()
|
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){
|
self.root.observable.on("resize", function(w,h){
|
||||||
calibrate_size()
|
calibrate_size()
|
||||||
})
|
})
|
||||||
|
self.root.observable.on("calibrate", function(){
|
||||||
|
calibrate_size()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -1,13 +1,16 @@
|
|||||||
<afx-app-window apptitle="Preview" width="650" height="500">
|
<afx-app-window apptitle="Preview" width="650" height="500">
|
||||||
<afx-hbox>
|
<afx-hbox>
|
||||||
|
<afx-switch enable= true data-width="50"></afx-switch>
|
||||||
<afx-vbox>
|
<afx-vbox>
|
||||||
<afx-tab-container data-height = "50" data-id="mytabs" closable = true></afx-tab-container>
|
<afx-tab-container data-height = "50" data-id="mytabs" closable = true></afx-tab-container>
|
||||||
<afx-tree-view data-id="mytree"> </afx-tree-view>
|
<afx-tree-view data-id="mytree"> </afx-tree-view>
|
||||||
</afx-vbox>
|
</afx-vbox>
|
||||||
|
<afx-resizer data-width = "5" ></afx-resizer>
|
||||||
<afx-vbox>
|
<afx-vbox>
|
||||||
<afx-button data-height="30" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button"></afx-button>
|
<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-switch enable= true data-height="30"></afx-switch>
|
||||||
<afx-calendar-view></afx-calendar-view>
|
<afx-calendar-view></afx-calendar-view>
|
||||||
|
<afx-resizer data-height = "5" ></afx-resizer>
|
||||||
<afx-color-picker></afx-color-picker>
|
<afx-color-picker></afx-color-picker>
|
||||||
<afx-list-view data-id = "mylist" dropdown = "true" width="200" data-height = "40"></afx-list-view>
|
<afx-list-view data-id = "mylist" dropdown = "true" width="200" data-height = "40"></afx-list-view>
|
||||||
</afx-vbox>
|
</afx-vbox>
|
||||||
|
@ -18,7 +18,7 @@ class Files extends this.OS.GUI.BaseApplication
|
|||||||
m.set "items", [ me.mnFile(), me.mnEdit() ]
|
m.set "items", [ me.mnFile(), me.mnEdit() ]
|
||||||
m.set "onmenuselect", (evt) ->
|
m.set "onmenuselect", (evt) ->
|
||||||
me._gui.launch evt.item.data.app, evt.item.data.args if evt.item.data.app
|
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
|
#@on "fileselect", (d) -> console.log d
|
||||||
@view.set "onfileopen", (e) ->
|
@view.set "onfileopen", (e) ->
|
||||||
return unless 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']{
|
afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri']{
|
||||||
background-color: #f6F6F6;
|
background-color: #f6F6F6;
|
||||||
border-right: 1px solid #cbcbcb;
|
border-right: 0;
|
||||||
border-top:1px solid #A6A6A6;
|
border-top:1px solid #A6A6A6;
|
||||||
padding:0;
|
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{
|
afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri'] li{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -6,8 +6,9 @@
|
|||||||
<div data-width = "5"></div>
|
<div data-width = "5"></div>
|
||||||
</afx-hbox>
|
</afx-hbox>
|
||||||
<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-list-view>
|
||||||
|
<afx-resizer data-width = "3" ></afx-resizer>
|
||||||
<afx-file-view data-id = "fileview"></afx-file-view>
|
<afx-file-view data-id = "fileview"></afx-file-view>
|
||||||
</afx-hbox>
|
</afx-hbox>
|
||||||
</afx-vbox>
|
</afx-vbox>
|
||||||
|
@ -20,6 +20,12 @@ class NotePad extends this.OS.GUI.BaseApplication
|
|||||||
@.editor.completers.push { getCompletions: ( editor, session, pos, prefix, callback ) -> }
|
@.editor.completers.push { getCompletions: ( editor, session, pos, prefix, callback ) -> }
|
||||||
@.editor.getSession().setUseWrapMode true
|
@.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"
|
@mlist = @find "modelist"
|
||||||
@modes = ace.require "ace/ext/modelist"
|
@modes = ace.require "ace/ext/modelist"
|
||||||
ldata = []
|
ldata = []
|
||||||
@ -78,6 +84,9 @@ class NotePad extends this.OS.GUI.BaseApplication
|
|||||||
@fileview.set "onfileopen", (e) ->
|
@fileview.set "onfileopen", (e) ->
|
||||||
return if e.type is "dir"
|
return if e.type is "dir"
|
||||||
me.open e.path.asFileHandler()
|
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) ->
|
@location.set "onlistselect", (e) ->
|
||||||
me.chdir e.data.path
|
me.chdir e.data.path
|
||||||
@location.set "items", ( i for i in @systemsetting.VFS.mountpoints when i.type isnt "app" )
|
@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 ""
|
file.cache = d or ""
|
||||||
me.newtab file
|
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) ->
|
save: (file) ->
|
||||||
me = @
|
me = @
|
||||||
file.write (file.getb64 "text/plain"), (d) ->
|
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{
|
afx-app-window[data-id="notepad"] afx-list-view div.list-container{
|
||||||
z-index: 10;
|
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"]{
|
afx-app-window[data-id="notepad"] span[data-id="editorstat"]{
|
||||||
padding:5px;
|
padding:5px;
|
||||||
display: inline-block;
|
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{
|
afx-tab-container[data-id="tabarea"] afx-list-view{
|
||||||
padding:0;
|
padding:0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-left: 1px solid #a6a6a6;
|
border-left: 0;
|
||||||
border-bottom: 1px solid #a6a6a6;
|
border-bottom: 1px solid #a6a6a6;
|
||||||
}
|
}
|
||||||
/*afx-tab-container[data-id="tabarea"] afx-list-view i.closable:before{
|
/*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-app-window apptitle="" width="600" height="400" data-id="notepad">
|
||||||
<afx-hbox>
|
<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-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-file-view data-id = "fileview" view='tree' status = false></afx-file-view>
|
||||||
</afx-vbox>
|
</afx-vbox>
|
||||||
|
<afx-resizer data-width = "3" ></afx-resizer>
|
||||||
<afx-vbox>
|
<afx-vbox>
|
||||||
<afx-tab-container data-id="tabarea" data-height="26" closable = true></afx-tab-container>
|
<afx-tab-container data-id="tabarea" data-height="26" closable = true></afx-tab-container>
|
||||||
<div data-id="datarea"></div>
|
<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