enhance the core API and default application

src/core/BaseDialog.ts

@@ -943,10 +943,13 @@ namespace OS {
         <afx-vbox>
             <afx-file-view data-id = "fileview" view="tree" status = "false"></afx-file-view>
             <input data-height = '26' type = "text" data-id = "filename" style="margin-left:5px; margin-right:5px;display:none;" /> 
-            <div data-height = '30' style=' text-align:right;padding:3px;'>
+            <afx-hbox data-height = '30'>
-                <afx-button data-id = "bt-ok" text = "__(Ok)"></afx-button>
+                <div style=' text-align:right;'>
-                <afx-button data-id = "bt-cancel" text = "__(Cancel)"></afx-button>
+                    <afx-button data-id = "bt-ok" text = "__(Ok)"></afx-button>
-            </div>
+                    <afx-button data-id = "bt-cancel" text = "__(Cancel)"></afx-button>
+                </div>
+                <div data-width="5"></div>
+            </afx-hbox>
         </afx-vbox>
     </afx-hbox>
 </afx-app-window>\

src/core/BaseModel.ts

@@ -319,7 +319,8 @@ namespace OS {
          * @memberof BaseModel
          */
         trigger(e: string, d?: any): void {
-            return this.observable.trigger(e, d);
+            if(!this.observable) return;
+            this.observable.trigger(e, d);
         }
 
         
@@ -509,9 +510,9 @@ namespace OS {
          * @returns {HTMLElement}
          * @memberof BaseModel
          */
-        protected select(sel: string): HTMLElement {
+        protected select(sel: string): JQuery<HTMLElement> {
             if (this.scheme) {
-                return $(sel, this.scheme)[0];
+                return $(sel, this.scheme);
             }
         }
     }

src/core/db.ts

@@ -49,7 +49,7 @@ namespace OS {
              * @memberof DB
              */
             save(d: any): Promise<API.RequestResult> {
-                return new Promise(async function (resolve, reject) {
+                return new Promise(async (resolve, reject) => {
                     try {
                         const r = await Ant.OS.API.handle.dbquery("save", {
                             table: this.table,

src/core/gui.ts

@@ -314,10 +314,10 @@ namespace OS {
          */
         export function unloadApp(app: string): void {
             PM.killAll(app, true);
-            if (app[app] && app[app].style) {
+            if (application[app] && application[app].style) {
-                $(app[app].style).remove();
+                $(application[app].style).remove();
             }
-            delete app[app];
+            delete application[app];
         }
 
         /**
@@ -333,7 +333,6 @@ namespace OS {
                     path = setting.system.packages[app].path;
                 }
                 const js = path + "/main.js";
-
                 try {
                     const d = await js.asFileHandle().read("script");
                     try {
@@ -613,9 +612,11 @@ namespace OS {
         function bindContextMenu(event: JQuery.MouseEventBase): void {
             var handle = function (e: HTMLElement) {
                 if (e.contextmenuHandle) {
+                    const m = $("#contextmenu")[0] as tag.MenuTag;
+                    m.onmenuselect = () => {}
                     return e.contextmenuHandle(
                         event,
-                        $("#contextmenu")[0] as tag.MenuTag
+                        m
                     );
                 } else {
                     const p = $(e).parent().get(0);
@@ -995,7 +996,6 @@ namespace OS {
             loadTheme(setting.appearance.theme, true);
             wallpaper(undefined);
             OS.announcer.observable.one("syspanelloaded", async function () {
-                // TODO load packages list then build system menu
                 OS.announcer.observable.on("systemlocalechange", (name) =>
                     $("#syspanel")[0].update()
                 );

src/core/tags/NSpinnerTag.ts

@@ -34,7 +34,10 @@ namespace OS {
                  * @protected
                  * @memberof NSpinnerTag
                  */
-                protected init(): void {}
+                protected init(): void {
+                    this._value = 0;
+                    this.step = 1;
+                }
 
                 /**
                  *
@@ -67,7 +70,7 @@ namespace OS {
                     });
 
                     $(this.refs.decr).click((e) => {
-                        return (this.value = this.value - this.step);
+                        this.value = this.value - this.step;
                     });
 
                     // @observable.on "calibrate", () -> @calibrate()

src/core/tags/SwitchTag.ts

@@ -66,6 +66,7 @@ namespace OS {
                 protected init(): void {
                     this.swon = false;
                     this.enable = true;
+                    this._onchange = this._onchanging = (e) => {};
                 }
                 protected calibrate(): void {}
                 protected reload(d?: any): void {}

src/core/tags/TabContainerTag.ts

@@ -128,7 +128,7 @@ namespace OS {
                  *
                  * @memberof TabContainerTag
                  */
-                set tabbarheigh(v: number) {
+                set tabbarheight(v: number) {
                     $(this.refs.bar).attr("data-height", `${v}`);
                     (this.refs.wrapper as TileLayoutTag).calibrate();
                 }

src/core/tags/TileLayoutTags.ts

@@ -44,7 +44,8 @@ namespace OS {
                     $(this).css("display", "block");
                     $(this.refs.yield)
                         .css("display", "flex")
-                        .css("width", "100%");
+                        .css("width", "100%")
+                        .css("height", "100%");
                     this.observable.on("resize", (e) => this.calibrate());
                     return this.calibrate();
                 }
@@ -67,6 +68,7 @@ namespace OS {
                     $(this.refs.yield)
                         .children()
                         .each(function (e) {
+                            $(this).css("height", "100%");
                             let attv = $(this).attr("data-width");
                             let dw = 0;
                             if (attv && attv !== "grow") {
@@ -108,6 +110,7 @@ namespace OS {
                         .children()
                         .each(function (e) {
                             let dh = 0;
+                            $(this).css("width", "100%");
                             let attv = $(this).attr("data-height");
                             if (attv && attv !== "grow") {
                                 if (attv[attv.length - 1] === "%") {

src/core/tags/TreeViewTag.ts

@@ -168,8 +168,10 @@ namespace OS {
                         $(this.refs.toggle).addClass(
                             "afx-tree-view-folder-open"
                         );
+                    } else {
+                        $(this.refs.toggle).addClass("afx-tree-view-folder-close");
                     }
-                    $(this.refs.toggle).addClass("afx-tree-view-folder-close");
+                    
                 }
 
                 /**

src/core/tags/tag.ts

@@ -241,7 +241,23 @@ namespace OS {
                 name: string,
                 cls: { new (): T }
             ): void {
-                customElements.define(name, cls);
+                try {
+                    customElements.define(name, cls);
+                } catch (error) {
+                    const proto = customElements.get(name);
+                    if(cls)
+                    {
+                        const props = Object.getOwnPropertyNames(cls.prototype);
+                        // redefine the class
+                        for(let prop of props)
+                        {
+                            proto.prototype[prop] = cls.prototype[prop];
+                        }
+                        return;
+                    }
+                    throw error;
+                    
+                }
             }
         }
     }

src/packages/Files/scheme.html

@@ -1,6 +1,6 @@
 <afx-app-window data-id = "files-app-window" apptitle="Files" width="600" height="400">
         <afx-vbox>
-            <afx-hbox data-height = "30" data-id = "nav-bar"> 
+            <afx-hbox data-height = "23" data-id = "nav-bar"> 
                 <afx-button data-width = "23" data-id = "btback" iconclass = "fa fa-arrow-left"></afx-button>
                 <input type = "text" data-id = "navinput"></input>
                 <div data-width = "2"></div>
@@ -8,6 +8,7 @@
                 <div data-width = "2"></div>
                 <afx-button data-width = "23" data-id = "btlist" iconclass = "fa fa-th-list"></afx-button>
             </afx-hbox>
+            <div data-height="5"></div>
             <afx-hbox>
                 <afx-list-view data-id = "favouri" data-width = "150" min-width="100">
                 </afx-list-view>

src/packages/Syslog/Syslog.ts

@@ -179,15 +179,14 @@ detail:
                 };
 
                 this.loglist.onitemclose = (e) => {
-                    let el;
+                    let el: TAG.ListViewItemTag;
                     if (e && e.data) {
                         el = e.data.item;
                     }
                     if (!el) {
                         return true;
                     }
-                    const data = el.get("data");
+                    const data = el.data;
-                    console.log(data);
                     if (!data.selected) {
                         return true;
                     }

src/themes/antos_dark/afx-grid-view.css

@@ -10,7 +10,7 @@ afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
 }
 afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell.afx-grid-cell-selected
 {
-    font-weight: bold;
+    font-weight: normal;
 }
 
 

src/themes/antos_dark/afx-tree-view.css

@@ -1,6 +1,4 @@
-afx-tree-view{
+
-    padding:3px;
-}
 afx-tree-view div{
     padding:3px;
 }

src/themes/antos_light/afx-tree-view.css

@@ -1,6 +1,3 @@
-afx-tree-view{
-    padding:3px;
-}
 afx-tree-view div{
     padding:3px;
 }