add appearance setting

This commit is contained in:
Xuan Sang LE 2018-03-12 00:42:14 +01:00
parent 8fef0c5e96
commit 07bb58b7eb
12 changed files with 131 additions and 28 deletions

View File

@ -217,7 +217,7 @@ self.OS.GUI =
wp = _OS.setting.appearance.wp
$("body").css("background-image", "url(#{_API.handler.get}/#{wp.url})" )
.css("background-size", wp.size)
.css("ackground-repeat", wp.repeat)
.css("background-repeat", wp.repeat)
initDM: ->
($ document).on 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', ()->

View File

@ -3,7 +3,7 @@
_OS.setting.applications = conf.applications if conf.applications
_OS.setting.appearance = conf.appearance if conf.appearance
_OS.setting.appearance.wp = {
url: "os://resources/themes/system/wp/wp2.png",
url: "os://resources/themes/system/wp/wp2.jpg",
size: "cover",
repeat: "repeat"
} unless _OS.setting.appearance.wp

View File

@ -1,6 +1,6 @@
<afx-list-view class = {dropdown: opts.dropdown == "true"}>
<div class = "list-container" ref = "container">
<div if = {opts.dropdown == "true"} ref = "current" style = {opts.width?"min-width:" + opts.width + "px;":"min-width:150px;"} onclick = {show_list}>
<div if = {opts.dropdown == "true"} ref = "current" style = {opts.width?"min-width:" + opts.width + "px;":""} onclick = {show_list}>
</div>
<ul ref = "mlist">
<li each={item,i in items } class={selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick} onclick = {parent._select} oncontextmenu = {parent._select}>
@ -113,8 +113,12 @@
this.on("mount", function(){
self.root.observable = opts.observable || (self.parent && self.parent.root && self.parent.root.observable) || riot.observable()
if(opts.dropdown == "true")
{
self.root.observable.on("calibrate", function(){
$(self.refs.container).css("width", $(self.root).width() + "px" )
})
$(document).click(function(event) {
if(!$(event.target).closest(self.refs.container).length) {
$(self.refs.mlist).hide()

View File

@ -32,7 +32,7 @@
$(this).hide()
})
$(e.data.scheme).show()
e.data.f()
e.data.handler.render()
calibrate()
})
self.root.observable.on("resize", function(){
@ -46,7 +46,9 @@
el.scheme = sch
riot.mount(sch, {observable: self.root.observable})
$(sch).hide()
el.f()
el.handler = el.handler(sch[0])
//console.log(el.handler)
//el.handler.render()
self.root.observable.trigger("tabrendered")
//self.root.observable.trigger("calibrate")
}

View File

@ -0,0 +1,48 @@
class AppearanceHandler extends SettingHandler
constructor:(scheme, parent) ->
super(scheme, parent)
me = @
@wplist = @find "wplist"
@wpreview = @find "wp-preview"
@wpsize = @find "wpsize"
@wprepeat = @find "wprepeat"
@themelist = @find "theme-list"
@wpsize.set "onlistselect", (e)->
me.parent.systemsetting.appearance.wp.size = e.data.text
me.parent._gui.wallpaper()
sizes = [
{ text: "cover", selected: me.parent.systemsetting.appearance.wp.size is "cover" },
{ text: "auto", selected: me.parent.systemsetting.appearance.wp.size is "auto" },
{ text: "contain", selected: me.parent.systemsetting.appearance.wp.size is "contain" }
]
@wpsize.set "items", sizes
@wplist.set "onlistselect", (e) ->
$(me.wpreview).css("background-image", "url(#{me.parent._api.handler.get}/#{e.data.path})" )
.css("background-size", "cover")
me.parent.systemsetting.appearance.wp.url = e.data.path
me.parent._gui.wallpaper()
repeats = [
{ text: "repeat", selected: me.parent.systemsetting.appearance.wp.repeat is "repeat" },
{ text: "repeat-x", selected: me.parent.systemsetting.appearance.wp.repeat is "repeat-x" },
{ text: "repeat-y", selected: me.parent.systemsetting.appearance.wp.repeat is "repeat-y" },
{ text: "no-repeat", selected: me.parent.systemsetting.appearance.wp.repeat is "no-repeat" }
]
@wprepeat.set "items", repeats
@wprepeat.set "onlistselect", (e) ->
me.parent.systemsetting.appearance.wp.repeat = e.data.text
me.parent._gui.wallpaper()
@themelist.set "items" , [{ text: "antos", selected: true }]
render: () ->
me = @
path = "os://resources/themes/system/wp"
path.asFileHandler().read (d) ->
me.parent.error __("Cannot read wallpaper list from {0}", path) if d.error
for v in d.result
v.text = v.filename
v.selected = true if v.path is me.parent.systemsetting.appearance.wp.url
v.iconclass = "fa fa-file-image-o"
me.wplist.set "items", d.result

View File

@ -1,4 +1,4 @@
coffee_files = main.coffee
coffee_files = main.coffee AppearanceHandler.coffee
jsfiles =

View File

@ -1,3 +1,12 @@
class SettingHandler
constructor:(@scheme, @parent) ->
find: (id) -> ($ "[data-id='#{id}']", @scheme)[0] if @scheme
render: () ->
class Setting extends this.OS.GUI.BaseApplication
constructor: (args) ->
super "Setting", args
@ -7,18 +16,21 @@ class Setting extends this.OS.GUI.BaseApplication
@container = @find "container"
@container.setTabs [
{
text: "Appearance",
iconclass: "fa fa-paint-brush",
url: "#{@path()}/schemes/appearance.html",
f: () ->
console.log "finish init appearance"
text: "Appearance",
iconclass: "fa fa-paint-brush",
url: "#{@path()}/schemes/appearance.html",
handler: (sch) ->
me.appearance = new AppearanceHandler(sch, me)
me.appearance
},
{
text: "VFS",
iconclass: "fa fa-inbox" ,
url: "#{@path()}/schemes/vfs.html" ,
f: () ->
console.log "finish init VFS"
handler: (sch) ->
render: () ->
console.log "finish init VFS"
}
]
Setting.singleton = true

View File

@ -8,4 +8,24 @@ afx-app-window[data-id = "setting-window"] afx-tab-container afx-tab-bar afx-lis
}
afx-app-window[data-id = "setting-window"] afx-tab-container div[data-ref="container"]{
border-left: 1px solid #cbcbcb;
}
afx-app-window[data-id = "setting-window"] afx-label.header{
font-weight: bold;
}
/*APPEARANCE*/
afx-app-window[data-id = "setting-window"] afx-vbox[data-id="appearance"] div[data-id = "wp-preview"]{
display: block;
border:1px solid #cbcbcb;
border-radius: 10px;
}
afx-app-window[data-id = "setting-window"] afx-vbox[data-id="appearance"] afx-list-view[data-id="wplist"]
{
border:1px solid #cbcbcb;
}
afx-app-window[data-id = "setting-window"] afx-vbox[data-id="appearance"] afx-resizer{
border:0;
background-color: transparent;
}

View File

@ -1,14 +1,31 @@
<afx-vbox>
<afx-label text = "__(Wallpaper)" class = "header" data-height="30"></afx-label>
<afx-vbox data-id="appearance">
<div data-height="5"></div>
<afx-hbox>
<afx-list-view data-width="120"></afx-list-view>
<div>
</div>
<div data-width="10"></div>
<afx-vbox>
<afx-label text = "__(Wallpaper)" iconclass = "fa fa-image" class = "header" data-height="23"></afx-label>
<afx-hbox>
<afx-list-view data-width="120" data-id="wplist"></afx-list-view>
<afx-resizer data-width="5"></afx-resizer>
<div data-id = "wp-preview"></div>
</afx-hbox>
<div data-height="5"></div>
<afx-hbox data-height="30">
<afx-button data-width="130" text= "__(Add)"></afx-button>
<afx-list-view data-id = "wpsize" dropdown="true"></afx-list-view>
<div data-width="5"></div>
<afx-list-view data-id = "wprepeat" dropdown="true"></afx-list-view>
</afx-hbox>
<div data-height="5"></div>
<afx-label text = "__(Theme)" iconclass = "fa fa-window-restore" class = "header" data-height="23"></afx-label>
<afx-list-view data-height="30" data-id="theme-list" dropdown="true"></afx-list-view>
<div data-height="5"></div>
</afx-vbox>
<div data-width="10"></div>
</afx-hbox>
<afx-label text = "__(Theme)" class = "header" data-height="30"></afx-label>
<afx-list-view data-height="50" dropdown="true"></afx-list-view>
<afx-hbox data-height="30" >
<div></div>
<afx-button text="__(Save)" iconclass="fa fa-save" data-width="50"></afx-button>
<div style="text-align:right;"><afx-button text="__(Save)" iconclass="fa fa-save"></afx-button></div>
<div data-width="10"></div>
</afx-hbox>
<div data-height="5"></div>
</afx-vbox>

View File

@ -9,9 +9,11 @@ title:
coffee:
- mkdir build
for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
- rm build/*.coffee.js
for f in $(coffee_files); do (cat "$${f}"; echo) >>"build/main.coffee";done
coffee --compile build/main.coffee
#for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
#for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
- rm build/*.coffee
js: coffee
for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done

View File

@ -90,6 +90,7 @@ afx-list-view.dropdown > div.list-container > ul{
border-radius: 3px;
padding:2px;
border-top-left-radius: 0px;
z-index: 10;
}
afx-list-view.dropdown > div.list-container > ul > li{
display: inline-block;

View File

@ -5,9 +5,6 @@ html,body{
font-size: 13px;
width: 100%;
height: 100%;
background-image: url(wp2.jpg);
background-size: cover;
background-repeat: repeat;
overflow: hidden;
}
#wrapper{