mirror of
https://github.com/lxsang/antos-frontend.git
synced 2025-07-19 15:29:51 +02:00
base gui
This commit is contained in:
Xuan Sang LE
@ -1,6 +1,3 @@
|
||||
#define the base API functions
|
||||
self = this
|
||||
_API = self.OS.API
|
||||
self.OS.API =
|
||||
# the handler object could be a any remote or local handle to
|
||||
# fetch user data, used by the API to make requests
|
||||
@ -16,11 +13,14 @@ self.OS.API =
|
||||
_API.request 'config', (result) ->
|
||||
console.log result
|
||||
|
||||
resource: (resource,callback) ->
|
||||
path = "resources/#{resource}"
|
||||
$.get path
|
||||
get:(p,c)=>
|
||||
$.get p
|
||||
.done (data) ->
|
||||
callback(data)
|
||||
c(data)
|
||||
.fail ->
|
||||
alert "cannot get data"
|
||||
callback(null)
|
||||
c(null)
|
||||
resource: (resource,callback) ->
|
||||
path = "resources/#{resource}"
|
||||
_API.get path,callback
|
||||
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
self = this
|
||||
_API = self.OS.API
|
||||
|
||||
self.OS.API.handler =
|
||||
request: ( query ) ->
|
||||
$.ajax {}
|
||||
21
src/core/gui/BaseApplication.coffee
Normal file
21
src/core/gui/BaseApplication.coffee
Normal file
@ -0,0 +1,21 @@
|
||||
class BaseApplication
|
||||
constructor: (@name) ->
|
||||
@observable = riot.observable()
|
||||
init: ->
|
||||
#first load the scheme
|
||||
path = "packages/#{@name}/scheme.html"
|
||||
@scheme = _GUI.loadScheme path,@observable
|
||||
#if(!scheme) bug repporter go here
|
||||
@event()
|
||||
event: ->
|
||||
#implement by subclasses
|
||||
on: (e,f) -> @observable.on e,f
|
||||
trigger:(e,d) -> @observable.trigger e,d
|
||||
open:->
|
||||
#implement by subclasses
|
||||
data:->
|
||||
#implement by subclasses
|
||||
update:->
|
||||
#implement by subclasses
|
||||
|
||||
this.OS.GUI.BaseApplication = BaseApplication
|
||||
@ -1,7 +1,3 @@
|
||||
|
||||
self = this
|
||||
_GUI = self.OS.GUI
|
||||
_API = self.OS.API
|
||||
self.OS.GUI =
|
||||
tagPath: "resources/tags/"
|
||||
init: () ->
|
||||
@ -10,14 +6,77 @@ self.OS.GUI =
|
||||
data: "#{_GUI.tagPath}/tags.json"
|
||||
self.OS.API.request query, ()->
|
||||
|
||||
loadScheme: (name, call) ->
|
||||
path = _GUI.tagPath + name + ".html"
|
||||
$.getScript path
|
||||
.done (script, status) ->
|
||||
call(script, status)
|
||||
.fail (jqxhr, settings, exception) ->
|
||||
_GUI.systemReport exception
|
||||
loadScheme: (path, obs) ->
|
||||
_API.get path, (x) ->
|
||||
return null unless x
|
||||
scheme = $.parseHTML x
|
||||
($ "#desktop").append scheme
|
||||
riot.mount ($ scheme), {observable:obs}
|
||||
scheme
|
||||
loadTheme: (name) ->
|
||||
path = "resources/themes/#{name}/#{name}.css"
|
||||
$ "<link/>", { rel: "stylesheet", type: "text/css", href: path}
|
||||
.appendTo "head"
|
||||
$ "head link#ostheme"
|
||||
.attr "href", path
|
||||
launch: (app) ->
|
||||
if not _APP[app]
|
||||
# first load it
|
||||
path = "packages/#{app}/main.js"
|
||||
$.getScript path
|
||||
.done (e,s) ->
|
||||
#launch
|
||||
_app = new _APP[app]
|
||||
_app.init()
|
||||
console.log "Fist time loading "+app
|
||||
.fail (e,s) ->
|
||||
#BUG report here
|
||||
console.log "bug report"
|
||||
else
|
||||
# now launch it
|
||||
_app = new _APP[app]
|
||||
_app.init()
|
||||
initDM: ->
|
||||
_API.resource "schemes/dm.html", (x) ->
|
||||
return null unless x
|
||||
scheme = $.parseHTML x
|
||||
($ "#wrapper").append scheme
|
||||
#riot.mount $ "#button", $ "#wrapper"
|
||||
osmenu = {child:[
|
||||
{text:"",icon:"fa fa-circle", child:[
|
||||
{text:"About"},
|
||||
{text:"System Preferences", icon:"fa fa-commenting"},
|
||||
{text:"Applications",child:[{text:"Terminal"},{text:"Text edit"}]},
|
||||
{text:"Logout"}
|
||||
]}
|
||||
],
|
||||
onmenuselect: (item)->
|
||||
console.log item
|
||||
_GUI.launch "NotePad"
|
||||
}
|
||||
appmenu = {child:[
|
||||
{text:"Text edit", child:[
|
||||
{text:"About"},
|
||||
{text:"Preferences"},
|
||||
{text:"Exit"}
|
||||
]},
|
||||
{text:"File",child:[
|
||||
{text:"Open"},{text:"Save"}]}
|
||||
],
|
||||
onmenuselect: (item)-> console.log item}
|
||||
systray = {child:[
|
||||
{text:"Sun 22:57 6 August 2017"},
|
||||
{text:"",icon:"fa fa-search"},
|
||||
{text:"",icon:"fa fa-commenting"}
|
||||
|
||||
],
|
||||
onmenuselect: (item)->
|
||||
console.log item
|
||||
}
|
||||
|
||||
riot.mount ($ "#syspanel", $ "#wrapper"),{osmenu:osmenu,appmenu:appmenu,systray:systray}
|
||||
|
||||
docks = {items:[
|
||||
{icon:"fa fa-cogs"},
|
||||
{icon:"fa fa-life-ring"},
|
||||
{icon:"fa fa-cubes"}
|
||||
]}
|
||||
riot.mount ($ "#sysdock", $ "#wrapper"), docks
|
||||
8
src/core/gui/schemes/dm.html
Normal file
8
src/core/gui/schemes/dm.html
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
<afx-sys-panel id = "syspanel"></afx-sys-panel>
|
||||
<!--div class = "afx-clear"></div-->
|
||||
<div id = "workspace">
|
||||
<afx-apps-dock id="sysdock"></afx-apps-dock>
|
||||
<div id = "desktop">
|
||||
</div>
|
||||
</div>
|
||||
@ -1,10 +1,16 @@
|
||||
<afx-app-window apptitle="Preview" width="600" height="400">
|
||||
<afx-vbox>
|
||||
|
||||
<afx-list-view data-width = "250"> </afx-list-view>
|
||||
|
||||
<afx-sys-panel id = "syspanel"></afx-sys-panel>
|
||||
<!--div class = "afx-clear"></div-->
|
||||
<div id = "workspace">
|
||||
<afx-apps-dock id="sysdock"></afx-apps-dock>
|
||||
<div id = "desktop">
|
||||
<afx-button onclick="alert('im clicked')" text="This is a button" icon="fa fa-camera-retro fa-lg" id="button">
|
||||
</afx-button>
|
||||
</div>
|
||||
</div>
|
||||
<afx-hbox>
|
||||
<afx-button data-height="50" onbtclick="alert('im clicked')" text="Read more" icon="fa fa-camera-retro fa-lg" id="button">
|
||||
</afx-button>
|
||||
<div style=" vertical-align: top; width:100%;height:100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div data-width="100">Test</div>
|
||||
</afx-hbox>
|
||||
</afx-vbox>
|
||||
</afx-app-window>
|
||||
159
src/core/gui/tags/afx-app-window.js
Normal file
159
src/core/gui/tags/afx-app-window.js
Normal file
@ -0,0 +1,159 @@
|
||||
<afx-app-window ref = "window">
|
||||
<div class = "afx-window-wrapper" >
|
||||
<ul class= "afx-window-top">
|
||||
<li class = "afx-window-close"></li>
|
||||
<li class = "afx-window-minimize"></li>
|
||||
<li class = "afx-window-maximize" onclick={maximize}></li>
|
||||
<li ref = "dragger" class = "afx-window-title">{ apptitle }</li>
|
||||
</ul>
|
||||
<div class = "afx-clear"></div>
|
||||
<div ref = "content" class = "afx-window-content">
|
||||
<yield/>
|
||||
</div>
|
||||
<div ref = "grip" class = "afx-window-grip">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
this.apptitle = opts.apptitle || ""
|
||||
var self = this
|
||||
var offset = {top:0,left:0}
|
||||
var desktop_pos = $("#desktop").offset()
|
||||
var isMaxi = false
|
||||
var history = {}
|
||||
var isResize = opts.resize || true
|
||||
var width = opts.width || 400
|
||||
var height = opts.height || 300
|
||||
this.root.observable = opts.observable || riot.observable()
|
||||
if(!window._zidex) window._zidex = 10
|
||||
this.on('mount', function() {
|
||||
var left,top
|
||||
left = 20 + Math.floor(Math.random() * width)
|
||||
top = 20 + Math.floor(Math.random() * height)
|
||||
$(self.refs.window)
|
||||
.css("position",'absolute')
|
||||
.css("left",left + "px")
|
||||
.css("top",top + "px")
|
||||
.css("width",width + "px")
|
||||
.css("height", height + "px")
|
||||
.css("z-index",window._zidex++)
|
||||
$(self.refs.window).on("mousedown", function(e){
|
||||
window._zidex++
|
||||
$(self.refs.window).css("z-index",window._zidex)
|
||||
})
|
||||
enable_dragging()
|
||||
if(isResize)
|
||||
enable_resize()
|
||||
$(self.refs.dragger).dblclick(function(e){
|
||||
toggle_window()
|
||||
})
|
||||
$(self.refs.content).children().each(function(e){
|
||||
this.observable = self.root.observable
|
||||
})
|
||||
})
|
||||
var enable_dragging = function()
|
||||
{
|
||||
$(self.refs.dragger)
|
||||
.css("user-select","none")
|
||||
.css("cursor","default")
|
||||
$(self.refs.dragger).on("mousedown", function(e){
|
||||
e.preventDefault()
|
||||
offset = $(self.refs.window).offset()
|
||||
offset.top = e.clientY - offset.top
|
||||
offset.left = e.clientX - offset.left
|
||||
$(window).on("mousemove", function(e){
|
||||
var top,left
|
||||
if(isMaxi)
|
||||
{
|
||||
toggle_window()
|
||||
top = 0
|
||||
letf = e.clientX - $(self.refs.window).width()/2
|
||||
offset.top = 10 //center
|
||||
offset.left = $(self.refs.window).width()/2
|
||||
} else
|
||||
{
|
||||
top = e.clientY - offset.top - desktop_pos.top
|
||||
left = e.clientX - desktop_pos.top - offset.left
|
||||
left = left < 0?0:left;
|
||||
top = top < 0?0:top;
|
||||
}
|
||||
|
||||
$(self.refs.window).css("top", top +"px")
|
||||
.css("left",left + "px")
|
||||
})
|
||||
$(window).on("mouseup", function(e){
|
||||
//console.log("unbind mouse up")
|
||||
$(window).unbind("mousemove", null)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
var enable_resize = function()
|
||||
{
|
||||
$(self.refs.grip)
|
||||
.css("user-select","none")
|
||||
.css("cursor","default")
|
||||
.css("position","absolute")
|
||||
.css("bottom","0")
|
||||
.css("right","0")
|
||||
.css("cursor","nwse-resize")
|
||||
$(self.refs.grip).on("mousedown", function(e){
|
||||
e.preventDefault()
|
||||
offset.top = e.clientY
|
||||
offset.left = e.clientX
|
||||
$(window).on("mousemove", function(e){
|
||||
var w,h
|
||||
w = $(self.refs.window).width() + e.clientX - offset.left
|
||||
h = $(self.refs.window).height() + e.clientY - offset.top
|
||||
w = w < 100 ? 100:w
|
||||
h = h < 100 ?100:h
|
||||
offset.top = e.clientY
|
||||
offset.left = e.clientX
|
||||
$(self.refs.window)
|
||||
.css("width", w +"px")
|
||||
.css("height",h + "px")
|
||||
isMaxi = false
|
||||
self.root.observable.trigger('resize',w,h)
|
||||
})
|
||||
$(window).on("mouseup", function(e){
|
||||
$(window).unbind("mousemove", null)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
var toggle_window = function()
|
||||
{
|
||||
if(isMaxi == false)
|
||||
{
|
||||
history = {
|
||||
top: $(self.refs.window).css("top"),
|
||||
left:$(self.refs.window).css("left"),
|
||||
width:$(self.refs.window).css("width"),
|
||||
height:$(self.refs.window).css("height")
|
||||
}
|
||||
var w,h
|
||||
w = ($("#desktop").width() - 5)
|
||||
h = ($("#desktop").height() - 10)
|
||||
$(self.refs.window)
|
||||
.css("width", w + "px")
|
||||
.css("height", h + "px")
|
||||
.css("top","0").css("left","0")
|
||||
self.root.observable.trigger('resize',w,h)
|
||||
isMaxi = true
|
||||
}
|
||||
else
|
||||
{
|
||||
isMaxi = false
|
||||
$(self.refs.window)
|
||||
.css("width",history.width)
|
||||
.css("height",history.height)
|
||||
.css("top",history.top).css("left",history.left)
|
||||
self.root.observable.trigger('resize',history.width, history.height)
|
||||
}
|
||||
|
||||
}
|
||||
maximize()
|
||||
{
|
||||
toggle_window()
|
||||
}
|
||||
</script>
|
||||
</afx-app-window>
|
||||
@ -1,16 +1,21 @@
|
||||
<afx-button>
|
||||
<button disabled={ enable == "false" } onclick="{ onclick }" >
|
||||
<button disabled={ enable == "false" } onclick="{ _onbtclick }" >
|
||||
<i class = { icon } ></i>
|
||||
{ opts.text }
|
||||
</button>
|
||||
<script>
|
||||
this.enable = opts.enable
|
||||
this.icon = opts.icon
|
||||
this.onclick = function(e) {
|
||||
if(opts.onclick)
|
||||
var self = this
|
||||
this._onbtclick = function(e)
|
||||
{
|
||||
if(opts.onbtclick)
|
||||
eval(opts.onbtclick)
|
||||
if(self.root.observable)
|
||||
{
|
||||
e.preventDefault()
|
||||
}
|
||||
console.log("btclick")
|
||||
self.root.observable.trigger("btclick",this)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</afx-button>
|
||||
58
src/core/gui/tags/afx-hbox.js
Normal file
58
src/core/gui/tags/afx-hbox.js
Normal file
@ -0,0 +1,58 @@
|
||||
<afx-hbox>
|
||||
<div ref = "container" class="afx-hbox-container">
|
||||
<yield/>
|
||||
</div>
|
||||
<script>
|
||||
var self = this
|
||||
this.on('mount', function(){
|
||||
$(self.refs.container)
|
||||
.css("display","flex")
|
||||
.css("flex-direction","column")
|
||||
.css("width","100%")
|
||||
.css("background-color","red")
|
||||
.css("table-layout","fixed")
|
||||
.css("overflow", "hidden")
|
||||
|
||||
calibrate_size()
|
||||
|
||||
if(self.root.observable)
|
||||
{
|
||||
self.root.observable.on("resize", function(w,h){
|
||||
calibrate_size()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
var calibrate_size = function()
|
||||
{
|
||||
var auto_height = []
|
||||
var csize, ocheight = 0, avaiheight;
|
||||
avaiheight = $(self.root).parent().height()
|
||||
$(self.refs.container).css("height",avaiheight + "px")
|
||||
$(self.refs.container)
|
||||
.children()
|
||||
.each(function(e)
|
||||
{
|
||||
this.observable = self.root.observable
|
||||
$(this)
|
||||
.css("flex-grow","1")
|
||||
.css("border","1px solid black")
|
||||
var dw = $(this).attr("data-height")
|
||||
if(dw)
|
||||
{
|
||||
$(this).css("height",dw + "px")
|
||||
ocheight += Number(dw)
|
||||
}
|
||||
else
|
||||
{
|
||||
auto_height.push(this)
|
||||
}
|
||||
})
|
||||
csize = (avaiheight - ocheight)/ (auto_height.length)
|
||||
$.each(auto_height, function(i,v)
|
||||
{
|
||||
$(v).css("height", csize + "px")
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</afx-hbox>
|
||||
29
src/core/gui/tags/afx-list-view.js
Normal file
29
src/core/gui/tags/afx-list-view.js
Normal file
@ -0,0 +1,29 @@
|
||||
<afx-list-view>
|
||||
<ul>
|
||||
<li each={ items } class = {child != null ? "afx-sublist":""} onclick = {parent.onselect}>
|
||||
<afx-list-view if={child != null} child={child} observable = {parent.observable} ></afx-list-view>
|
||||
</li>
|
||||
</ul>
|
||||
<script>
|
||||
this.items = opts.child
|
||||
if(opts.observable)
|
||||
this.observable = opts.observable
|
||||
else if(this.root.observable)
|
||||
this.observable = this.root.observable
|
||||
else
|
||||
{
|
||||
this.observable = riot.observable()
|
||||
this.observable.on('listselect',function(data){
|
||||
if(opts.listselect)
|
||||
opts.listselect(data)
|
||||
})
|
||||
}
|
||||
|
||||
onselect(event)
|
||||
{
|
||||
|
||||
this.observable.trigger('listselect',event.item)
|
||||
event.preventDefault()
|
||||
}
|
||||
</script>
|
||||
</afx-list-view>
|
||||
@ -6,27 +6,31 @@
|
||||
<i class = {icon} ></i>{ text }
|
||||
</a>
|
||||
|
||||
<afx-menu if={child != null} child={child} observable = {parent.observable} ></afx-menu>
|
||||
<afx-menu if={child != null} child={child} observable = {parent.root.observable} ></afx-menu>
|
||||
</li>
|
||||
<li class="afx-corner-fix"></li>
|
||||
</ul>
|
||||
<script>
|
||||
this.items = opts.child
|
||||
if(opts.observable)
|
||||
this.observable = opts.observable
|
||||
{
|
||||
this.root.observable = opts.observable
|
||||
}
|
||||
else
|
||||
{
|
||||
this.observable = riot.observable()
|
||||
this.observable.on('select',function(data){
|
||||
if(opts.onselect)
|
||||
opts.onselect(data)
|
||||
this.root.observable = riot.observable()
|
||||
this.root.observable.on('menuselect',function(data){
|
||||
if(opts.onmenuselect)
|
||||
{
|
||||
opts.onmenuselect(data)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onselect(event)
|
||||
{
|
||||
|
||||
this.observable.trigger('select',event.item)
|
||||
this.root.observable.trigger('menuselect',event.item)
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,20 @@
|
||||
<afx-sys-panel>
|
||||
<div>
|
||||
<afx-menu child={osmenu.child} onselect = {osmenu.onselect} class="afx-panel-os-menu"></afx-menu>
|
||||
<afx-menu child={appmenu.child} onselect = {appmenu.onselect} class = "afx-panel-os-app"></afx-menu>
|
||||
<afx-menu child={systray.child} onselect = {systray.onselect} class = "afx-panel-os-stray"></afx-menu>
|
||||
<afx-menu ref = "aOsmenu" child={osmenu.child} onmenuselect = {osmenu.onmenuselect} class="afx-panel-os-menu"></afx-menu>
|
||||
<afx-menu ref = "aAppmenu" child={appmenu.child} onmenuselect = {appmenu.onmenuselect} class = "afx-panel-os-app"></afx-menu>
|
||||
<afx-menu ref = "aTray" child={systray.child} onmenuselect = {systray.onmenuselect} class = "afx-panel-os-stray"></afx-menu>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
this.osmenu = opts.osmenu
|
||||
this.appmenu = opts.appmenu
|
||||
this.systray = opts.systray
|
||||
var self = this
|
||||
this.on('mount', function() {
|
||||
//console.log(self.refs.aOsmenu.root)
|
||||
$(self.refs.aOsmenu.root).css("z-index",1000000)
|
||||
$(self.refs.aAppmenu.root).css("z-index",1000000)
|
||||
$(self.refs.aTray.root).css("z-index",1000000)
|
||||
})
|
||||
</script>
|
||||
</afx-sys-panel>
|
||||
55
src/core/gui/tags/afx-vbox.js
Normal file
55
src/core/gui/tags/afx-vbox.js
Normal file
@ -0,0 +1,55 @@
|
||||
<afx-vbox>
|
||||
<div ref = "container" class="afx-vbox-container">
|
||||
<yield/>
|
||||
</div>
|
||||
<script>
|
||||
var self = this
|
||||
this.on('mount', function(){
|
||||
$(self.refs.container)
|
||||
.css("display","flex")
|
||||
.css("flex-direction","row")
|
||||
.css("width","100%")
|
||||
|
||||
calibrate_size()
|
||||
|
||||
if(self.root.observable)
|
||||
{
|
||||
self.root.observable.on("resize", function(w,h){
|
||||
calibrate_size()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
var calibrate_size = function()
|
||||
{
|
||||
var auto_width = []
|
||||
var csize, ocwidth = 0, avaiheight;
|
||||
avaiheight = $(self.root).parent().height()
|
||||
avaiWidth = $(self.root).parent().width()
|
||||
$(self.refs.container).css("height",avaiheight + "px")
|
||||
$(self.refs.container)
|
||||
.children()
|
||||
.each(function(e)
|
||||
{
|
||||
this.observable = self.root.observable
|
||||
$(this)
|
||||
.css("flex-grow","1")
|
||||
var dw = $(this).attr("data-width")
|
||||
if(dw)
|
||||
{
|
||||
$(this).css("width",dw + "px")
|
||||
ocwidth += Number(dw)
|
||||
}
|
||||
else
|
||||
{
|
||||
auto_width.push(this)
|
||||
}
|
||||
})
|
||||
csize = (avaiWidth - ocwidth)/ (auto_width.length)
|
||||
$.each(auto_width, function(i,v)
|
||||
{
|
||||
$(v).css("width", csize + "px")
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</afx-vbox>
|
||||
73
src/core/gui/themes/antos/afx-app-window.css
Normal file
73
src/core/gui/themes/antos/afx-app-window.css
Normal file
@ -0,0 +1,73 @@
|
||||
afx-app-window div.afx-window-wrapper{
|
||||
border:1px solid #a6a6a6;
|
||||
/*box-shadow: 1px 1px 1px #cbcbcb;*/
|
||||
box-shadow: 1px 1px 1px #9f9F9F;
|
||||
border-radius: 5px;
|
||||
background-color:#e7e7e7;
|
||||
padding:0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
afx-app-window{
|
||||
/*width: 600px;
|
||||
height: 400px;*/
|
||||
}
|
||||
|
||||
afx-app-window ul.afx-window-top{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
padding:0;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid #a6a6a6;
|
||||
}
|
||||
afx-app-window ul.afx-window-top li{
|
||||
list-style: none;
|
||||
margin-left: 3px;
|
||||
margin-top:4px;
|
||||
|
||||
}
|
||||
afx-app-window ul.afx-window-top .afx-window-close,.afx-window-minimize,.afx-window-maximize{
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
afx-app-window ul li.afx-window-close{
|
||||
background-color: #Fc605b;
|
||||
float:left;
|
||||
}
|
||||
afx-app-window ul li.afx-window-minimize{
|
||||
background-color: #fec041;
|
||||
float:left;
|
||||
}
|
||||
afx-app-window ul li.afx-window-maximize{
|
||||
background-color: #35cc4b;
|
||||
float:left;
|
||||
}
|
||||
|
||||
afx-app-window ul li.afx-window-title{
|
||||
margin-top:1px;
|
||||
float:none;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
afx-app-window div.afx-window-content
|
||||
{
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
flex-grow: 1;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
afx-app-window div.afx-window-grip{
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
20
src/core/gui/themes/antos/afx-button.css
Normal file
20
src/core/gui/themes/antos/afx-button.css
Normal file
@ -0,0 +1,20 @@
|
||||
afx-button button{
|
||||
outline: none;
|
||||
padding: 4px;
|
||||
border: 1px solid #a6a6a6;
|
||||
background-color: white;
|
||||
color: #414339;
|
||||
border-radius: 6px;
|
||||
font-family: "Ubuntu";
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
afx-button button[disabled]{
|
||||
color: #a6a6a6;
|
||||
}
|
||||
|
||||
afx-button button:active {
|
||||
background-color: #2786F3;
|
||||
color: white;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
24
src/core/gui/themes/antos/afx-dock.css
Normal file
24
src/core/gui/themes/antos/afx-dock.css
Normal file
@ -0,0 +1,24 @@
|
||||
afx-apps-dock{
|
||||
float: left;
|
||||
bottom: 3px;
|
||||
top: 3px;
|
||||
width: 32px;
|
||||
background-color:#e7e7e7;
|
||||
position: absolute;
|
||||
padding:2px;
|
||||
padding-top: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border:1px solid #a6a6a6;
|
||||
overflow: hidden;
|
||||
box-shadow: 1px 1px 1px #9f9F9F;
|
||||
}
|
||||
afx-apps-dock afx-button button{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 19px;
|
||||
margin-bottom: 0px;
|
||||
border:0;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
85
src/core/gui/themes/antos/afx-menu.css
Normal file
85
src/core/gui/themes/antos/afx-menu.css
Normal file
@ -0,0 +1,85 @@
|
||||
|
||||
afx-menu {
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
/*z-index: 100000;*/
|
||||
}
|
||||
afx-menu a{
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #414339;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
afx-menu ul{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
afx-menu afx-menu ul {
|
||||
padding: 0;
|
||||
border:1px solid #a6a6a6;
|
||||
border-radius: 5px;
|
||||
border-top-left-radius: 0px;
|
||||
/*box-shadow: 2px 2px 2px #cbcbcb;*/
|
||||
box-shadow: 1px 1px 1px #9f9F9F;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
afx-menu ul > li{
|
||||
list-style:none;
|
||||
margin:0;
|
||||
position: relative;
|
||||
float: left;
|
||||
padding:3px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
afx-menu afx-menu {
|
||||
top:100%;
|
||||
left:0;
|
||||
position: absolute;
|
||||
display:none;
|
||||
}
|
||||
afx-menu afx-menu i{
|
||||
margin-right: 5px;
|
||||
}
|
||||
afx-menu afx-menu li{
|
||||
float:none;
|
||||
width: 150px;
|
||||
}
|
||||
afx-menu afx-menu afx-menu{
|
||||
top:-4px;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
afx-menu li:hover {
|
||||
background-color: #2786F3;
|
||||
}
|
||||
afx-menu li:hover > a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
afx-menu li:hover > afx-menu
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
afx-menu li.afx-corner-fix{
|
||||
height: 3px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
afx-menu li.afx-corner-fix:hover{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
afx-menu afx-menu .afx-submenu:before {
|
||||
content: "\f054";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 10px;
|
||||
left:93%;
|
||||
color: #414339;
|
||||
position:absolute;
|
||||
top:25%;
|
||||
}
|
||||
19
src/core/gui/themes/antos/afx-sys-panel.css
Normal file
19
src/core/gui/themes/antos/afx-sys-panel.css
Normal file
@ -0,0 +1,19 @@
|
||||
|
||||
afx-sys-panel div{
|
||||
width: 100%;
|
||||
height: 23px;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
background-color: #e7e7e7;
|
||||
border-bottom: 1px solid #9c9C9C;
|
||||
box-shadow: 1px 1px 1px #9F9F9F;
|
||||
}
|
||||
|
||||
afx-sys-panel .afx-panel-os-stray{
|
||||
float:right;
|
||||
}
|
||||
|
||||
afx-sys-panel .afx-panel-os-stray afx-menu afx-menu{
|
||||
top:-4px;
|
||||
left: -100%;
|
||||
}
|
||||
@ -5,6 +5,8 @@ html,body{
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(wallpaper.jpg);
|
||||
background-size: cover;
|
||||
}
|
||||
#wrapper{
|
||||
margin: 0;
|
||||
@ -12,129 +14,6 @@ html,body{
|
||||
min-height:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
afx-button button{
|
||||
outline: none;
|
||||
padding: 4px;
|
||||
border: 1px solid #a6a6a6;
|
||||
background-color: white;
|
||||
color: #414339;
|
||||
border-radius: 6px;
|
||||
font-family: "hermitlight";
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
afx-button button[disabled]{
|
||||
color: #a6a6a6;
|
||||
}
|
||||
|
||||
afx-button button:active {
|
||||
background-color: #2786F3;
|
||||
color: white;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
|
||||
afx-menu {
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
z-index: 100000;
|
||||
}
|
||||
afx-menu a{
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #414339;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
afx-menu ul{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
afx-menu afx-menu ul {
|
||||
padding: 0;
|
||||
border:1px solid #a6a6a6;
|
||||
border-radius: 5px;
|
||||
border-top-left-radius: 0px;
|
||||
box-shadow: 2px 2px 2px #cbcbcb;
|
||||
background-color: white;
|
||||
}
|
||||
afx-menu ul > li{
|
||||
list-style:none;
|
||||
margin:0;
|
||||
position: relative;
|
||||
float: left;
|
||||
padding:3px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
afx-menu afx-menu {
|
||||
top:100%;
|
||||
left:0;
|
||||
position: absolute;
|
||||
display:none;
|
||||
}
|
||||
afx-menu afx-menu i{
|
||||
margin-right: 5px;
|
||||
}
|
||||
afx-menu afx-menu li{
|
||||
float:none;
|
||||
width: 150px;
|
||||
}
|
||||
afx-menu afx-menu afx-menu{
|
||||
top:-4px;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
afx-menu li:hover {
|
||||
background-color: #2786F3;
|
||||
}
|
||||
afx-menu li:hover > a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
afx-menu li:hover > afx-menu
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
afx-menu li.afx-corner-fix{
|
||||
height: 3px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
afx-menu li.afx-corner-fix:hover{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
afx-menu afx-menu .afx-submenu:before {
|
||||
content: "\f054";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 10px;
|
||||
left:93%;
|
||||
color: #414339;
|
||||
position:absolute;
|
||||
top:25%;
|
||||
}
|
||||
|
||||
afx-sys-panel div{
|
||||
width: 100%;
|
||||
height: 23px;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
background-color: #f6F6F6;
|
||||
border-bottom: 1px solid #9c9C9C;
|
||||
box-shadow: 2px 2px 2px #cbcbcb;
|
||||
}
|
||||
|
||||
afx-sys-panel .afx-panel-os-stray{
|
||||
float:right;
|
||||
}
|
||||
|
||||
afx-sys-panel .afx-panel-os-stray afx-menu afx-menu{
|
||||
top:-4px;
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.afx-clear{
|
||||
clear:both;
|
||||
@ -150,30 +29,6 @@ afx-sys-panel .afx-panel-os-stray afx-menu afx-menu{
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
afx-apps-dock{
|
||||
float: left;
|
||||
bottom: 3px;
|
||||
top: 3px;
|
||||
width: 32px;
|
||||
background-color:#f6F6F6;
|
||||
position: absolute;
|
||||
padding:2px;
|
||||
padding-top: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border:1px solid #a6a6a6;
|
||||
overflow: hidden;
|
||||
box-shadow: 2px 2px 2px #cbcbcb;
|
||||
}
|
||||
afx-apps-dock afx-button button{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 19px;
|
||||
margin-bottom: 0px;
|
||||
border:0;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
#desktop{
|
||||
position: absolute;
|
||||
top:3px;
|
||||
@ -181,5 +36,7 @@ afx-apps-dock afx-button button{
|
||||
margin: 0;
|
||||
left: 40px;
|
||||
right: 0;
|
||||
user-select:none;
|
||||
cursor: default;
|
||||
padding:0px;
|
||||
}
|
||||
@ -31,8 +31,8 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
src: url('ubuntu-italic-webfont.woff2') format('woff2'),
|
||||
url('ubuntu-italic-webfont.woff') format('woff');
|
||||
src: url('fonts/ubuntu-italic-webfont.woff2') format('woff2'),
|
||||
url('fonts/ubuntu-italic-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
|
||||
|
||||
BIN
src/core/gui/themes/antos/wallpaper.jpg
Normal file
BIN
src/core/gui/themes/antos/wallpaper.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Reference in New Issue
Block a user