mirror of
https://github.com/lxsang/antos-frontend.git
synced 2025-02-21 17:32:47 +01:00
add tab bar
This commit is contained in:
parent
33f7f1a681
commit
ea074d9690
@ -5,7 +5,7 @@ class BaseModel
|
||||
@_gui = self.OS.GUI
|
||||
me = @
|
||||
@on "exit", () -> me.quit()
|
||||
@host = "#workingenv"
|
||||
@host = "#desktop"
|
||||
@dialog = undefined
|
||||
|
||||
render: (p) ->
|
||||
|
@ -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"
|
@ -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>
|
||||
|
@ -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 == "*")
|
||||
|
@ -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()
|
||||
|
@ -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)
|
||||
{
|
||||
|
@ -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)
|
||||
{
|
||||
|
60
src/core/tags/afx-tab-container.js
Normal file
60
src/core/tags/afx-tab-container.js
Normal 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>
|
@ -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()
|
||||
|
@ -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) ->
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
||||
|
@ -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 = @
|
||||
|
@ -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;
|
||||
}
|
@ -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>
|
||||
|
17
src/themes/antos/afx-tab-container.css
Normal file
17
src/themes/antos/afx-tab-container.css
Normal 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;
|
||||
}
|
@ -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";
|
||||
|
Loading…
x
Reference in New Issue
Block a user