add base api and gui

src/core/apis/api.coffee

@@ -0,0 +1,26 @@
+#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
+    # handlers are defined in /src/handlers
+    handler: new Object()
+
+    #request a user data
+    request: (query,callback) ->
+        # definition here
+        handle.request query,callback
+
+    systemConfig: ->
+        _API.request 'config', (result) ->
+            console.log  result
+    
+    resource: (resource,callback) ->
+        path = "resources/#{resource}"
+        $.get path 
+        .done (data) -> 
+            callback(data) 
+        .fail ->
+            alert "cannot get data"
+            callback(null)

src/core/apis/handlers/InBrowserHandler.coffee

@@ -0,0 +1,6 @@
+self = this
+_API = self.OS.API
+
+self.OS.API.handler =
+    request: ( query ) ->
+        $.ajax {}

src/core/gui/gui.coffee

@@ -0,0 +1,23 @@
+
+self = this
+_GUI = self.OS.GUI
+_API = self.OS.API
+self.OS.GUI =
+    tagPath: "resources/tags/"
+    init: () ->
+        query = 
+            path: 'VFS/get'
+            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
+    loadTheme: (name) ->
+        path = "resources/themes/#{name}/#{name}.css"
+        $ "<link/>", { rel: "stylesheet", type: "text/css", href: path}
+        .appendTo "head"

src/core/gui/schemes/test.html

@@ -0,0 +1,10 @@
+
+<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>

src/core/gui/tags/afx-apps-dock.js

@@ -0,0 +1,7 @@
+<afx-apps-dock>
+    <afx-button each={ items } icon = {icon} text = {text}>
+    </afx-button>
+    <script>
+        this.items = opts.items
+    </script>
+</afx-apps-dock>

src/core/gui/tags/afx-button.js

@@ -0,0 +1,16 @@
+<afx-button>
+    <button disabled={ enable == "false" } onclick="{ onclick }"  > 
+        <i class = { icon } ></i> 
+        { opts.text }
+    </button>
+    <script>
+        this.enable = opts.enable
+        this.icon = opts.icon
+        this.onclick = function(e) {
+            if(opts.onclick)
+            {
+                e.preventDefault()
+            } 
+        }
+    </script>
+</afx-button>

src/core/gui/tags/afx-menu.js

@@ -0,0 +1,34 @@
+<afx-menu>
+    <ul>
+        <li class="afx-corner-fix"></li>
+        <li each={ items } class = {child != null ? "afx-submenu":""}>
+            <a href="#" onclick = {parent.onselect}>
+                <i class = {icon} ></i>{ text }
+            </a>
+            
+            <afx-menu if={child != null} child={child} observable = {parent.observable} ></afx-menu>
+        </li>
+         <li class="afx-corner-fix"></li>
+    </ul>
+    <script>
+        this.items = opts.child
+        if(opts.observable)
+            this.observable = opts.observable
+        else
+        {
+            this.observable = riot.observable()
+            this.observable.on('select',function(data){
+                if(opts.onselect)
+                    opts.onselect(data)
+            })
+        }
+
+        onselect(event)
+        {
+            
+           this.observable.trigger('select',event.item)
+           event.preventDefault()
+        }
+
+    </script>
+</afx-menu>

src/core/gui/tags/afx-sys-panel.js

@@ -0,0 +1,13 @@
+<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>
+    </div>
+    
+    <script>
+        this.osmenu = opts.osmenu
+        this.appmenu = opts.appmenu
+        this.systray = opts.systray
+    </script>
+</afx-sys-panel>

src/core/gui/themes/antos/antos.css

@@ -0,0 +1,185 @@
+html,body{
+    margin: 0;
+    padding: 0;
+    font-family: "Ubuntu";
+    font-size: 13px;
+    width: 100%;
+    height: 100%;
+}
+#wrapper{
+    margin: 0;
+    padding: 0;
+    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;
+    background-color: transparent;
+    border: 0;
+    height: 1px;
+}
+
+#workspace {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    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;
+    bottom: 0;
+    margin: 0;
+    left: 40px;
+    right: 0;
+    padding:0px;
+}

src/core/gui/themes/antos/hermit-light.css

@@ -0,0 +1,12 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 6, 2017 */
+
+
+
+@font-face {
+    font-family: 'HermitLight';
+    src: url('fonts/hermit-light-webfont.woff2') format('woff2'),
+         url('fonts/hermit-light-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

src/core/gui/themes/antos/ubuntu-regular.css

@@ -0,0 +1,39 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 6, 2017 */
+
+
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('fonts/ubuntu-regular-webfont.woff2') format('woff2'),
+         url('fonts/ubuntu-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('fonts/ubuntu-bold-webfont.woff2') format('woff2'),
+         url('fonts/ubuntu-bold-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('fonts/ubuntu-bolditalic-webfont.woff2') format('woff2'),
+         url('fonts/ubuntu-bolditalic-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('ubuntu-italic-webfont.woff2') format('woff2'),
+         url('ubuntu-italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+
+}