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
me = @
@on "exit", () -> me.quit()
@host = "#workingenv"
@host = "#desktop"
@dialog = undefined
render: (p) ->

View File

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

View File

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

View File

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

View File

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

View File

@ -1,8 +1,9 @@
<afx-float-list ref = "container">
<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>
<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}>
<afx-label color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label>
</div>
</div>
<script>
this.items = opts.items || []
var self = this
@ -82,7 +83,7 @@
var cleft = 20
var gw = $(self.refs.container).width()
var gh = $(self.refs.container).height()
$(self.refs.container)
$(self.refs.list)
.children()
.each(function(e)
{

View File

@ -15,6 +15,7 @@
self.selidx = -1
self.onlistselect = opts.onlistselect
self.onlistdbclick = opts.onlistdbclick
self.onitemclose = opts.onitemclose
var onclose = false
this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
self.root.set = function(k,v)
@ -39,6 +40,8 @@
return self.items[self.selidx]
else
return undefined
else if(k == "count")
return self.items.length
return self[k]
}
self.root.push = function(e,u)
@ -73,6 +76,7 @@
{
this.root.observable = riot.observable()
}
this.on("mount", function(){
if(opts.dropdown == "true")
{
@ -108,7 +112,11 @@
}
_remove(event)
{
self.root.remove(event.item.item, true)
r = true
if(self.onitemclose)
r = self.onitemclose(event)
if(r)
self.root.remove(event.item.item, true)
}
_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 = {}
class BasicFileHandler
constructor: (@path) ->
constructor: (path) ->
@setPath path
setPath: (p) ->
@ready = false
@dirty = false
@cache = undefined
return unless p
@path = p
list = @path.split ":///"
@protocol = list[0]
return unless list.length > 1
@ -24,8 +32,6 @@ class BasicFileHandler
@genealogy = re.split("/")
@basename = @genealogy[@genealogy.length - 1] unless @isRoot()
@ext = @basename.split( "." ).pop() unless @basename.lastIndexOf(".") is 0 or @basename.indexOf( "." ) is -1
@ready = false
isRoot: () -> (not @genealogy) or (@genealogy.size is 0)
@ -33,7 +39,9 @@ class BasicFileHandler
return false if not @basename
@basename[0] is "."
hash: () -> @path.hash()
hash: () ->
return -1 unless @path
return @path.hash()
parent: () ->
return @ if @isRoot()

View File

@ -76,10 +76,17 @@ class DummyApp extends this.OS.GUI.BaseApplication
{text:"some thing"},
{text:"some thing"}
]
list.set "items",ldata
#list.set "items",ldata
list.set "onlistselect", (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.contextmenuHandler = (e, m) ->

View File

@ -1,5 +1,6 @@
<afx-app-window apptitle="Preview" width="650" height="500">
<afx-vbox>
<afx-tab-container data-id="mytabs" closable = true></afx-tab-container>
<afx-tree-view data-id="mytree"> </afx-tree-view>
<afx-hbox>
<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.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()
@chdir null

View File

@ -70,14 +70,28 @@ class NotePad extends this.OS.GUI.BaseApplication
{ text: "Desktop", path: 'home:///.desktop', iconclass: "fa fa-desktop" },
]
@open @currfile if @currfile
@tabarea = @find "tabarea"
#@tabarea.set "closable", true
@open @currfile
open: (file) ->
#find table
@newtab "undefined".asFileHandler() unless file
return @newtab "undefined".asFileHandler() unless file
me = @
file.read (d) ->
return unless d
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) ->
me = @

View File

@ -16,4 +16,26 @@ afx-app-window[data-id="notepad"] afx-vbox[data-id="bottom-vbox"]{
}
afx-app-window[data-id="notepad"] .afx-window-content {
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-hbox>
<afx-hbox>
<afx-tab-container data-id="tabarea" data-height="26" closable = true></afx-tab-container>
<div data-id="datarea"></div>
<afx-vbox data-height="30" data-id="bottom-vbox">
<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;
padding:0px;
}
#desktop > div.float_list_item {
#desktop > div > .float_list_item {
display:block;
background-color:transparent;
text-align: center;
@ -51,7 +51,7 @@ html,body{
padding:3px;
}
#desktop > div.float_list_item_selected {
#desktop > div > div.float_list_item_selected {
display:block;
background-color: #116cd6;
color:white;
@ -62,7 +62,7 @@ html,body{
padding:3px;
}
#desktop > div.float_list_item i.file:before{
#desktop > div > div.float_list_item i.file:before{
content: "\f15b\a";
font-family: "FontAwesome";
font-size: 32px;
@ -71,11 +71,11 @@ html,body{
font-style: normal;
font-weight: normal;
}
#desktop > div.float_list_item span{
#desktop > div > div.float_list_item span{
width: 100%;
word-wrap: break-word;
}
#desktop > div.float_list_item i.dir:before{
#desktop > div > div.float_list_item i.dir:before{
display: block;
content: "\f07b\a";
font-family: "FontAwesome";