add tab bar

This commit is contained in:
Xuan Sang LE 2018-01-27 03:16:06 +01:00
parent 33f7f1a681
commit ea074d9690
17 changed files with 176 additions and 27 deletions

View File

@ -5,7 +5,7 @@ class BaseModel
@_gui = self.OS.GUI @_gui = self.OS.GUI
me = @ me = @
@on "exit", () -> me.quit() @on "exit", () -> me.quit()
@host = "#workingenv" @host = "#desktop"
@dialog = undefined @dialog = undefined
render: (p) -> render: (p) ->

View File

@ -221,16 +221,18 @@ self.OS.GUI =
it = desktop[0].get "selected" it = desktop[0].get "selected"
_GUI.openWith it _GUI.openWith it
($ "#workingenv").on "click", (e) -> #($ "#workingenv").on "click", (e) ->
desktop[0].set "selected", -1 # desktop[0].set "selected", -1
desktop.on "click", (e) -> desktop.on "click", (e) ->
return unless e.target is desktop[0]
desktop[0].set "selected", -1
($ "#sysdock").get(0).set "selectedApp", null ($ "#sysdock").get(0).set "selectedApp", null
desktop[0].set "selected", -1 if e.target is desktop[0]
console.log "desktop clicked" console.log "desktop clicked"
desktop[0].contextmenuHandler = (e, m) -> desktop[0].contextmenuHandler = (e, m) ->
desktop[0].set "selected", -1 if e.target is desktop[0] desktop[0].set "selected", -1 if e.target is desktop[0]
($ "#sysdock").get(0).set "selectedApp", null
console.log "context menu handler for desktop" console.log "context menu handler for desktop"
desktop[0].fetch() desktop[0].fetch()
@ -264,8 +266,9 @@ self.OS.GUI =
_OS.setting.appearance = conf.appearance if conf.appearance _OS.setting.appearance = conf.appearance if conf.appearance
_OS.setting.user = conf.user _OS.setting.user = conf.user
_OS.setting.desktop.path = "home:///.desktop" unless _OS.setting.desktop.path _OS.setting.desktop.path = "home:///.desktop" unless _OS.setting.desktop.path
_OS.setting.appearance.theme = "antos" unless _OS.setting.appearance.theme
# load theme # load theme
_GUI.loadTheme "antos" _GUI.loadTheme _OS.setting.appearance.theme
# initDM # initDM
_GUI.initDM() _GUI.initDM()
_courrier.observable.one "syspanelloaded", () -> _courrier.observable.one "syspanelloaded", () ->
@ -276,5 +279,5 @@ self.OS.GUI =
# startup application here # startup application here
_courrier.observable.one "desktoploaded", () -> _courrier.observable.one "desktoploaded", () ->
_GUI.launch "Files" _GUI.launch "DummyApp"
_GUI.launch "NotePad" #_GUI.launch "NotePad"

View File

@ -4,6 +4,6 @@
<div id = "workspace"> <div id = "workspace">
<afx-apps-dock id="sysdock"></afx-apps-dock> <afx-apps-dock id="sysdock"></afx-apps-dock>
<afx-float-list id = "desktop" ></afx-float-list> <afx-float-list id = "desktop" ></afx-float-list>
<div id = "workingenv"></div> <!--div id = "workingenv"></div-->
</div> </div>
<afx-menu id="contextmenu" context="true" style="display:none;"></afx-menu> <afx-menu id="contextmenu" context="true" style="display:none;"></afx-menu>

View File

@ -27,6 +27,9 @@
this.root.observable = opts.observable || riot.observable() this.root.observable = opts.observable || riot.observable()
if(!window._zindex) window._zindex = 10 if(!window._zindex) window._zindex = 10
this.shown = false this.shown = false
self.root.contextmenuHandler = function (e) {}
self.root.set = function(k,v) self.root.set = function(k,v)
{ {
if(k == "*") if(k == "*")

View File

@ -17,7 +17,8 @@
{ {
for(var i in self.items) for(var i in self.items)
self.items[i].app.blur() self.items[i].app.blur()
//v.show() if(v)
$("#desktop")[0].set("selected", -1)
} }
} }
self.update() self.update()

View File

@ -1,8 +1,9 @@
<afx-float-list ref = "container"> <afx-float-list ref = "container">
<div ref = "list">
<div each={item,i in items } class={float_list_item:true, float_list_item_selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick} onmousedown = {parent._select} oncontextmenu = {parent._select}> <div each={item,i in items } class={float_list_item:true, float_list_item_selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick} onmousedown = {parent._select} oncontextmenu = {parent._select}>
<afx-label color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label> <afx-label color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label>
</div> </div>
</div>
<script> <script>
this.items = opts.items || [] this.items = opts.items || []
var self = this var self = this
@ -82,7 +83,7 @@
var cleft = 20 var cleft = 20
var gw = $(self.refs.container).width() var gw = $(self.refs.container).width()
var gh = $(self.refs.container).height() var gh = $(self.refs.container).height()
$(self.refs.container) $(self.refs.list)
.children() .children()
.each(function(e) .each(function(e)
{ {

View File

@ -15,6 +15,7 @@
self.selidx = -1 self.selidx = -1
self.onlistselect = opts.onlistselect self.onlistselect = opts.onlistselect
self.onlistdbclick = opts.onlistdbclick self.onlistdbclick = opts.onlistdbclick
self.onitemclose = opts.onitemclose
var onclose = false var onclose = false
this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1 this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
self.root.set = function(k,v) self.root.set = function(k,v)
@ -39,6 +40,8 @@
return self.items[self.selidx] return self.items[self.selidx]
else else
return undefined return undefined
else if(k == "count")
return self.items.length
return self[k] return self[k]
} }
self.root.push = function(e,u) self.root.push = function(e,u)
@ -73,6 +76,7 @@
{ {
this.root.observable = riot.observable() this.root.observable = riot.observable()
} }
this.on("mount", function(){ this.on("mount", function(){
if(opts.dropdown == "true") if(opts.dropdown == "true")
{ {
@ -108,6 +112,10 @@
} }
_remove(event) _remove(event)
{ {
r = true
if(self.onitemclose)
r = self.onitemclose(event)
if(r)
self.root.remove(event.item.item, true) self.root.remove(event.item.item, true)
} }
_autoselect(it,i) _autoselect(it,i)

View File

@ -0,0 +1,60 @@
<afx-tab-container>
<afx-list-view ref = "list" />
<script>
var self = this
this.closable = opts.closable || false
self.root.observable = opts.observable || riot.observable()
get_observable(){
return self.root.observable
}
self.root.get = function (k) {
return self.refs.list.root.get(k)
}
self.on("mount", function(){
self.refs.list.root.observable = self.root.observable
/*self.root.observable.on("listselect", function(){
console.log("list select")
})*/
self.refs.list.root.set ("onlistselect",function (e) {
self.root.observable.trigger("tabselect", e)
})
})
self.root.set = function (k,v){
if( k == "*")
for(var i in v)
self.refs.list.root.set(i,v[i])
else if(k == "closable")
{
self.closable = v
}
else
{
if(k == "items")
{
for(var i in v)
v[i].closable = self.closable
}
self.refs.list.root.set(k,v)
}
//self.update()
}
self.root.push = function(e,u)
{
e.closable = self.closable
self.refs.list.root.push(e,u)
}
self.root.unshift = function(e,u)
{
self.refs.list.root.unshift(e,u)
}
self.root.remove = function(e,u)
{
self.refs.list.root.remove(e,u)
}
</script>
</afx-tab-container>

View File

@ -15,7 +15,15 @@ String.prototype.asFileHandler = () ->
this.OS.API.VFS = {} this.OS.API.VFS = {}
class BasicFileHandler class BasicFileHandler
constructor: (@path) -> constructor: (path) ->
@setPath path
setPath: (p) ->
@ready = false
@dirty = false
@cache = undefined
return unless p
@path = p
list = @path.split ":///" list = @path.split ":///"
@protocol = list[0] @protocol = list[0]
return unless list.length > 1 return unless list.length > 1
@ -24,8 +32,6 @@ class BasicFileHandler
@genealogy = re.split("/") @genealogy = re.split("/")
@basename = @genealogy[@genealogy.length - 1] unless @isRoot() @basename = @genealogy[@genealogy.length - 1] unless @isRoot()
@ext = @basename.split( "." ).pop() unless @basename.lastIndexOf(".") is 0 or @basename.indexOf( "." ) is -1 @ext = @basename.split( "." ).pop() unless @basename.lastIndexOf(".") is 0 or @basename.indexOf( "." ) is -1
@ready = false
isRoot: () -> (not @genealogy) or (@genealogy.size is 0) isRoot: () -> (not @genealogy) or (@genealogy.size is 0)
@ -33,7 +39,9 @@ class BasicFileHandler
return false if not @basename return false if not @basename
@basename[0] is "." @basename[0] is "."
hash: () -> @path.hash() hash: () ->
return -1 unless @path
return @path.hash()
parent: () -> parent: () ->
return @ if @isRoot() return @ if @isRoot()

View File

@ -76,10 +76,17 @@ class DummyApp extends this.OS.GUI.BaseApplication
{text:"some thing"}, {text:"some thing"},
{text:"some thing"} {text:"some thing"}
] ]
list.set "items",ldata #list.set "items",ldata
list.set "onlistselect", (e)-> list.set "onlistselect", (e)->
console.log e console.log e
tabs = @find "mytabs"
tabdatas = [
{text:"file1.txt"},
{text:"file2.cpp"}
]
tabs.set "items", tabdatas
@scheme.set "apptitle", "AntOS feature showcase" @scheme.set "apptitle", "AntOS feature showcase"
@scheme.contextmenuHandler = (e, m) -> @scheme.contextmenuHandler = (e, m) ->

View File

@ -1,5 +1,6 @@
<afx-app-window apptitle="Preview" width="650" height="500"> <afx-app-window apptitle="Preview" width="650" height="500">
<afx-vbox> <afx-vbox>
<afx-tab-container 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-hbox> <afx-hbox>
<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>

View File

@ -48,7 +48,10 @@ class Files extends this.OS.GUI.BaseApplication
@setting.nav = true if @setting.nav is undefined @setting.nav = true if @setting.nav is undefined
@setting.showhidden = false if @setting.showhidden is undefined @setting.showhidden = false if @setting.showhidden is undefined
@favo.set "items", $.extend true, {}, @setting.favorite el.selected = false for el, i in @setting.favorite
@favo.set "items", @setting.favorite
#@favo.set "selected", -1
@applySetting() @applySetting()
@chdir null @chdir null

View File

@ -70,14 +70,28 @@ class NotePad extends this.OS.GUI.BaseApplication
{ text: "Desktop", path: 'home:///.desktop', iconclass: "fa fa-desktop" }, { text: "Desktop", path: 'home:///.desktop', iconclass: "fa fa-desktop" },
] ]
@open @currfile if @currfile @tabarea = @find "tabarea"
#@tabarea.set "closable", true
@open @currfile
open: (file) -> open: (file) ->
#find table
@newtab "undefined".asFileHandler() unless file
return @newtab "undefined".asFileHandler() unless file
me = @ me = @
file.read (d) -> file.read (d) ->
return unless d return unless d
me.scheme.set "apptitle", file.basename me.scheme.set "apptitle", file.basename
me.editor.setValue d, -1 file.cache = d
me.newtab file
newtab: (file) ->
file.text = if file.basename then file.basename else "undefined"
file.cache = "" unless file.cache
cnt = @tabarea.get "count"
@tabarea.push file, true
@tabarea.set "selected", cnt
@editor.setValue file.cache, -1
chdir: (p) -> chdir: (p) ->
me = @ me = @

View File

@ -17,3 +17,25 @@ afx-app-window[data-id="notepad"] afx-vbox[data-id="bottom-vbox"]{
afx-app-window[data-id="notepad"] .afx-window-content { afx-app-window[data-id="notepad"] .afx-window-content {
background-color: #f6F6F6; background-color: #f6F6F6;
} }
afx-tab-container[data-id="tabarea"] afx-list-view li {
background-color: #dfdfdf;
color:#272822;
border: 0;
border-top: 1px solid #a6a6a6;
border-right: 1px solid #a6a6a6;
border-radius: 0;
}
afx-tab-container[data-id="tabarea"] afx-list-view{
padding:0;
margin: 0;
border-left: 1px solid #a6a6a6;
border-bottom: 1px solid #a6a6a6;
}
/*afx-tab-container[data-id="tabarea"] afx-list-view i.closable:before{
color: white;
}*/
afx-tab-container[data-id="tabarea"] afx-list-view li.selected {
background-color: #f6F6F6;
border-radius: 0;
}

View File

@ -5,6 +5,7 @@
<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-hbox> </afx-hbox>
<afx-hbox> <afx-hbox>
<afx-tab-container data-id="tabarea" data-height="26" closable = true></afx-tab-container>
<div data-id="datarea"></div> <div data-id="datarea"></div>
<afx-vbox data-height="30" data-id="bottom-vbox"> <afx-vbox data-height="30" data-id="bottom-vbox">
<div ><span data-id = "editorstat"></span></div> <div ><span data-id = "editorstat"></span></div>

View File

@ -0,0 +1,17 @@
afx-tab-container {
display: block;
width: 100%;
}
afx-tab-container afx-list-view {
padding:0;
margin:0;
}
afx-tab-container afx-list-view li{
float:left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding-bottom: 2px;
padding-top:2px;
border:1px solid #c3c3c3;
}

View File

@ -42,7 +42,7 @@ html,body{
cursor: default; cursor: default;
padding:0px; padding:0px;
} }
#desktop > div.float_list_item { #desktop > div > .float_list_item {
display:block; display:block;
background-color:transparent; background-color:transparent;
text-align: center; text-align: center;
@ -51,7 +51,7 @@ html,body{
padding:3px; padding:3px;
} }
#desktop > div.float_list_item_selected { #desktop > div > div.float_list_item_selected {
display:block; display:block;
background-color: #116cd6; background-color: #116cd6;
color:white; color:white;
@ -62,7 +62,7 @@ html,body{
padding:3px; padding:3px;
} }
#desktop > div.float_list_item i.file:before{ #desktop > div > div.float_list_item i.file:before{
content: "\f15b\a"; content: "\f15b\a";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 32px; font-size: 32px;
@ -71,11 +71,11 @@ html,body{
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }
#desktop > div.float_list_item span{ #desktop > div > div.float_list_item span{
width: 100%; width: 100%;
word-wrap: break-word; word-wrap: break-word;
} }
#desktop > div.float_list_item i.dir:before{ #desktop > div > div.float_list_item i.dir:before{
display: block; display: block;
content: "\f07b\a"; content: "\f07b\a";
font-family: "FontAwesome"; font-family: "FontAwesome";