From 92e27b653fc509146c5dc86effb78060c6172ffd Mon Sep 17 00:00:00 2001 From: DanyLE Date: Thu, 8 Dec 2022 14:50:38 +0100 Subject: [PATCH] Rework on AntOS core to provide support to both mobile and desktop devices (experimental): - Redesign the core UI API and tags to support Mobile devices - Add new StackMenu tag - Support touch events handling on touch devices - Redesign File and Setting to work on mobile - Improve Anouncement API - Rework on default themes --- Makefile | 3 +- d.ts/antos.d.ts | 531 ++++++++++++++++--- src/bootstrap.ts | 10 + src/core/Announcerment.ts | 61 ++- src/core/BaseApplication.ts | 26 +- src/core/BaseDialog.ts | 61 ++- src/core/BaseModel.ts | 18 +- src/core/core.ts | 11 +- src/core/gui.ts | 34 +- src/core/pm.ts | 2 +- src/core/tags/AppDockTag.ts | 4 +- src/core/tags/ButtonTag.ts | 17 +- src/core/tags/DesktopTag.ts | 15 +- src/core/tags/FileViewTag.ts | 39 +- src/core/tags/FloatListTag.ts | 36 +- src/core/tags/GridViewTag.ts | 16 +- src/core/tags/ListViewTag.ts | 183 +++++-- src/core/tags/NSpinnerTag.ts | 32 -- src/core/tags/OverlayTag.ts | 4 +- src/core/tags/ResizerTag.ts | 18 +- src/core/tags/SliderTag.ts | 62 ++- src/core/tags/StackMenuTag.ts | 553 ++++++++++++++++++++ src/core/tags/SystemPanelTag.ts | 69 ++- src/core/tags/TabBarTag.ts | 76 +++ src/core/tags/TabContainerTag.ts | 15 +- src/core/tags/TileLayoutTags.ts | 13 - src/core/tags/TreeViewTag.ts | 4 +- src/core/tags/WindowTag.ts | 206 ++++++-- src/core/tags/tag.ts | 4 +- src/packages/Files/main.css | 8 +- src/packages/Files/main.ts | 121 ++--- src/packages/Files/scheme.html | 21 +- src/packages/MarketPlace/main.css | 5 + src/packages/MarketPlace/main.ts | 8 +- src/packages/MarketPlace/scheme.html | 53 +- src/packages/Setting/AppAndServiceHandle.ts | 4 +- src/packages/Setting/AppearanceHandle.ts | 2 +- src/packages/Setting/StartupHandle.ts | 8 +- src/packages/Setting/VFSHandle.ts | 4 +- src/packages/Setting/main.css | 17 +- src/packages/Setting/main.ts | 4 +- src/packages/Setting/scheme.html | 60 +-- src/themes/antos_dark/afx-app-window.css | 35 +- src/themes/antos_dark/afx-button.css | 8 +- src/themes/antos_dark/afx-dock.css | 20 - src/themes/antos_dark/afx-file-view.css | 25 +- src/themes/antos_dark/afx-list-view.css | 55 +- src/themes/antos_dark/afx-menu.css | 31 -- src/themes/antos_dark/afx-nspinner.css | 7 - src/themes/antos_dark/afx-slider.css | 17 +- src/themes/antos_dark/afx-stack-menu.css | 26 + src/themes/antos_dark/afx-sys-panel.css | 34 +- src/themes/antos_dark/afx-tab-bar.css | 15 +- src/themes/antos_dark/afx-tree-view.css | 8 - src/themes/antos_dark/antos.css | 14 - src/themes/antos_light/afx-app-window.css | 38 +- src/themes/antos_light/afx-button.css | 10 +- src/themes/antos_light/afx-dock.css | 21 +- src/themes/antos_light/afx-file-view.css | 26 +- src/themes/antos_light/afx-list-view.css | 56 +- src/themes/antos_light/afx-menu.css | 31 -- src/themes/antos_light/afx-nspinner.css | 7 - src/themes/antos_light/afx-slider.css | 15 +- src/themes/antos_light/afx-stack-menu.css | 24 + src/themes/antos_light/afx-sys-panel.css | 35 +- src/themes/antos_light/afx-tab-bar.css | 15 +- src/themes/antos_light/afx-tree-view.css | 8 - src/themes/antos_light/antos.css | 13 - src/themes/system/afx-app-window.css | 34 +- src/themes/system/afx-button.css | 10 + src/themes/system/afx-dock.css | 21 +- src/themes/system/afx-file-view.css | 44 ++ src/themes/system/afx-grid-view.css | 28 +- src/themes/system/afx-label.css | 1 + src/themes/system/afx-list-view.css | 63 ++- src/themes/system/afx-menu.css | 32 ++ src/themes/system/afx-nspinner.css | 15 +- src/themes/system/afx-slider.css | 1 + src/themes/system/afx-stack-menu.css | 51 ++ src/themes/system/afx-sys-panel.css | 67 ++- src/themes/system/afx-tab-bar.css | 22 +- src/themes/system/afx-tree-view.css | 19 + src/themes/system/antos.css | 16 +- 83 files changed, 2417 insertions(+), 1039 deletions(-) create mode 100644 src/core/tags/StackMenuTag.ts create mode 100644 src/themes/antos_dark/afx-stack-menu.css create mode 100644 src/themes/antos_light/afx-stack-menu.css create mode 100644 src/themes/system/afx-stack-menu.css diff --git a/Makefile b/Makefile index cb940ac..5877ab0 100644 --- a/Makefile +++ b/Makefile @@ -40,7 +40,8 @@ tags = dist/core/tags/tag.js \ dist/core/tags/OverlayTag.js \ dist/core/tags/AppDockTag.js \ dist/core/tags/SystemPanelTag.js \ - dist/core/tags/DesktopTag.js + dist/core/tags/DesktopTag.js \ + dist/core/tags/StackMenuTag.js javascripts= dist/core/core.js \ dist/core/settings.js \ diff --git a/d.ts/antos.d.ts b/d.ts/antos.d.ts index 8c3a58c..0a61748 100644 --- a/d.ts/antos.d.ts +++ b/d.ts/antos.d.ts @@ -367,12 +367,12 @@ declare namespace OS { */ constructor(name: string); /** - * Exit the sub-window + * Purge the model from the system * - * @returns {void} - * @memberof SubWindow + * @protected + * @memberof BaseModel */ - quit(): void; + protected destroy(): void; /** * Init the sub-window, this function is called * on creation of the sub-window object. It is used @@ -458,6 +458,12 @@ declare namespace OS { * @memberof BaseDialog */ protected onexit(_e: BaseEvent): void; + /** + * Show the dialog + * + * @memberof BaseDialog + */ + show(): void; } /** * A basic dialog renders a dialog widget using the UI @@ -1692,6 +1698,10 @@ declare namespace OS { * is an instance of [[string]] */ const REPOSITORY: string; + /** + * Indicate whether the current de + */ + var mobile: boolean; /** * Register a model prototype to the system namespace. * There are two types of model to be registered, if the model @@ -2284,14 +2294,6 @@ declare namespace OS { * @memberof BaseApplication */ sysdock: GUI.tag.AppDockTag; - /** - * Reference to the system application menu located - * on the system panel - * - * @type {GUI.tag.MenuTag} - * @memberof BaseApplication - */ - appmenu: GUI.tag.MenuTag; /** * Loading animation check timeout * @@ -2510,6 +2512,7 @@ declare namespace OS { } } /// +/// declare namespace OS { /** * Application argument type definition @@ -2780,7 +2783,14 @@ declare namespace OS { * @returns {void} * @memberof BaseModel */ - quit(force: boolean): void; + quit(force?: boolean): void; + /** + * Purge the model from the system + * + * @protected + * @memberof BaseModel + */ + protected destroy(): void; /** * Model meta data, need to be implemented by * subclasses @@ -3148,6 +3158,14 @@ declare namespace OS { * @memberof FileViewTag */ private _onfileopen; + /** + * placeholder for directory changed event callback + * + * @private + * @type {TagEventCallback} + * @memberof FileViewTag + */ + private _ondirchanged; /** * Reference to the all selected files meta-datas * @@ -3223,6 +3241,14 @@ declare namespace OS { * @memberof FileViewTag */ set onfileselect(e: TagEventCallback); + /** + * set the callback handle for the directory changed event. + * The parameter of the callback should be an object + * of type [[TagEventType]] with the data type `T` is [[API.VFS.BaseFileHandle]] + * + * @memberof FileViewTag + */ + set onchdir(e: TagEventCallback); /** set the callback handle for the file open event. * The parameter of the callback should be an object @@ -3484,10 +3510,10 @@ interface HTMLElement { * defined on any child of this element will be ignored. * * @param {JQuery.MouseEventBase} e a mouse event - * @param {OS.GUI.tag.MenuTag} m The context menu element [[MenuTag]] + * @param {OS.GUI.tag.StackMenuTag} m The context menu element [[StackMenuTag]] * @memberof HTMLElement */ - contextmenuHandle(e: JQuery.MouseEventBase, m: OS.GUI.tag.MenuTag): void; + contextmenuHandle(e: JQuery.MouseEventBase, m: OS.GUI.tag.StackMenuTag): void; /** * Mount the element and all the children on its DOM subtree. This action * is performed in a top-down manner @@ -4069,10 +4095,10 @@ declare namespace OS { * * @protected * @abstract - * @returns {TagLayoutType} + * @returns {TagLayoutType | TagLayoutType[]} * @memberof ListViewItemTag */ - protected abstract itemlayout(): TagLayoutType; + protected abstract itemlayout(): TagLayoutType | TagLayoutType[]; /** * This function is called when the item data is changed. * It should be implemented in all subclass of this class @@ -4131,10 +4157,63 @@ declare namespace OS { * List item custom layout definition * * @protected - * @returns {TagLayoutType} + * @returns {TagLayoutType | TagLayoutType[]} * @memberof SimpleListItemTag */ - protected itemlayout(): TagLayoutType; + protected itemlayout(): TagLayoutType | TagLayoutType[]; + } + /** + * The layout of a double line list item contains two + * AFX labels + * + * @export + * @class DoubleLineListItemTag + * @extends {ListViewItemTag} + */ + class DoubleLineListItemTag extends ListViewItemTag { + /** + *Creates an instance of DoubleLineListItemTag. + * @memberof DoubleLineListItemTag + */ + constructor(); + /** + * Reset some property to default + * + * @protected + * @memberof DoubleLineListItemTag + */ + protected init(): void; + /** + * Do nothing + * + * @protected + * @memberof DoubleLineListItemTag + */ + protected calibrate(): void; + /** + * Refresh the inner label when the item data + * is changed + * + * @protected + * @returns {void} + * @memberof DoubleLineListItemTag + */ + protected ondatachange(): void; + /** + * Re-render the list item + * + * @protected + * @memberof DoubleLineListItemTag + */ + protected reload(): void; + /** + * List item custom layout definition + * + * @protected + * @returns {TagLayoutType | TagLayoutType[]} + * @memberof DoubleLineListItemTag + */ + protected itemlayout(): TagLayoutType | TagLayoutType[]; } /** * This tag defines a traditional or a dropdown list widget. @@ -4349,6 +4428,16 @@ declare namespace OS { * @memberof ListViewTag */ set buttons(v: GenericObject[]); + /** + * Getter: Get list direction: horizontal or vertical (default) + * + * Setter: Get list direction: horizontal or vertical + * + * @type {string} + * @memberof ListViewTag + */ + set dir(v: string); + get dir(): string; /** * Getter: Get data of the list * @@ -4390,6 +4479,13 @@ declare namespace OS { * @memberof ListViewTag */ get selectedItems(): ListViewItemTag[]; + /** + * get the selected item index + * + * @readonly + * @type {number} + * @memberof ListViewTag + */ get selected(): number | number[]; /** * Add an item to the beginning of the list @@ -4412,7 +4508,7 @@ declare namespace OS { * Add an item to the beginning or end of the list * * @param {GenericObject} item list item data - * @param {boolean} [flag] indicates whether to add the item in the beginning of the list + * @param {boolean} flag indicates whether to add the item in the beginning of the list * @returns {ListViewItemTag} the added list item element * @memberof ListViewTag */ @@ -4460,21 +4556,21 @@ declare namespace OS { /** * This function triggers the double click event on an item * - * @private + * @protected * @param {TagEventType} e tag event object * @returns * @memberof ListViewTag */ - private idbclick; + protected idbclick(e: TagEventType): void; /** * This function triggers the list item select event * - * @private + * @protected * @param {TagEventType} e tag event object * @returns * @memberof ListViewTag */ - private iselect; + protected iselect(e: TagEventType): void; /** * Mount the tag and bind some basic event * @@ -4665,6 +4761,13 @@ declare namespace OS { * @memberof TabBarTag */ private _ontabselect; + /** + * Cache of touch event + * + * @private + * @meberof TabBarTag + */ + private _previous_touch; /** *Creates an instance of TabBarTag. * @memberof TabBarTag @@ -4694,6 +4797,21 @@ declare namespace OS { */ set closable(v: boolean); get closable(): boolean; + /** + * Setter: + * + * Set the tab bar direction: + * - `horizontal`: horizontal direction + * - `vertical`: vertical direction + * + * Getter: + * + * Get the tab bar direction + * + * @memberof TabBarTag + */ + set dir(v: string); + get dir(): string; /** * Add a tab in the end of the tab bar * @@ -4733,6 +4851,14 @@ declare namespace OS { */ set selected(v: number | number[]); get selected(): number | number[]; + /** + * Get the latest selected item + * + * @readonly + * @type {ListViewItemTag} + * @memberof TabBarTag + */ + get selectedItem(): ListViewItemTag; /** * Set the tab close event handle * @@ -6166,7 +6292,14 @@ declare namespace OS { * @type {GenericObject} * @memberof ButtonTag */ - data: GenericObject; + private _data; + /** + * Custom user data setter/gettter + * + * @memberof ButtonTag + */ + set data(v: GenericObject); + get data(): GenericObject; /** *Creates an instance of ButtonTag. * @memberof ButtonTag @@ -7472,6 +7605,272 @@ declare namespace OS { } } } +/// +declare namespace OS { + namespace GUI { + namespace tag { + /** + * menu event data type definition + */ + type StackMenuEventData = TagEventDataType; + /** + * The layout of a simple stack menu item + * + * @export + * @class SimpleStackMenuItemTag + * @extends {ListViewItemTag} + */ + class SimpleStackMenuItemTag extends ListViewItemTag { + /** + *Creates an instance of SimpleStackMenuItemTag. + * @memberof SimpleStackMenuItemTag + */ + constructor(); + /** + * Reset some property to default + * + * @protected + * @memberof SimpleStackMenuItemTag + */ + protected init(): void; + /** + * Mount the current tag + * + * @protected + * @memberof SimpleStackMenuItemTag + */ + protected mount(): void; + /** + * Setter: Turn on/off the checker feature of the menu entry + * + * Getter: Check whether the checker feature is enabled on this menu entry + * + * @memberof SimpleStackMenuItemTag + */ + set switch(v: boolean); + get switch(): boolean; + /** + * Setter: select/unselect the current item + * + * Getter: Check whether the current item is selected + * + * @memberof SimpleStackMenuItemTag + */ + set selected(v: boolean); + get selected(): boolean; + /** + * Setter: Turn on/off the radio feature of the menu entry + * + * Getter: Check whether the radio feature is enabled + * + * @memberof SimpleStackMenuItemTag + */ + set radio(v: boolean); + get radio(): boolean; + /** + * Setter: + * + * Toggle the switch on the menu entry, this setter + * only works when the `checker` or `radio` feature is + * enabled + * + * Getter: + * + * Check whether the switch is turned on + * + * @memberof SimpleStackMenuItemTag + */ + set checked(v: boolean); + get checked(): boolean; + /** + * Set the keyboard shortcut text + * + * @memberof SimpleStackMenuItemTag + */ + set shortcut(v: string); + /** + * Do nothing + * + * @protected + * @memberof SimpleStackMenuItemTag + */ + protected calibrate(): void; + /** + * Refresh the inner label when the item data + * is changed + * + * @protected + * @returns {void} + * @memberof SimpleStackMenuItemTag + */ + protected ondatachange(): void; + /** + * Re-render the list item + * + * @protected + * @memberof SimpleStackMenuItemTag + */ + protected reload(): void; + /** + * List item custom layout definition + * + * @protected + * @returns {TagLayoutType} + * @memberof SimpleStackMenuItemTag + */ + protected itemlayout(): TagLayoutType; + } + /** + * A stack menu is a multilevel menu that + * uses a single list view to navigate all menu levels + * instead of using a traditional cascade style menu + * + * @export + * @class StackMenuTag + * @extends {AFXTag} + */ + class StackMenuTag extends AFXTag { + /** + * Data stack, the list always displays the + * element on the top of the stack + * + * @type {GenericObject[][]} + * @memberof StackMenuTag + */ + private stack; + /** + * Update the current tag, do nothing + * + * @protected + * @param {*} [d] + * @memberof StackMenuTag + */ + protected reload(d?: any): void; + /** + * Placeholder of tab select event handle + * + * @private + * @type {TagEventCallback} + * @memberof StackMenuTag + */ + private _onmenuselect; + /** + * Stack menu constructor + * + * @memberof StackMenuTag + */ + constructor(); + /** + * Reset to default some property value + * + * @protected + * @memberof StackMenuTag + */ + protected init(): void; + /** + * Recalcutate the menu coordinate in case of + * context menu + * + * @protected + * @memberof StackMenuTag + */ + protected calibrate(): void; + /** + * Reset the menu to its initial state + * + * @memberof StackMenuTag + */ + reset(): void; + /** + * Mount the tab bar and bind some basic events + * + * @protected + * @memberof StackMenuTag + */ + protected mount(): void; + /** + * Setter: set current selected item index + * + * Getter: Get current selected item index + * + * @memberof StackMenuTag + */ + set selected(i: number | number[]); + get selected(): number | number[]; + /** + * Setter: Set whether the current menu is a context menu + * + * Getter: Check whether the current menu is a context menu + * + * @memberof StackMenuTag + */ + set context(v: boolean); + get context(): boolean; + /** + * Get the latest selected item + * + * @readonly + * @type {ListViewItemTag} + * @memberof StackMenuTag + */ + get selectedItem(): ListViewItemTag; + /** + * Get all the selected items + * + * @readonly + * @type {ListViewItemTag[]} + * @memberof StackMenuTag + */ + get selectedItems(): ListViewItemTag[]; + /** + * The following setter/getter are keep for backward compatible + * with the MenuTag interface + * + * Setter: Set the menu data + * + * Getter: Get the menu data + * + * @deprecated + * @memberof StackMenuTag + */ + set items(v: GenericObject[]); + get items(): GenericObject[]; + /** + * Setter: Set the menu data + * + * Getter: Get the menu data + * + * @memberof StackMenuTag + */ + set nodes(v: GenericObject[]); + get nodes(): GenericObject[]; + /** + * Set the `menu entry select` event handle + * + * @memberof StackMenuTag + */ + set onmenuselect(v: TagEventCallback); + /** + * Show the current menu. This function is called + * only if the current menu is a context menu + * + * @param {JQuery.MouseEventBase} e JQuery mouse event + * @returns {void} + * @memberof StackMenuTag + */ + show(e?: JQuery.MouseEventBase): void; + /** + * TabBar layout definition + * + * @protected + * @returns {TagLayoutType[]} + * @memberof StackMenuTag + */ + protected layout(): TagLayoutType[]; + } + } + } +} declare namespace OS { namespace GUI { namespace tag { @@ -7553,6 +7952,13 @@ declare namespace OS { * @memberof SliderTag */ set onvaluechanging(f: TagEventCallback); + /** + * Setter/Getter: set and get precision reading + * + * @memberof SliderTag + */ + set precision(v: boolean); + get precision(): boolean; /** * Setter: Enable/disable the slider * @@ -7841,25 +8247,6 @@ declare namespace OS { * @memberof FloatListTag */ set onready(v: (e: FloatListTag) => void); - /** - * Setter: - * - * Set the direction of the list item layout. - * Two directions are available: - * - `vertical` - * - `horizontal` - * - * This setter acts as a DOM attribute - * - * Getter: - * - * Get the currently set direction of list - * item layout - * - * @memberof FloatListTag - */ - set dir(v: string); - get dir(): string; /** * Disable the dropdown option in this list * @@ -8289,6 +8676,14 @@ declare namespace OS { * @memberof WindowTag */ private _history; + /** + * This placeholder store the callback for the menu open event + * + * @private + * @type {(el: StackMenuTag) => void} + * @memberof WindowTag + */ + private _onmenuopen; /** * This placeholder stores the offset of the virtual desktop element * @@ -8314,6 +8709,12 @@ declare namespace OS { */ set blur_overlay(v: boolean); get blur_overlay(): boolean; + /** + * Setter: set menu open event handler + * + * @memberof WindowTag + */ + set onmenuopen(f: (el: StackMenuTag) => void); /** * Init window tag * - `shown`: false @@ -8359,6 +8760,12 @@ declare namespace OS { */ set height(v: number); get height(): number; + /** + * Set the application menu content + * + * @memberof WindowTag + */ + set menu(v: GenericObject[]); /** * Setter: enable/disable window minimizable * @@ -10136,19 +10543,17 @@ declare namespace OS { * @interface AnnouncerListenerType */ interface AnnouncerListenerType { - [index: number]: { - /** - * The event name - * - * @type {string} - */ - e: string; - /** - * The event callback - * - */ - f: (d: any) => void; - }[]; + /** + * The event name + * + * @type {string} + */ + e: string; + /** + * The event callback + * + */ + f: (d: any) => void; } /** * This class is the based class used in AntOS event @@ -10250,7 +10655,7 @@ declare namespace OS { /** * Placeholder of all global events listeners */ - var listeners: API.AnnouncerListenerType; + var listeners: Map; /** * Subscribe to a global event * @@ -10259,7 +10664,15 @@ declare namespace OS { * @param {(d: API.AnnouncementDataType) => void} f event callback * @param {GUI.BaseModel} a the process (Application/service) related to the callback */ - function on(e: string, f: (d: API.AnnouncementDataType) => void, a: BaseModel): void; + function on(e: string, f: (d: API.AnnouncementDataType) => void, a?: BaseModel): void; + /** + * Subscribe to a global event once + * + * @export + * @param {string} e event name + * @param {(d: API.AnnouncementDataType) => void} f event callback + */ + function one(e: string, f: (d: API.AnnouncementDataType) => void): void; /** * Trigger a global event * diff --git a/src/bootstrap.ts b/src/bootstrap.ts index ef8204d..7cec45d 100644 --- a/src/bootstrap.ts +++ b/src/bootstrap.ts @@ -21,5 +21,15 @@ Ant.onload = function () { "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange", () => (Ant.OS.GUI.fullscreen = !Ant.OS.GUI.fullscreen) ); + const agent = navigator.userAgent||navigator.vendor||(window as any).opera; + Ant.OS.mobile = false; + if( + /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(agent) + || + /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(agent.substr(0,4)) + ) + { + Ant.OS.mobile = true; + } return Ant.OS.boot(); }; \ No newline at end of file diff --git a/src/core/Announcerment.ts b/src/core/Announcerment.ts index d2d42c9..da71c37 100644 --- a/src/core/Announcerment.ts +++ b/src/core/Announcerment.ts @@ -107,21 +107,19 @@ namespace OS { * @interface AnnouncerListenerType */ export interface AnnouncerListenerType { - [index: number]: { - /** - * The event name - * - * @type {string} - */ - e: string; + /** + * The event name + * + * @type {string} + */ + e: string; - /** - * The event callback - * - */ - f: (d: any) => void; - }[]; - } + /** + * The event callback + * + */ + f: (d: any) => void; + }; /** * This class is the based class used in AntOS event @@ -301,7 +299,7 @@ namespace OS { /** * Placeholder of all global events listeners */ - export var listeners: API.AnnouncerListenerType = {}; + export var listeners: Map = new Map(); /** * Subscribe to a global event @@ -311,14 +309,29 @@ namespace OS { * @param {(d: API.AnnouncementDataType) => void} f event callback * @param {GUI.BaseModel} a the process (Application/service) related to the callback */ - export function on(e: string, f: (d: API.AnnouncementDataType) => void, a: BaseModel): void { - if (!announcer.listeners[a.pid]) { - announcer.listeners[a.pid] = []; + export function on(e: string, f: (d: API.AnnouncementDataType) => void, a?: BaseModel): void { + let key: BaseModel | 0 = 0; + if(a) + key = a; + if (!announcer.listeners.has(key)) { + announcer.listeners.set(key, []); } - announcer.listeners[a.pid].push({ e, f }); + const collection = announcer.listeners.get(key); + collection.push({ e, f }); announcer.observable.on(e, f); } + /** + * Subscribe to a global event once + * + * @export + * @param {string} e event name + * @param {(d: API.AnnouncementDataType) => void} f event callback + */ + export function one(e: string, f: (d: API.AnnouncementDataType) => void): void { + announcer.observable.one(e, f); + } + /** * Trigger a global event * @@ -390,16 +403,14 @@ namespace OS { * @returns {void} */ export function unregister(app: BaseModel): void { - if ( - !announcer.listeners[app.pid] || - !(announcer.listeners[app.pid].length > 0) - ) { + if (!announcer.listeners.has(app)) { return; } - for (let i of announcer.listeners[app.pid]) { + const collection = announcer.listeners.get(app); + for (let i of collection) { announcer.observable.off(i.e, i.f); } - delete announcer.listeners[app.pid]; + announcer.listeners.delete(app); } /** diff --git a/src/core/BaseApplication.ts b/src/core/BaseApplication.ts index 87c51fd..f429719 100644 --- a/src/core/BaseApplication.ts +++ b/src/core/BaseApplication.ts @@ -61,15 +61,6 @@ namespace OS { */ sysdock: GUI.tag.AppDockTag; - /** - * Reference to the system application menu located - * on the system panel - * - * @type {GUI.tag.MenuTag} - * @memberof BaseApplication - */ - appmenu: GUI.tag.MenuTag; - /** * Loading animation check timeout * @@ -120,14 +111,8 @@ namespace OS { // first register some base event to the app this.on("focus", () => { this.sysdock.selectedApp = this; - this.appmenu.pid = this.pid; - this.appmenu.items = this.baseMenu() || []; + (this.scheme as GUI.tag.WindowTag).onmenuopen = (el) => el.nodes = this.baseMenu() || []; OS.PM.pidactive = this.pid; - this.appmenu.onmenuselect = ( - d: GUI.tag.MenuEventData - ): void => { - return this.trigger("menuselect", d); - }; this.trigger("focused", undefined); if (this.dialog) { return this.dialog.show(); @@ -135,8 +120,6 @@ namespace OS { }); this.on("hide", () => { this.sysdock.selectedApp = null; - this.appmenu.items = []; - this.appmenu.pid = -1; if (this.dialog) { return this.dialog.hide(); } @@ -163,7 +146,6 @@ namespace OS { this._pending_task.push(o.id); this.trigger("loading", undefined); }); - this.subscribe("loaded", (o: API.AnnouncementDataType) => { const i = this._pending_task.indexOf(o.id); if (i >= 0) { @@ -360,9 +342,6 @@ namespace OS { * @memberof BaseApplication */ blur(): void { - if (this.appmenu && this.pid === this.appmenu.pid) { - this.appmenu.items = []; - } this.trigger("blur", undefined); if(this.dialog) { @@ -414,9 +393,6 @@ namespace OS { protected onexit(evt: BaseEvent): void { this.cleanup(evt); if (!evt.prevent) { - if (this.pid === this.appmenu.pid) { - this.appmenu.items = []; - } $(this.scheme).remove(); } } diff --git a/src/core/BaseDialog.ts b/src/core/BaseDialog.ts index 47e40bd..6208ad0 100644 --- a/src/core/BaseDialog.ts +++ b/src/core/BaseDialog.ts @@ -58,22 +58,15 @@ namespace OS { } /** - * Exit the sub-window + * Purge the model from the system * - * @returns {void} - * @memberof SubWindow + * @protected + * @memberof BaseModel */ - quit(): void { - const evt = new BaseEvent("exit", false); - this.onexit(evt); - if (!evt.prevent) { - delete this._observable; - if (this.scheme) { - $(this.scheme).remove(); - } - if (this.dialog) { - return this.dialog.quit(); - } + protected destroy(): void + { + if (this.scheme) { + $(this.scheme).remove(); } } @@ -218,6 +211,19 @@ namespace OS { } } + /** + * Show the dialog + * + * @memberof BaseDialog + */ + show(): void { + this.trigger("focus", undefined); + this.trigger("focused", undefined); + if (this.dialog) { + this.dialog.show(); + } + } + } /** @@ -320,6 +326,7 @@ namespace OS { } win.resizable = false; win.minimizable = false; + win.menu = undefined; $(win).trigger("focus"); } } @@ -1216,20 +1223,18 @@ namespace OS { */ FileDialog.scheme = `\ - - - - - - -
- - -
-
- - - + + + + + +
+ + +
+
+ + \ `; diff --git a/src/core/BaseModel.ts b/src/core/BaseModel.ts index 167551a..3b925c2 100644 --- a/src/core/BaseModel.ts +++ b/src/core/BaseModel.ts @@ -296,6 +296,8 @@ namespace OS { this.on("exit", () => this.quit(false)); this.host = this._gui.desktop(); this.dialog = undefined; + // relay global events to local events + this.subscribe("desktopresize", (e) => this.observable.trigger("desktopresize", e)); } /** @@ -334,7 +336,7 @@ namespace OS { * @returns {void} * @memberof BaseModel */ - quit(force: boolean): void { + quit(force: boolean = false): void { const evt = new BaseEvent("exit", force); this.onexit(evt); if (!evt.prevent) { @@ -346,10 +348,22 @@ namespace OS { if (this.dialog) { this.dialog.quit(); } - return PM.kill(this); + announcer.unregister(this); + this.destroy(); } } + /** + * Purge the model from the system + * + * @protected + * @memberof BaseModel + */ + protected destroy(): void + { + return PM.kill(this); + } + /** * Model meta data, need to be implemented by * subclasses diff --git a/src/core/core.ts b/src/core/core.ts index 1e6ffce..e894e4e 100644 --- a/src/core/core.ts +++ b/src/core/core.ts @@ -807,6 +807,10 @@ namespace OS { */ export const REPOSITORY: string = "https://github.com/lxsang/antos"; + /** + * Indicate whether the current de + */ + export var mobile: boolean = false; /** * Register a model prototype to the system namespace. * There are two types of model to be registered, if the model @@ -875,6 +879,7 @@ namespace OS { export function boot(): void { //first login console.log("Booting system"); + // check whether we are on mobile device API.handle .auth() .then(function (d: API.RequestResult) { @@ -1331,7 +1336,7 @@ namespace OS { data.id = q; data.message = p; data.name = p; - data.u_data = PM.pidactive; + data.u_data = 0; //PM.pidactive; announcer.trigger("loading", data); } @@ -1612,11 +1617,11 @@ namespace OS { for (let k in searchHandle) { const ret = searchHandle[k](text); if (ret.length > 0) { - ret.unshift({ + /*ret.unshift({ text: k, class: "search-header", dataid: "header", - }); + });*/ r = r.concat(ret); } } diff --git a/src/core/gui.ts b/src/core/gui.ts index 6f4a7fa..ac62728 100644 --- a/src/core/gui.ts +++ b/src/core/gui.ts @@ -94,7 +94,6 @@ namespace OS { * is allowed at a time. A dialog may have sub dialog */ export var dialog: BaseDialog; - /** * Placeholder for system shortcuts */ @@ -192,7 +191,7 @@ namespace OS { */ export function systemDock(): GUI.tag.AppDockTag { - return $("#sysdock")[0] as tag.AppDockTag; + return $("[data-id='sysdock']")[0] as tag.AppDockTag; } /** @@ -657,14 +656,10 @@ namespace OS { if (!meta.icon && !meta.iconclass) { data.iconclass = "fa fa-cogs"; } - const dock = $("#sysdock")[0] as tag.AppDockTag; + const dock = systemDock(); app.sysdock = dock; app.init(); app.observable.one("rendered", function () { - app.appmenu = $( - "[data-id = 'appmenu']", - "#syspanel" - )[0] as tag.MenuTag; dock.newapp(data); }); } @@ -714,7 +709,7 @@ namespace OS { * @returns */ export function undock(app: application.BaseApplication) { - return ($("#sysdock")[0] as tag.AppDockTag).removeapp(app); + return systemDock().removeapp(app); } /** @@ -753,7 +748,7 @@ namespace OS { function bindContextMenu(event: JQuery.MouseEventBase): void { var handle = function (e: HTMLElement) { if (e.contextmenuHandle) { - const m = $("#contextmenu")[0] as tag.MenuTag; + const m = $("#contextmenu")[0] as tag.StackMenuTag; m.onmenuselect = () => { }; return e.contextmenuHandle(event, m); } else { @@ -896,9 +891,9 @@ namespace OS { const scheme = $.parseHTML(schemes.ws); $("#wrapper").append(scheme); - announcer.observable.one("sysdockloaded", () => { + announcer.one("sysdockloaded", () => { $(window).on("keydown", function (event) { - const dock = $("#sysdock")[0] as tag.AppDockTag; + const dock = systemDock(); if (!dock) { return; } @@ -939,10 +934,10 @@ namespace OS { }); // system menu and dock $("#syspanel")[0].uify(undefined); - $("#sysdock")[0].uify(undefined); $("#systooltip")[0].uify(undefined); - $("#contextmenu")[0].uify(undefined); - + + const ctxmenu = $("#contextmenu")[0]; + ctxmenu.uify(undefined); $("#wrapper").on("contextmenu", (e) => bindContextMenu(e)); // tooltip $(document).on("mouseover", function (e) { @@ -1033,8 +1028,8 @@ namespace OS { // load theme loadTheme(setting.appearance.theme, true); wallpaper(undefined); - OS.announcer.observable.one("syspanelloaded", async function () { - OS.announcer.observable.on("systemlocalechange", (_) => + OS.announcer.one("syspanelloaded", async function () { + OS.announcer.on("systemlocalechange", (_) => $("#syspanel")[0].update() ); @@ -1085,10 +1080,10 @@ namespace OS { }); // initDM API.setLocale(setting.system.locale).then(() => initDM()); - Ant.OS.announcer.observable.on("error", function (d) { + Ant.OS.announcer.on("error", function (d) { console.log(d.u_data); }); - Ant.OS.announcer.observable.on("fail", function (d) { + Ant.OS.announcer.on("fail", function (d) { console.log(d.u_data); }); } @@ -1105,10 +1100,9 @@ namespace OS { schemes.ws = `\
-
- + \ `; diff --git a/src/core/pm.ts b/src/core/pm.ts index 1cf96b1..6d9acbf 100644 --- a/src/core/pm.ts +++ b/src/core/pm.ts @@ -139,7 +139,7 @@ namespace OS { } else { GUI.detachservice(app as application.BaseService); } - announcer.unregister(app); + // announcer.unregister(app); delete PM.processes[app.name][i]; PM.processes[app.name].splice(i, 1); } diff --git a/src/core/tags/AppDockTag.ts b/src/core/tags/AppDockTag.ts index 8131a10..fef6036 100644 --- a/src/core/tags/AppDockTag.ts +++ b/src/core/tags/AppDockTag.ts @@ -99,7 +99,7 @@ namespace OS { } } if (i !== -1) { - $(this.items[i].domel).attr("tooltip", `cr:${app.title()}`); + $(this.items[i].domel).attr("tooltip", `ct:${app.title()}`); } } @@ -257,7 +257,7 @@ namespace OS { "afx-button" )[0] as any) as ButtonTag; const app = bt.data as application.BaseApplication; - m.items = [ + m.nodes = [ { text: "__(New window)", dataid: "new" }, { text: "__(Show)", dataid: "show" }, { text: "__(Hide)", dataid: "hide" }, diff --git a/src/core/tags/ButtonTag.ts b/src/core/tags/ButtonTag.ts index 762a16b..063ae00 100644 --- a/src/core/tags/ButtonTag.ts +++ b/src/core/tags/ButtonTag.ts @@ -24,7 +24,22 @@ namespace OS { * @type {GenericObject} * @memberof ButtonTag */ - data: GenericObject; + private _data: GenericObject; + + /** + * Custom user data setter/gettter + * + * @memberof ButtonTag + */ + set data(v: GenericObject) + { + this._data = v; + this.set(v); + } + get data(): GenericObject + { + return this._data; + } /** *Creates an instance of ButtonTag. diff --git a/src/core/tags/DesktopTag.ts b/src/core/tags/DesktopTag.ts index aac3711..27f0257 100644 --- a/src/core/tags/DesktopTag.ts +++ b/src/core/tags/DesktopTag.ts @@ -87,7 +87,14 @@ namespace OS { this.onready = (_) => { this.observable = OS.announcer.observable; window.onresize = () => { - announcer.trigger("desktopresize", undefined); + const evt = { + id: this.aid, + data: { + width: $(this).width(), + height: $(this).height() + } + } + announcer.trigger("desktopresize", evt); this.calibrate(); }; @@ -134,8 +141,8 @@ namespace OS { { text: __("Refresh"), dataid: "desktop-refresh" } as GUI.BasicItemType, ]; menu = menu.concat(setting.desktop.menu.map(e => e)); - m.items = menu; - m.onmenuselect = (evt: TagEventType) => { + m.nodes = menu; + m.onmenuselect = (evt) => { if (!evt.data || !evt.data.item) return; const item = evt.data.item.data; switch (item.dataid) { @@ -162,7 +169,7 @@ namespace OS { }; this.refresh(); - announcer.observable.on("VFS", (d: API.AnnouncementDataType) => { + announcer.on("VFS", (d: API.AnnouncementDataType) => { if (["read", "publish", "download"].includes(d.message as string)) { return; } diff --git a/src/core/tags/FileViewTag.ts b/src/core/tags/FileViewTag.ts index bd3fcaf..a6660e1 100644 --- a/src/core/tags/FileViewTag.ts +++ b/src/core/tags/FileViewTag.ts @@ -27,6 +27,15 @@ namespace OS { */ private _onfileopen: TagEventCallback; + /** + * placeholder for directory changed event callback + * + * @private + * @type {TagEventCallback} + * @memberof FileViewTag + */ + private _ondirchanged: TagEventCallback; + /** * Reference to the all selected files meta-datas * @@ -92,6 +101,7 @@ namespace OS { this.chdir = true; this.view = "list"; this._onfileopen = this._onfileselect = (e) => { }; + this._ondirchanged = (e) => { }; this._selectedFiles = []; const fn = function(r1, r2, i) { let t1 = r1[i].text; @@ -115,17 +125,17 @@ namespace OS { t1 = t1.toString().toLowerCase(); t2 = t2.toString().toLowerCase(); } - if(this.__f) + if(this.desc) { - this.desc = ! this.desc; if(t1 < t2) { return -1; } if(t1 > t2) { return 1; } + } else { - this.desc = ! this.desc; if(t1 > t2) { return -1; } - if(t1 < t2) { return 1; } + if(t1 < t2) { return 1; }; + } return 0; }; @@ -176,6 +186,17 @@ namespace OS { this._onfileselect = e; } + /** + * set the callback handle for the directory changed event. + * The parameter of the callback should be an object + * of type [[TagEventType]] with the data type `T` is [[API.VFS.BaseFileHandle]] + * + * @memberof FileViewTag + */ + set onchdir(e: TagEventCallback) { + this._ondirchanged = e; + } + /** set the callback handle for the file open event. * The parameter of the callback should be an object @@ -352,6 +373,9 @@ namespace OS { if (this.status) { (this.refs.status as LabelTag).text = " "; } + const evt = { id: this.aid, data: v.asFileHandle() }; + this._ondirchanged(evt); + this.observable.trigger("chdir", evt); }) .catch((e: Error) => announcer.oserror(e.toString(), e) @@ -457,7 +481,7 @@ namespace OS { let h = $(this).outerHeight(); const w = $(this).width(); if (this.status) { - h -= $(this.refs.status).height() + 10; + h -= $(this.refs.status).height(); } $(this.refs.listview).css("height", h + "px"); $(this.refs.gridview).css("height", h + "px"); @@ -647,7 +671,7 @@ namespace OS { } if (this.status) { (this.refs.status as LabelTag).text = __( - "Selected: {0} ({1} bytes)", + "{0} ({1} bytes)", e.filename, e.size ? e.size : "0" ); @@ -669,10 +693,11 @@ namespace OS { e.type = "dir"; e.mime = "dir"; } + const evt = { id: this.aid, data: e }; if (e.type === "dir" && this.chdir) { this.path = e.path; } else { - const evt = { id: this.aid, data: e }; + this._onfileopen(evt); this.observable.trigger("fileopen", evt); } diff --git a/src/core/tags/FloatListTag.ts b/src/core/tags/FloatListTag.ts index de0d727..e670374 100644 --- a/src/core/tags/FloatListTag.ts +++ b/src/core/tags/FloatListTag.ts @@ -48,30 +48,6 @@ namespace OS { this._onready = v; } - /** - * Setter: - * - * Set the direction of the list item layout. - * Two directions are available: - * - `vertical` - * - `horizontal` - * - * This setter acts as a DOM attribute - * - * Getter: - * - * Get the currently set direction of list - * item layout - * - * @memberof FloatListTag - */ - set dir(v: string) { - $(this).attr("dir", v); - this.calibrate(); - } - get dir(): string { - return $(this).attr("dir"); - } /** * Disable the dropdown option in this list @@ -164,9 +140,9 @@ namespace OS { .css("cursor", "default") .css("display", "block") .css("position", "absolute") - .on("mousedown", (evt) => { + .on("pointerdown", (evt) => { const globalof = $(this.refs.mlist).offset(); - evt.preventDefault(); + //evt.preventDefault(); const offset = $(el).offset(); offset.top = evt.clientY - offset.top; offset.left = evt.clientX - offset.left; @@ -184,11 +160,11 @@ namespace OS { }; var mouse_up = function (e: JQuery.MouseEventBase) { - $(window).off("mousemove", mouse_move); - return $(window).off("mouseup", mouse_up); + $(window).off("pointermove", mouse_move); + return $(window).off("pointerup", mouse_up); }; - $(window).on("mousemove", mouse_move); - return $(window).on("mouseup", mouse_up); + $(window).on("pointermove", mouse_move); + return $(window).on("pointerup", mouse_up); }); } diff --git a/src/core/tags/GridViewTag.ts b/src/core/tags/GridViewTag.ts index 753de2c..a2247ac 100644 --- a/src/core/tags/GridViewTag.ts +++ b/src/core/tags/GridViewTag.ts @@ -279,7 +279,7 @@ namespace OS { e: TagEventType ): void => {}; this.selected = false; - $(this).css("display", "block"); + //$(this).css("display", "block"); $(this).on("click",(e) => { let evt = { id: this.aid, data: this }; return this.cellselect(evt, false); @@ -683,6 +683,14 @@ namespace OS { if(element.data.sort) { this.sort(element.data, element.data.sort); + if(element.data.desc) + { + $(element).attr("sort", "desc"); + } + else + { + $(element).attr("sort", "asc"); + } } }; i++; @@ -752,6 +760,10 @@ namespace OS { set rows(rows: GenericObject[][]) { this._rows = rows; if(!rows) return; + for(const el of this._header) + { + $(el.domel).attr("sort", "none"); + } // update existing row with new data const ndrows = rows.length; const ncrows = this.refs.grid.children.length; @@ -839,7 +851,7 @@ namespace OS { return fn.call(context,a, b, index); } this._rows.sort(__fn); - context.__f = ! context.__f; + context.desc = ! context.desc; this.rows = this._rows; } /** diff --git a/src/core/tags/ListViewTag.ts b/src/core/tags/ListViewTag.ts index e6ec059..9e4ebd2 100644 --- a/src/core/tags/ListViewTag.ts +++ b/src/core/tags/ListViewTag.ts @@ -173,6 +173,7 @@ namespace OS { */ protected mount(): void { $(this.refs.item).attr("dataref", "afx-list-item"); + $(this).addClass("afx-list-item"); $(this.refs.item).on("contextmenu", (e) => { this._onctxmenu({ id: this.aid, data: this }); }); @@ -202,14 +203,22 @@ namespace OS { * @memberof ListViewItemTag */ protected layout(): TagLayoutType[] { + let children = [{el: "i", class: "closable", ref: "btcl"}] as TagLayoutType[]; + const itemlayout = this.itemlayout(); + if(Array.isArray(itemlayout)) + { + children = children.concat(itemlayout); + } + else + { + children.unshift(itemlayout); + } + return [ { el: "li", ref: "item", - children: [ - this.itemlayout(), - { el: "i", class: "closable", ref: "btcl" }, - ], + children:children, }, ]; } @@ -240,10 +249,10 @@ namespace OS { * * @protected * @abstract - * @returns {TagLayoutType} + * @returns {TagLayoutType | TagLayoutType[]} * @memberof ListViewItemTag */ - protected abstract itemlayout(): TagLayoutType; + protected abstract itemlayout(): TagLayoutType | TagLayoutType[]; /** * This function is called when the item data is changed. @@ -329,14 +338,101 @@ namespace OS { * List item custom layout definition * * @protected - * @returns {TagLayoutType} + * @returns {TagLayoutType | TagLayoutType[]} * @memberof SimpleListItemTag */ - protected itemlayout(): TagLayoutType { + protected itemlayout(): TagLayoutType | TagLayoutType[] { return { el: "afx-label", ref: "label" }; } } + + /** + * The layout of a double line list item contains two + * AFX labels + * + * @export + * @class DoubleLineListItemTag + * @extends {ListViewItemTag} + */ + export class DoubleLineListItemTag extends ListViewItemTag { + /** + *Creates an instance of DoubleLineListItemTag. + * @memberof DoubleLineListItemTag + */ + constructor() { + super(); + } + + /** + * Reset some property to default + * + * @protected + * @memberof DoubleLineListItemTag + */ + protected init(): void { + this.closable = false; + this.data = {}; + } + + /** + * Do nothing + * + * @protected + * @memberof DoubleLineListItemTag + */ + protected calibrate(): void {} + + /** + * Refresh the inner label when the item data + * is changed + * + * @protected + * @returns {void} + * @memberof DoubleLineListItemTag + */ + protected ondatachange(): void { + const v = this.data; + if (!v) { + return; + } + const line1 = this.refs.line1 as LabelTag; + const line2 = this.refs.line2 as LabelTag; + line1.set(v); + if(v.description) + { + line2.set(v.description); + } + if (v.selected) { + this.selected = v.selected; + } + if (v.closable) { + this.closable = v.closable; + } + } + + /** + * Re-render the list item + * + * @protected + * @memberof DoubleLineListItemTag + */ + protected reload(): void { + this.data = this.data; + } + + /** + * List item custom layout definition + * + * @protected + * @returns {TagLayoutType | TagLayoutType[]} + * @memberof DoubleLineListItemTag + */ + protected itemlayout(): TagLayoutType | TagLayoutType[] { + return [{ el: "afx-label", ref: "line1", class:"title" }, { el: "afx-label", ref: "line2", class:"description" }]; + } + } + /** * This tag defines a traditional or a dropdown list widget. * It contains a collection of list items in which layout @@ -482,10 +578,8 @@ namespace OS { this.dropdown = false; this.selected = -1; this.dragndrop = false; - $(this) - .css("display", "flex") - .css("flex-direction", "column"); this.itemtag = "afx-list-item"; + $(this).addClass("afx-list-view"); } /** @@ -508,7 +602,6 @@ namespace OS { this.attsw(v, "dropdown"); $(this.refs.container).removeAttr("style"); $(this.refs.mlist).removeAttr("style"); - $(this.refs.container).css("flex", 1); $(this).removeClass("dropdown"); const drop = (e: any) => { return this.dropoff(e); @@ -521,14 +614,7 @@ namespace OS { $(this.refs.current).show(); $(document).on("click", drop); $(this.refs.current).on("click", show); - $(this.refs.container) - .css("position", "absolute") - .css("display", "inline-block"); - $(this.refs.mlist) - .css("position", "absolute") - .css("display", "none") - .css("top", "100%") - .css("left", "0"); + $(this.refs.mlist).hide(); this.calibrate(); } else { $(this.refs.current).hide(); @@ -676,7 +762,28 @@ namespace OS { (bt[0] as ButtonTag).set(item); } } - + /** + * Getter: Get list direction: horizontal or vertical (default) + * + * Setter: Get list direction: horizontal or vertical + * + * @type {string} + * @memberof ListViewTag + */ + set dir(v: string) { + if(this.dropdown) + { + $(this).attr("dir", "vertical"); + } + else + { + $(this).attr("dir", v); + } + this.calibrate(); + } + get dir(): string { + return $(this).attr("dir"); + } /** * Getter: Get data of the list * @@ -769,7 +876,13 @@ namespace OS { get selectedItems(): ListViewItemTag[] { return this._selectedItems; } - + /** + * get the selected item index + * + * @readonly + * @type {number} + * @memberof ListViewTag + */ get selected(): number | number[] { if (this.multiselect) { return this.selectedItems.map(function ( @@ -808,7 +921,7 @@ namespace OS { * Add an item to the beginning or end of the list * * @param {GenericObject} item list item data - * @param {boolean} [flag] indicates whether to add the item in the beginning of the list + * @param {boolean} flag indicates whether to add the item in the beginning of the list * @returns {ListViewItemTag} the added list item element * @memberof ListViewTag */ @@ -832,6 +945,7 @@ namespace OS { } el[0].uify(this.observable); const element = el[0] as ListViewItemTag; + $(element).attr("list-id",this.aid); element.onctxmenu = (e) => { return this.iclick(e, true); }; @@ -955,12 +1069,12 @@ namespace OS { /** * This function triggers the double click event on an item * - * @private + * @protected * @param {TagEventType} e tag event object * @returns * @memberof ListViewTag */ - private idbclick(e: TagEventType) { + protected idbclick(e: TagEventType) { const evt: TagEventType = { id: this.aid, data: { item: e.data }, @@ -972,12 +1086,12 @@ namespace OS { /** * This function triggers the list item select event * - * @private + * @protected * @param {TagEventType} e tag event object * @returns * @memberof ListViewTag */ - private iselect(e: TagEventType) { + protected iselect(e: TagEventType) { if (!e.data) { return; } @@ -1167,16 +1281,22 @@ namespace OS { if (!this.dropdown) { return; } - const desktoph = $(Ant.OS.GUI.workspace).height(); + if(! $(this.refs.mlist).is(":hidden")) + { + $(this.refs.mlist).hide(); + return; + } + + const desktoph = $(Ant.OS.GUI.workspace).outerHeight(); const offset = - $(this).offset().top + $(this.refs.mlist).height(); + $(this).offset().top + $(this.refs.mlist).outerHeight()*1.5; if (offset > desktoph) { $(this.refs.mlist).css( "top", `-${$(this.refs.mlist).outerHeight()}px` ); } else { - $(this.refs.mlist).css("top", "100%"); + $(this.refs.mlist).css("top", "98%"); } $(this.refs.mlist).show(); } @@ -1208,7 +1328,9 @@ namespace OS { return; } const w = `${$(this).width()}px`; + const h = `${$(this).outerHeight()}px`; $(this.refs.container).css("width", w); + $(this.refs.container).css("height", h); $(this.refs.current).css("width", w); $(this.refs.mlist).css("width", w); } @@ -1244,6 +1366,7 @@ namespace OS { define("afx-list-view", ListViewTag); define("afx-list-item", SimpleListItemTag); + define("afx-dbline-list-item", DoubleLineListItemTag); } } } diff --git a/src/core/tags/NSpinnerTag.ts b/src/core/tags/NSpinnerTag.ts index 65acc4e..58040dd 100644 --- a/src/core/tags/NSpinnerTag.ts +++ b/src/core/tags/NSpinnerTag.ts @@ -114,38 +114,6 @@ namespace OS { * @memberof NSpinnerTag */ calibrate(): void { - $(this.refs.holder).css( - "width", - $(this).width() - 20 + "px" - ); - $(this.refs.holder).css("height", $(this).height() + "px"); - $(this.refs.spinner) - .css("width", "20px") - .css("height", $(this).height() + "px"); - $(this.refs.incr) - .css("height", $(this).height() / 2 - 2 + "px") - .css("position", "relative"); - $(this.refs.decr) - .css("height", $(this).height() / 2 - 2 + "px") - .css("position", "relative"); - $(this.refs.spinner) - .find("li") - .css("display", "block") - .css("text-align", "center") - .css("vertical-align", "middle"); - $(this.refs.spinner) - .find("i") - .css("font-size", "16px") - .css("position", "absolute"); - const fn = function (ie: HTMLElement, pos: string) { - const el = $(ie).find("i"); - el.css( - pos, - ($(ie).height() - el.height()) / 2 + "px" - ).css("left", ($(ie).width() - el.width()) / 2 + "px"); - }; - fn(this.refs.decr, "bottom"); - fn(this.refs.incr, "top"); } /** diff --git a/src/core/tags/OverlayTag.ts b/src/core/tags/OverlayTag.ts index 21e82e6..4fd4fb7 100644 --- a/src/core/tags/OverlayTag.ts +++ b/src/core/tags/OverlayTag.ts @@ -127,7 +127,9 @@ namespace OS { * @memberof OverlayTag */ calibrate(): void { - $(this).css("width", this.width).css("height", this.height); + $(this) + .css("width", this.width) + .css("height", this.height); return this.observable.trigger("resize", { id: this.aid, data: { diff --git a/src/core/tags/ResizerTag.ts b/src/core/tags/ResizerTag.ts index 5a63ae1..c50a8f1 100644 --- a/src/core/tags/ResizerTag.ts +++ b/src/core/tags/ResizerTag.ts @@ -104,7 +104,7 @@ namespace OS { set dir(v: string) { let att: string; $(this).attr("dir", v); - $(this).off("mousedown", null); + $(this).off("pointerdown", null); if (v === "hz") { $(this).css("cursor", "col-resize"); $(this).addClass("horizontal"); @@ -208,24 +208,24 @@ namespace OS { if (!this.dir || this.dir == "none") { return; } - $(this).on("mousedown", (e) => { + $(this).on("pointerdown", (e) => { e.preventDefault(); - $(window).on("mousemove", (evt) => { + $(window).on("pointermove", (evt) => { if (!this._resizable_el) { return; } if (this.dir === "hz") { - return this.horizontalResize(evt); + return this.horizontalResize(evt as JQuery.MouseEventBase); } else if (this.dir === "ve") { - return this.verticalResize(evt); + return this.verticalResize(evt as JQuery.MouseEventBase); } }); - return $(window).on("mouseup", function (evt) { - $(window).off("mousemove", null); - $(window).off("mouseup", null); + return $(window).on("pointerup", function (evt) { + $(window).off("pointermove", null); + $(window).off("pointerup", null); - return $(window).off("mouseup", null); + return $(window).off("pointerup", null); }); }); } diff --git a/src/core/tags/SliderTag.ts b/src/core/tags/SliderTag.ts index ebc3354..d3cbc06 100644 --- a/src/core/tags/SliderTag.ts +++ b/src/core/tags/SliderTag.ts @@ -65,6 +65,7 @@ namespace OS { this.enable = true; this._max = 100; this._value = 0; + this.precision = false; this._onchange = this._onchanging = () => {}; } @@ -98,7 +99,17 @@ namespace OS { set onvaluechanging(f: TagEventCallback) { this._onchanging = f; } - + /** + * Setter/Getter: set and get precision reading + * + * @memberof SliderTag + */ + set precision(v: boolean) { + this.attsw(v, "precision"); + } + get precision(): boolean { + return this.hasattr("precision"); + } /** * Setter: Enable/disable the slider * @@ -110,15 +121,15 @@ namespace OS { this.attsw(v, "enable"); if (v) { $(this) - .on("mouseover",() => { + .on("pointerover",() => { return $(this.refs.point).show(); }) - .on("mouseout",() => { + .on("pointerout",() => { return $(this.refs.point).hide(); }); } else { $(this.refs.point).hide(); - $(this).off("mouseover").off("mouseout"); + $(this).off("pointerover").off("pointerout"); } } get enable(): boolean { @@ -188,7 +199,16 @@ namespace OS { */ calibrate(): void { if (this.value > this.max) { - this.value = this.max; + this._value = this.max; + } + if(! this.precision) + { + this._value = Math.round(this.value); + $(this.refs.point).text(this.value); + } + else + { + $(this.refs.point).text((Math.round(this.value * 100) / 100).toFixed(2)); } $(this.refs.container).css("width", $(this).width() + "px"); const w = @@ -197,17 +217,17 @@ namespace OS { $(this.refs.prg) .css("width", w + "px") .css("height", $(this.refs.container).height() + "px"); - if (this.enable) { - const ow = w - $(this.refs.point).width() / 2; - const top = Math.floor( - ($(this.refs.prg).height() - - $(this.refs.point).height()) / - 2 - ); - $(this.refs.point) - .css("left", ow + "px") - .css("top", top + "px"); - } + //if (this.enable) { + const ow = w - ($(this.refs.point).outerWidth() / 2.0); + const top = Math.floor( + ($(this.refs.prg).height() + + $(this.refs.point).height()) / + 2 + 3 + ); + $(this.refs.point) + .css("left", ow + "px") + .css("bottom", top + "px"); + //} } /** @@ -220,10 +240,10 @@ namespace OS { $(this.refs.point) .css("user-select", "none") .css("cursor", "default"); - $(this.refs.point).on("mousedown", (e) => { + $(this).on("pointerdown", (e) => { e.preventDefault(); const offset = $(this.refs.container).offset(); - $(window).on("mousemove", (e) => { + $(window).on("pointermove", (e) => { let left = e.clientX - offset.left; left = left < 0 ? 0 : left; const maxw = $(this.refs.container).width(); @@ -236,13 +256,13 @@ namespace OS { }); }); - $(window).on("mouseup", (e) => { + $(window).on("pointerup", (e) => { this._onchange({ id: this.aid, data: this.value, }); - $(window).off("mousemove", null); - return $(window).off("mouseup", null); + $(window).off("pointermove", null); + return $(window).off("pointerup", null); }); }); } diff --git a/src/core/tags/StackMenuTag.ts b/src/core/tags/StackMenuTag.ts new file mode 100644 index 0000000..cbb2baa --- /dev/null +++ b/src/core/tags/StackMenuTag.ts @@ -0,0 +1,553 @@ +namespace OS { + export namespace GUI { + export namespace tag { + /** + * menu event data type definition + */ + export type StackMenuEventData = TagEventDataType; + /** + * The layout of a simple stack menu item + * + * @export + * @class SimpleStackMenuItemTag + * @extends {ListViewItemTag} + */ + export class SimpleStackMenuItemTag extends ListViewItemTag { + /** + *Creates an instance of SimpleStackMenuItemTag. + * @memberof SimpleStackMenuItemTag + */ + constructor() { + super(); + } + + /** + * Reset some property to default + * + * @protected + * @memberof SimpleStackMenuItemTag + */ + protected init(): void { + this.closable = false; + this.data = {}; + this.switch = false; + this.radio = false; + this.checked = false; + } + /** + * Mount the current tag + * + * @protected + * @memberof SimpleStackMenuItemTag + */ + protected mount(): void { + super.mount(); + (this.refs.switch as SwitchTag).enable = false; + } + /** + * Setter: Turn on/off the checker feature of the menu entry + * + * Getter: Check whether the checker feature is enabled on this menu entry + * + * @memberof SimpleStackMenuItemTag + */ + set switch(v: boolean) { + this.attsw(v, "switch"); + if (this.radio || v) { + $(this.refs.switch).show(); + } else { + $(this.refs.switch).hide(); + } + } + get switch(): boolean { + return this.hasattr("switch"); + } + + /** + * Setter: select/unselect the current item + * + * Getter: Check whether the current item is selected + * + * @memberof SimpleStackMenuItemTag + */ + set selected(v: boolean) { + + if(v) + { + if (this.switch) { + this.checked = !this.checked; + } else if (this.radio) { + // reset radio + const p = this.parentElement; + if (p) { + for(let item of Array.from(p.children)) + { + const el = item as SimpleStackMenuItemTag; + if(el.radio) + { + el.checked = false; + } + } + } + this.checked = !this.checked; + } + } + super.selected = v; + } + get selected(): boolean { + return this.hasattr("selected"); + } + + /** + * Setter: Turn on/off the radio feature of the menu entry + * + * Getter: Check whether the radio feature is enabled + * + * @memberof SimpleStackMenuItemTag + */ + set radio(v: boolean) { + this.attsw(v, "radio"); + if (this.switch || v) { + $(this.refs.switch).show(); + } else { + $(this.refs.switch).hide(); + } + } + get radio(): boolean { + return this.hasattr("radio"); + } + + /** + * Setter: + * + * Toggle the switch on the menu entry, this setter + * only works when the `checker` or `radio` feature is + * enabled + * + * Getter: + * + * Check whether the switch is turned on + * + * @memberof SimpleStackMenuItemTag + */ + set checked(v: boolean) { + this.attsw(v, "checked"); + if (this.data) this.data.checked = v; + if (!this.radio && !this.switch) { + return; + } + (this.refs.switch as SwitchTag).swon = v; + } + get checked(): boolean { + return this.hasattr("checked"); + } + /** + * Set the keyboard shortcut text + * + * @memberof SimpleStackMenuItemTag + */ + set shortcut(v: string) { + $(this.refs.shortcut).hide(); + if (!v) { + return; + } + $(this.refs.shortcut).show(); + $(this.refs.shortcut).text(v); + } + /** + * Do nothing + * + * @protected + * @memberof SimpleStackMenuItemTag + */ + protected calibrate(): void { + } + + /** + * Refresh the inner label when the item data + * is changed + * + * @protected + * @returns {void} + * @memberof SimpleStackMenuItemTag + */ + protected ondatachange(): void { + const v = this.data; + if (!v) { + return; + } + if(v.nodes && v.nodes.length > 0) + { + $(this.refs.submenu).show(); + } + else + { + $(this.refs.submenu).hide(); + } + const label = this.refs.label as LabelTag; + this.set(v); + label.set(v); + if (v.selected) { + this.selected = v.selected; + } + } + + /** + * Re-render the list item + * + * @protected + * @memberof SimpleStackMenuItemTag + */ + protected reload(): void { + this.data = this.data; + } + + /** + * List item custom layout definition + * + * @protected + * @returns {TagLayoutType} + * @memberof SimpleStackMenuItemTag + */ + protected itemlayout(): TagLayoutType { + return { + el:"div", + children: [ + { el: "afx-switch", ref: "switch" }, + { el: "afx-label", ref: "label" }, + { el: "span", class: "shortcut", ref: "shortcut" }, + { el: "span", class: "afx-submenu", ref: "submenu" }, + ] + }; + } + } + /** + * A stack menu is a multilevel menu that + * uses a single list view to navigate all menu levels + * instead of using a traditional cascade style menu + * + * @export + * @class StackMenuTag + * @extends {AFXTag} + */ + export class StackMenuTag extends AFXTag { + /** + * Data stack, the list always displays the + * element on the top of the stack + * + * @type {GenericObject[][]} + * @memberof StackMenuTag + */ + private stack: GenericObject[][]; + /** + * Update the current tag, do nothing + * + * @protected + * @param {*} [d] + * @memberof StackMenuTag + */ + protected reload(d?: any): void {} + /** + * Placeholder of tab select event handle + * + * @private + * @type {TagEventCallback} + * @memberof StackMenuTag + */ + private _onmenuselect: TagEventCallback; + /** + * Stack menu constructor + * + * @memberof StackMenuTag + */ + constructor() { + super(); + } + /** + * Reset to default some property value + * + * @protected + * @memberof StackMenuTag + */ + protected init(): void { + this.stack = []; + this._onmenuselect = (_) => {}; + this.context = false; + } + + /** + * Recalcutate the menu coordinate in case of + * context menu + * + * @protected + * @memberof StackMenuTag + */ + protected calibrate(): void { + if(this.context) + { + const offset = $(this).position(); + let left = offset.left; + let top = offset.top; + const ph = $(this).parent().height(); + const pw = $(this).parent().width(); + + const dy = top + $(this).height() - ph; + const dx = left + $(this).width() - pw; + if(dx < 0 && dy < 0) + { + return; + } + top -= dy > 0?dy:0; + left -= dx > 0?dx:0; + $(this) + .css("top", top + "px") + .css("left", left + "px"); + } + } + + /** + * Reset the menu to its initial state + * + * @memberof StackMenuTag + */ + reset(): void { + const btn = this.refs.title as ButtonTag; + const list = this.refs.list as ListViewTag; + list.selected = -1; + btn.data = undefined; + if(this.stack.length > 0) + { + let arr = this.stack[0]; + this.stack = []; + list.data = arr[1] as any; + $(btn).hide(); + } + } + + /** + * Mount the tab bar and bind some basic events + * + * @protected + * @memberof StackMenuTag + */ + protected mount(): void { + const btn = this.refs.title as ButtonTag; + const list = this.refs.list as ListViewTag; + list.itemtag = "afx-stack-menu-item"; + btn.onbtclick = (_) => { + let arr = this.stack.pop(); + if(this.stack.length == 0) + { + $(btn).hide(); + btn.data = undefined; + } + else + { + btn.data = arr[0]; + btn.iconclass = "bi bi-backspace"; + } + list.data = arr[1] as any; + }; + list.onlistselect = (e) => { + let data = e.data.item.data; + e.id = this.aid; + if(btn.data && btn.data.onchildselect) + { + btn.data.onchildselect(e); + } + if(data.onmenuselect) + { + data.onmenuselect(e); + } + this._onmenuselect(e); + this.observable.trigger("menuselect", e); + if(data.nodes && data.nodes.length > 0) + { + this.stack.push([btn.data, list.data]); + btn.data = data; + btn.iconclass = "bi bi-backspace"; + $(btn).show(); + list.selected = -1; + list.data = data.nodes; + if(this.context) + { + this.calibrate(); + } + } else if (this.context) { + $(this).hide(); + } + }; + } + /** + * Setter: set current selected item index + * + * Getter: Get current selected item index + * + * @memberof StackMenuTag + */ + set selected(i: number | number[]) + { + const list = this.refs.list as ListViewTag; + list.selected = i; + } + get selected(): number | number[] + { + const list = this.refs.list as ListViewTag; + return list.selected; + } + + /** + * Setter: Set whether the current menu is a context menu + * + * Getter: Check whether the current menu is a context menu + * + * @memberof StackMenuTag + */ + set context(v: boolean) { + this.attsw(v, "context"); + $(this).removeClass("context"); + if (!v) { + return; + } + $(this).addClass("context"); + $(this).hide(); + } + get context(): boolean { + return this.hasattr("context"); + } + + /** + * Get the latest selected item + * + * @readonly + * @type {ListViewItemTag} + * @memberof StackMenuTag + */ + get selectedItem(): ListViewItemTag { + const list = this.refs.list as ListViewTag; + return list.selectedItem; + } + + /** + * Get all the selected items + * + * @readonly + * @type {ListViewItemTag[]} + * @memberof StackMenuTag + */ + get selectedItems(): ListViewItemTag[] { + const list = this.refs.list as ListViewTag; + return list.selectedItems; + } + + /** + * The following setter/getter are keep for backward compatible + * with the MenuTag interface + * + * Setter: Set the menu data + * + * Getter: Get the menu data + * + * @deprecated + * @memberof StackMenuTag + */ + set items(v: GenericObject[]) { + this.nodes = v; + } + get items(): GenericObject[] { + return this.nodes; + } + + /** + * Setter: Set the menu data + * + * Getter: Get the menu data + * + * @memberof StackMenuTag + */ + set nodes(v: GenericObject[]) { + this.stack = []; + this.reset(); + (this.refs.list as ListViewTag).data = v; + $(this.refs.title).hide(); + } + get nodes(): GenericObject[] { + return (this.refs.list as ListViewTag).data; + } + /** + * Set the `menu entry select` event handle + * + * @memberof StackMenuTag + */ + set onmenuselect(v: TagEventCallback) { + this._onmenuselect = v; + } + + /** + * Show the current menu. This function is called + * only if the current menu is a context menu + * + * @param {JQuery.MouseEventBase} e JQuery mouse event + * @returns {void} + * @memberof StackMenuTag + */ + show(e?: JQuery.MouseEventBase): void { + const list = this.refs.list as ListViewTag; + const btn = this.refs.title as ButtonTag; + if (!this.context) { + return; + } + if(e) + { + const offset = $(this).parent().offset(); + let top = e.clientY - offset.top - 15; + let left = e.clientX - offset.left - 5; + + $(this) + .css("top", top + "px") + .css("left", left + "px"); + + } + const doropoff = (e) => { + if($(e.target).closest(`[list-id="${list.aid}"]`).length > 0) + { + return; + } + if($(e.target).closest(btn).length > 0) + { + return; + } + $(this).hide(); + $(document).off("click", doropoff); + }; + $(document).on("click", doropoff); + $(this).show(); + this.calibrate(); + } + + /** + * TabBar layout definition + * + * @protected + * @returns {TagLayoutType[]} + * @memberof StackMenuTag + */ + protected layout(): TagLayoutType[] { + return [ + + { + el: "afx-button", + ref: "title" + }, + { + el: "afx-list-view", + ref: "list", + } + ]; + } + } + define("afx-stack-menu", StackMenuTag); + define("afx-stack-menu-item", SimpleStackMenuItemTag); + } + } +} \ No newline at end of file diff --git a/src/core/tags/SystemPanelTag.ts b/src/core/tags/SystemPanelTag.ts index a3caff3..5c51aae 100644 --- a/src/core/tags/SystemPanelTag.ts +++ b/src/core/tags/SystemPanelTag.ts @@ -142,21 +142,21 @@ namespace OS { */ private search(e: JQuery.KeyboardEventBase): void { const applist = this.refs.applist as ListViewTag; - const catlist = this.refs.catlist as ListViewTag; + const catlist = this.refs.catlist as TabBarTag; switch (e.which) { case 27: // escape key return this.toggle(false); case 37: - return e.preventDefault(); - case 38: applist.selectPrev(); return e.preventDefault(); + case 38: + return e.preventDefault(); case 39: + applist.selectNext(); return e.preventDefault(); case 40: - applist.selectNext(); return e.preventDefault(); case 13: e.preventDefault(); @@ -216,10 +216,9 @@ namespace OS { class: "afx-panel-os-pinned-app", }, { - el: "afx-menu", - id: "appmenu", - ref: "appmenu", - class: "afx-panel-os-app", + el: "afx-apps-dock", + ref: "sysdock", + id: "sysdock" }, { el: "afx-menu", @@ -247,17 +246,13 @@ namespace OS { ], }, { - el: "afx-hbox", + el: "afx-vbox", children: [ { - el: "afx-list-view", + el: "afx-tab-bar", id: "catlist", ref: "catlist", - width:"40%" - }, - { - el: "afx-resizer", - width: 3, + height:45 }, { el: "afx-list-view", @@ -269,7 +264,7 @@ namespace OS { { el: "afx-hbox", id: "btlist", - height: 30, + height: 40, children: [ { el: "afx-button", @@ -293,6 +288,7 @@ namespace OS { }, ], }, + ]; } @@ -304,7 +300,7 @@ namespace OS { * @memberof SystemPanelTag */ private refreshAppList(): void { - let catlist_el = (this.refs.catlist as tag.ListViewTag); + let catlist_el = (this.refs.catlist as tag.TabBarTag); let k: string, v: API.PackageMetaType; const catlist = new Set(); this.app_list = []; @@ -349,7 +345,7 @@ namespace OS { iconclass: "bi bi-gear-wide" }); }); - catlist_el.data = cat_list_data; + catlist_el.items = cat_list_data; catlist_el.selected = 0; } @@ -369,7 +365,7 @@ namespace OS { this.calibrate(); $(document).on("click", this._cb); (this.refs.search as HTMLInputElement).value = ""; - $(this.refs.search).trigger("focus"); + $(this.refs.search).focus(); } else { $(this.refs.overlay).hide(); $(document).off("click", this._cb); @@ -445,11 +441,8 @@ namespace OS { !$(e.target).closest(this.refs.osmenu).length ) { return this.toggle(false); - } else { - return $(this.refs.search).trigger("focus"); } }; - $(this.refs.appmenu).css("z-index", 1000000); $(this.refs.systray).css("z-index", 1000000); (this.refs.btscreen as ButtonTag).set({ iconclass: "fa fa-tv", @@ -476,7 +469,14 @@ namespace OS { }, }); (this.refs.osmenu as MenuTag).onmenuselect = (e) => { - return this.toggle(true); + if($(this.refs.overlay).is(":hidden")) + { + this.toggle(true); + } + else + { + this.toggle(false); + } }; $(this.refs.search).on("keyup", (e) => { @@ -493,8 +493,8 @@ namespace OS { return this.toggle(false); } }); - const catlist = (this.refs.catlist as tag.ListViewTag); - catlist.onlistselect = (e) => { + const catlist = (this.refs.catlist as tag.TabBarTag); + catlist.ontabselect = (e) => { const applist = (this.refs.applist as ListViewTag); if(catlist.selected === 0) { @@ -510,9 +510,6 @@ namespace OS { applist.selected = -1; }; $(this.refs.overlay) - .css("left", 0) - .css("top", `${$(this.refs.panel).height()}px`) - .css("bottom", "0") .hide(); (this.refs.pinned as GUI.tag.MenuTag).onmenuselect = (e) => { const app = e.data.item.data.app; @@ -520,7 +517,6 @@ namespace OS { return; GUI.launch(app, []); }; - this.refs.appmenu.contextmenuHandle = (e, m) => { } this.refs.osmenu.contextmenuHandle = (e, m) => { } this.refs.systray.contextmenuHandle = (e, m) => { } this.refs.pinned.contextmenuHandle = (e, m) => { } @@ -528,18 +524,16 @@ namespace OS { let menu = [ { text: __("Applications and services setting"), dataid: "app&srv" } ]; - m.items = menu; - m.onmenuselect = function ( - evt: TagEventType - ) { + m.nodes = menu; + m.onmenuselect = (evt) => { GUI.launch("Setting",[]); } m.show(e); }; - announcer.observable.on("app-pinned", (_) => { + announcer.on("app-pinned", (_) => { this.RefreshPinnedApp(); }); - announcer.observable.on("loading", (o: API.AnnouncementDataType) => { + announcer.on("loading", (o: API.AnnouncementDataType) => { if(o.u_data != 0) { return; @@ -550,7 +544,7 @@ namespace OS { $(GUI.workspace).css("cursor", "wait"); }); - announcer.observable.on("loaded", (o: API.AnnouncementDataType) => { + announcer.on("loaded", (o: API.AnnouncementDataType) => { const i = this._pending_task.indexOf(o.id); if (i >= 0) { this._pending_task.splice(i, 1); @@ -561,6 +555,9 @@ namespace OS { this._loading_toh = setTimeout(() => this.animation_check(),1000); } }); + announcer.on("desktopresize", (e) => { + this.calibrate(); + }); this.RefreshPinnedApp(); Ant.OS.announcer.trigger("syspanelloaded", undefined); } diff --git a/src/core/tags/TabBarTag.ts b/src/core/tags/TabBarTag.ts index b18d463..e4579bb 100644 --- a/src/core/tags/TabBarTag.ts +++ b/src/core/tags/TabBarTag.ts @@ -39,6 +39,13 @@ namespace OS { */ private _ontabselect: TagEventCallback; + /** + * Cache of touch event + * + * @private + * @meberof TabBarTag + */ + private _previous_touch: {x: number, y: number}; /** *Creates an instance of TabBarTag. * @memberof TabBarTag @@ -57,6 +64,8 @@ namespace OS { */ protected init(): void { this.selected = -1; + this.dir = "horizontal"; + this._previous_touch = {x: 0, y:0}; } /** @@ -82,6 +91,30 @@ namespace OS { return this.hasattr("closable"); } + /** + * Setter: + * + * Set the tab bar direction: + * - `horizontal`: horizontal direction + * - `vertical`: vertical direction + * + * Getter: + * + * Get the tab bar direction + * + * @memberof TabBarTag + */ + set dir(v: string) { + $(this).attr("dir", v); + if (!v) { + return; + } + (this.refs.list as ListViewTag).dir = v; + } + get dir(): string { + return $(this).attr("dir") as any; + } + /** * Add a tab in the end of the tab bar * @@ -144,6 +177,16 @@ namespace OS { get selected(): number | number[] { return (this.refs.list as ListViewTag).selected; } + /** + * Get the latest selected item + * + * @readonly + * @type {ListViewItemTag} + * @memberof TabBarTag + */ + get selectedItem(): ListViewItemTag { + return (this.refs.list as ListViewTag).selectedItem; + } /** * Set the tab close event handle @@ -179,6 +222,39 @@ namespace OS { this._ontabselect(e); return this.observable.trigger("tabselect", e); }; + + const list_container = $(".list-container", this.refs.list); + list_container.each((i,el) => { + $(el).on("touchstart", e => { + this._previous_touch.x = e.touches[0].pageX; + this._previous_touch.y = e.touches[0].pageY; + }); + $(el).on("touchmove", e => { + const offset = {x:0, y:0}; + offset.x = this._previous_touch.x - e.touches[0].pageX ; + offset.y = this._previous_touch.y - e.touches[0].pageY; + if(this.dir == "horizontal") + { + el.scrollLeft += offset.x; + } + else + { + el.scrollTop += offset.y; + } + this._previous_touch.x = e.touches[0].pageX; + this._previous_touch.y = e.touches[0].pageY; + }); + $(el).on("wheel", (evt)=>{ + if(this.dir == "horizontal") + { + el.scrollLeft += (evt.originalEvent as WheelEvent).deltaY; + } + else + { + el.scrollTop += (evt.originalEvent as WheelEvent).deltaY; + } + }); + }); } /** diff --git a/src/core/tags/TabContainerTag.ts b/src/core/tags/TabContainerTag.ts index fdc33d4..03a9e85 100644 --- a/src/core/tags/TabContainerTag.ts +++ b/src/core/tags/TabContainerTag.ts @@ -129,6 +129,14 @@ namespace OS { return; } (this.refs.wrapper as TileLayoutTag).dir = v; + if(v === "row") + { + (this.refs.bar as TabBarTag).dir = "vertical"; + } + else + { + (this.refs.bar as TabBarTag).dir = "horizontal"; + } } get dir(): "row" | "column" { return $(this).attr("dir") as any; @@ -175,7 +183,7 @@ namespace OS { return; } $(this.refs.bar).attr("data-width", `${v}`); - (this.refs.wrapper as TileLayoutTag).calibrate(); + this.observable.trigger("resize", undefined); } /** @@ -185,8 +193,11 @@ namespace OS { * @memberof TabContainerTag */ set tabbarheight(v: number) { + if (!v) { + return; + } $(this.refs.bar).attr("data-height", `${v}`); - (this.refs.wrapper as TileLayoutTag).calibrate(); + this.observable.trigger("resize", undefined); } /** diff --git a/src/core/tags/TileLayoutTags.ts b/src/core/tags/TileLayoutTags.ts index c4b1431..3adb130 100644 --- a/src/core/tags/TileLayoutTags.ts +++ b/src/core/tags/TileLayoutTags.ts @@ -128,9 +128,7 @@ namespace OS { private hcalibrate(): void { const auto_width = []; let ocwidth = 0; - const avaiheight = $(this).height(); const avaiWidth = $(this).width(); - //$(this.refs.yield).css("height", `${avaiheight}px`); $(this.refs.yield) .children() .each(function (e) { @@ -160,10 +158,6 @@ namespace OS { $(v).css("width", `${csize}px`) ); } - return this.observable.trigger("hboxchange", { - id: this.aid, - data: { w: avaiWidth, h: avaiheight }, - }); } /** @@ -178,8 +172,6 @@ namespace OS { const auto_height = []; let ocheight = 0; const avaiheight = $(this).height(); - const avaiwidth = $(this).width(); - //$(this.refs.yield).css("height", `${avaiheight}px`); $(this.refs.yield) .children() .each(function (e) { @@ -209,11 +201,6 @@ namespace OS { $(v).css("height", `${csize}px`) ); } - - return this.observable.trigger("vboxchange", { - id: this.aid, - data: { w: avaiwidth, h: avaiheight }, - }); } /** diff --git a/src/core/tags/TreeViewTag.ts b/src/core/tags/TreeViewTag.ts index 7d7d852..43d3083 100644 --- a/src/core/tags/TreeViewTag.ts +++ b/src/core/tags/TreeViewTag.ts @@ -380,7 +380,7 @@ namespace OS { .css("flex-direction", "row") .css("align-items", "center") .css("white-space", "nowrap"); - $(this.refs.itemholder).css("display", "inline-block"); + //$(this.refs.itemholder).css("display", "inline-block"); $(this.refs.wrapper).on("click",(e) => { this.selected = true; }); @@ -390,7 +390,7 @@ namespace OS { }); $(this.refs.toggle) - .css("display", "inline-block") + //.css("display", "inline-block") .css("width", "15px") .css("flex-shrink", 0) .addClass("afx-tree-view-item") diff --git a/src/core/tags/WindowTag.ts b/src/core/tags/WindowTag.ts index 411f0f8..71ee01d 100644 --- a/src/core/tags/WindowTag.ts +++ b/src/core/tags/WindowTag.ts @@ -63,6 +63,14 @@ namespace OS { */ private _history: GenericObject; + /** + * This placeholder store the callback for the menu open event + * + * @private + * @type {(el: StackMenuTag) => void} + * @memberof WindowTag + */ + private _onmenuopen: (el: StackMenuTag) => void; /** * This placeholder stores the offset of the virtual desktop element * @@ -79,7 +87,7 @@ namespace OS { constructor() { super(); } - + /** * blur overlay: If active the window overlay will be shown * on inactive (blur event) @@ -96,7 +104,15 @@ namespace OS { get blur_overlay(): boolean { return this.hasattr("blur-overlay"); } - + /** + * Setter: set menu open event handler + * + * @memberof WindowTag + */ + set onmenuopen(f: (el: StackMenuTag) => void) + { + this._onmenuopen = f; + } /** * Init window tag * - `shown`: false @@ -117,6 +133,7 @@ namespace OS { this.minimizable = true; this.resizable = true; this.apptitle = "Untitled"; + this._onmenuopen = undefined; } /** @@ -174,6 +191,24 @@ namespace OS { get height(): number { return this._height; } + + /** + * Set the application menu content + * + * @memberof WindowTag + */ + set menu(v: GenericObject[]) + { + if(!v || v.length == 0) + { + $(this.refs.btnMenu).hide(); + } + else + { + (this.refs.stackmenu as StackMenuTag).nodes = v; + $(this.refs.btnMenu).show(); + } + } /** * Setter: enable/disable window minimizable @@ -262,22 +297,56 @@ namespace OS { * @memberof WindowTag */ protected mount(): void { + const btn_menu = (this.refs.btnMenu as ButtonTag); + const min_btn = (this.refs["minbt"] as ButtonTag); + const max_btn = (this.refs["maxbt"] as ButtonTag); + const close_btn = (this.refs["closebt"] as ButtonTag); + const stackmenu = (this.refs.stackmenu as StackMenuTag); + stackmenu.context = true; + btn_menu.iconclass = "bi bi-list"; + min_btn.iconclass = "bi bi-dash"; + max_btn.iconclass = "bi bi-stop"; + close_btn.iconclass = "bi bi-x"; this.contextmenuHandle = function (e) { }; - $(this.refs["minbt"]).on("click", (e) => { + min_btn.onbtclick =(_) => { return this.observable.trigger("hide", { id: this.aid, }); - }); - - $(this.refs["maxbt"]).on("click", (e) => { + }; + btn_menu.onbtclick = (e) => { + e.data.stopPropagation(); + if($(stackmenu).is(":hidden")) + { + if(this._onmenuopen) + { + this._onmenuopen(stackmenu); + } + else + { + stackmenu.reset(); + } + stackmenu.show(); + } + else + { + $(stackmenu).hide(); + } + }; + max_btn.onbtclick = (_) => { return this.toggle_window(); - }); + }; - $(this.refs["closebt"]).on("click", (e) => { + close_btn.onbtclick = (_) => { return this.observable.trigger("exit", { id: this.aid, }); - }); + }; + stackmenu.onmenuselect = (e) => { + if(!e.data.item.data.nodes) + { + stackmenu.selected = -1; + } + } const left = ($(this.desktop).width() - this.width) / 2; const top = ($(this.desktop).height() - this.height) / 2; $(this) @@ -285,7 +354,7 @@ namespace OS { .css("left", `${left}px`) .css("top", `${top}px`) .css("z-index", 10); - $(this).on("mousedown", (e) => { + $(this).on("pointerdown", (e) => { if (this._shown) { return; } @@ -293,7 +362,6 @@ namespace OS { id: this.aid, }); }); - //$(this.refs.win_overlay).css("background-color", "red"); $(this.refs["dragger"]).on("dblclick", (e) => { return this.toggle_window(); }); @@ -347,7 +415,26 @@ namespace OS { h: this.height, }); $(this).attr("tabindex", 0).css("outline", "none"); - return this.observable.trigger("rendered", { + if(OS.mobile) + { + this.toggle_window(); + //this.minimizable = false; + this.resizable = false; + } + this.observable.on("desktopresize", (e) => { + if(this._isMaxi) + { + this._isMaxi = false; + this.toggle_window(true); + } + /*else + { + const w = this.width > e.data.width ? e.data.width: this.width; + const h = this.height > e.data.height ? e.data.height: this.height; + this.setsize({ w: w, h: h }); + }*/ + }); + this.observable.trigger("rendered", { id: this.aid, }); } @@ -384,12 +471,12 @@ namespace OS { $(this.refs["dragger"]) .css("user-select", "none") .css("cursor", "default"); - $(this.refs["dragger"]).on("mousedown", (e) => { - e.preventDefault(); + $(this.refs.dragger).on("pointerdown", (e) => { + //e.preventDefault(); const offset = $(this).offset(); offset.top = e.clientY - offset.top; offset.left = e.clientX - offset.left; - $(window).on("mousemove", (e) => { + $(window).on("pointermove", (e) => { $(this.refs.win_overlay).show(); let left: number, top: number; if (this._isMaxi) { @@ -415,10 +502,10 @@ namespace OS { .css("top", `${top}px`) .css("left", `${left}px`); }); - return $(window).on("mouseup", (e) => { + return $(window).on("pointerup", (e) => { $(this.refs.win_overlay).hide(); - $(window).off("mousemove", null); - return $(window).off("mouseup", null); + $(window).off("pointermove", null); + return $(window).off("pointerup", null); }); }); } @@ -452,32 +539,32 @@ namespace OS { } const mouse_up_hdl = (e) => { $(this.refs.win_overlay).hide(); - $(window).off("mousemove", mouse_move_hdl); - return $(window).off("mouseup", mouse_up_hdl); + $(window).off("pointermove", mouse_move_hdl); + return $(window).off("pointerup", mouse_up_hdl); } - $(this.refs["grip"]).on("mousedown", (e) => { + $(this.refs["grip"]).on("pointerdown", (e) => { e.preventDefault(); offset.top = e.clientY; offset.left = e.clientX; target = this.refs.grip; - $(window).on("mousemove", mouse_move_hdl); - $(window).on("mouseup", mouse_up_hdl); + $(window).on("pointermove", mouse_move_hdl); + $(window).on("pointerup", mouse_up_hdl); }); - $(this.refs.grip_bottom).on("mousedown", (e) => { + $(this.refs.grip_bottom).on("pointerdown", (e) => { e.preventDefault(); offset.top = e.clientY; offset.left = e.clientX; target = this.refs.grip_bottom; - $(window).on("mousemove", mouse_move_hdl); - $(window).on("mouseup", mouse_up_hdl); + $(window).on("pointermove", mouse_move_hdl); + $(window).on("pointerup", mouse_up_hdl); }); - $(this.refs.grip_right).on("mousedown", (e) => { + $(this.refs.grip_right).on("pointerdown", (e) => { e.preventDefault(); offset.top = e.clientY; offset.left = e.clientX; target = this.refs.grip_right; - $(window).on("mousemove", mouse_move_hdl); - $(window).on("mouseup", mouse_up_hdl); + $(window).on("pointermove", mouse_move_hdl); + $(window).on("pointerup", mouse_up_hdl); }); } /** @@ -488,9 +575,9 @@ namespace OS { * @returns {void} * @memberof WindowTag */ - private toggle_window(): void { + private toggle_window(force?: boolean): void { let h: number, w: number; - if (!this.resizable) { + if (!this.resizable && !force) { return; } if (this._isMaxi === false) { @@ -500,8 +587,8 @@ namespace OS { width: $(this).css("width"), height: $(this).css("height"), }; - w = $(this.desktop).width(); - h = $(this.desktop).height(); + w = $(this.desktop).width() - 2; + h = $(this.desktop).height() - 2; $(this).css("top", "0").css("left", "0"); this.setsize({ w, h }); this._isMaxi = true; @@ -538,18 +625,12 @@ namespace OS { children: [ { el: "li", - class: "afx-window-close", - ref: "closebt", - }, - { - el: "li", - class: "afx-window-minimize", - ref: "minbt", - }, - { - el: "li", - class: "afx-window-maximize", - ref: "maxbt", + children: [ + { + el: "afx-button", + ref: "btnMenu", + }, + ], }, { el: "li", @@ -562,9 +643,38 @@ namespace OS { }, ], }, + { + el: "li", + class: "afx-window-minimize", + children: [ + { + el: "afx-button", + ref: "minbt", + } + ] + }, + { + el: "li", + class: "afx-window-maximize", + children: [ + { + el: "afx-button", + ref: "maxbt", + } + ] + }, + { + el: "li", + class: "afx-window-close", + children: [ + { + el: "afx-button", + ref: "closebt", + } + ] + }, ], }, - { el: "div", class: "afx-clear" }, { el: "div", ref: "yield", @@ -590,6 +700,10 @@ namespace OS { ref: "win_overlay", class: "afx-window-overlay", }, + { + el: "afx-stack-menu", + ref: "stackmenu" + } ], }, ]; diff --git a/src/core/tags/tag.ts b/src/core/tags/tag.ts index 83f742a..b38204f 100644 --- a/src/core/tags/tag.ts +++ b/src/core/tags/tag.ts @@ -24,10 +24,10 @@ interface HTMLElement { * defined on any child of this element will be ignored. * * @param {JQuery.MouseEventBase} e a mouse event - * @param {OS.GUI.tag.MenuTag} m The context menu element [[MenuTag]] + * @param {OS.GUI.tag.StackMenuTag} m The context menu element [[StackMenuTag]] * @memberof HTMLElement */ - contextmenuHandle(e: JQuery.MouseEventBase, m: OS.GUI.tag.MenuTag): void; + contextmenuHandle(e: JQuery.MouseEventBase, m: OS.GUI.tag.StackMenuTag): void; /** * Mount the element and all the children on its DOM subtree. This action diff --git a/src/packages/Files/main.css b/src/packages/Files/main.css index 52092d2..bcc875c 100644 --- a/src/packages/Files/main.css +++ b/src/packages/Files/main.css @@ -38,11 +38,5 @@ afx-app-window[data-id ='files-app-window'] afx-grid-view afx-grid-row afx-label } afx-app-window[data-id ='files-app-window'] button{ - height: 23px; border-radius: 0; - padding-top:2px; -} - -afx-app-window[data-id ='files-app-window'] input{ - border-radius: 3px; -} +} \ No newline at end of file diff --git a/src/packages/Files/main.ts b/src/packages/Files/main.ts index ab002ef..3d12997 100644 --- a/src/packages/Files/main.ts +++ b/src/packages/Files/main.ts @@ -37,7 +37,6 @@ namespace OS { */ export class Files extends BaseApplication { private view: GUI.tag.FileViewTag; - private navinput: HTMLInputElement; private navbar: GUI.tag.HBoxTag; private currdir: API.VFS.BaseFileHandle; private favo: GUI.tag.ListViewTag; @@ -57,13 +56,7 @@ namespace OS { */ main(): void { this.view = this.find("fileview") as GUI.tag.FileViewTag; - this.navinput = this.find("navinput") as HTMLInputElement; this.navbar = this.find("nav-bar") as GUI.tag.HBoxTag; - if (this.args && this.args.length > 0) { - this.currdir = this.args[0].path.asFileHandle(); - } else { - this.currdir = "home://".asFileHandle(); - } this.favo = this.find("favouri") as GUI.tag.ListViewTag; this.clipboard = undefined; this.viewType = this._api.switcher("icon", "list", "tree"); @@ -93,7 +86,7 @@ namespace OS { ctx_menu.unshift( { text: "__(Open with)", nodes: apps, - onchildselect: (e: GUI.TagEventType) => { + onchildselect: (e: GUI.TagEventType) => { if (!e) { return; } @@ -106,7 +99,7 @@ namespace OS { ctx_menu = ctx_menu.concat([ { text: "__(Extract Here)", - onmenuselect: (e: GUI.TagEventType) => { + onmenuselect: (e: GUI.TagEventType) => { if (!e) { return; } @@ -117,7 +110,7 @@ namespace OS { }, { text: "__(Extract to)", - onmenuselect: async (e: GUI.TagEventType) => { + onmenuselect: async (e: GUI.TagEventType) => { if (!e) { return; } @@ -144,7 +137,7 @@ namespace OS { ctx_menu.push( { text: "__(Compress)", - onmenuselect: async (e: GUI.TagEventType) => { + onmenuselect: async (e: GUI.TagEventType) => { if (!e) { return; } @@ -171,7 +164,7 @@ namespace OS { } } - m.items = ctx_menu; + m.nodes = ctx_menu; m.show(e); }; @@ -186,6 +179,10 @@ namespace OS { }; this.favo.onlistselect = (e) => { + if(this.currdir.path == e.data.item.data.path) + { + return; + } return this.view.path = e.data.item.data.path; }; @@ -198,12 +195,6 @@ namespace OS { return this.view.path = p.path; }; - $(this.navinput).keyup((e) => { - if (e.keyCode === 13) { - return this.view.path = $(this.navinput).val() as string; - } - }); //enter - this.view.fetch = (path) => { return new Promise((resolve, reject) => { let dir = path.asFileHandle(); @@ -213,15 +204,41 @@ namespace OS { if (d.error) { return reject(d.error); } - this.currdir = dir; - $(this.navinput).val(dir.path); - (this.scheme as GUI.tag.WindowTag).apptitle = dir.path; return resolve(d.result); }) .catch((e) => reject(__e(e))); }); }; - + this.view.onchdir = (e) => { + const dir = e.data.path.asFileHandle(); + this.currdir = dir; + (this.scheme as GUI.tag.WindowTag).apptitle = dir.path; + // update the current favo + const matched = this.favo.data.map((e,i) => { + return { + path: e.path, + index:i + } + }) + .filter(e => { + return e.path == dir.path + }); + if(matched.length == 0) + { + this.favo.push({ + text: dir.basename, + path: dir.path, + description: {text: dir.path}, + selected: true, + tag: "afx-dbline-list-item", + iconclass: "fa fa-folder" + }, true); + } + else + { + this.favo.selected = matched[0].index; + } + } this.vfs_event_flag = true; this.view.ondragndrop = async (e) => { if (!e) { @@ -272,11 +289,6 @@ namespace OS { } this.vfs_event_flag = true; }; - - // application setting - if (this.setting.sidebar === undefined) { - this.setting.sidebar = true; - } if (this.setting.nav === undefined) { this.setting.nav = true; } @@ -286,19 +298,16 @@ namespace OS { this.applyAllSetting(); // VFS mount point and event - const mntpoints = []; - for(let v of this.systemsetting.VFS.mountpoints) - { - mntpoints.push({ - text: v.text, - path: v.path, - icon: v.icon, - iconclass: v.iconclass, + const mntpoints = this.systemsetting.VFS.mountpoints.map(e => { + return { + text: e.text, + path: e.path, + icon: e.icon, + iconclass: e.iconclass, selected: false - }); - } + } + }); this.favo.data = mntpoints; - //@favo.set "selected", -1 if (this.setting.view) { this.view.view = this.setting.view; } @@ -387,6 +396,11 @@ namespace OS { this.view.multiselect = false; } }); + if (this.args && this.args.length > 0) { + this.currdir = this.args[0].path.asFileHandle(); + } else { + this.currdir = "home://".asFileHandle(); + } this.view.path = this.currdir.path; } @@ -397,8 +411,6 @@ namespace OS { return this.view.showhidden = this.setting.showhidden; case "nav": return this.toggleNav(this.setting.nav); - case "sidebar": - return this.toggleSidebar(this.setting.sidebar); } } @@ -437,7 +449,7 @@ namespace OS { shortcut: "C-I", }, ], - onchildselect: (e: GUI.TagEventType) => + onchildselect: (e: GUI.TagEventType) => this.actionFile(e.data.item.data.dataid), }; return arr; @@ -472,7 +484,7 @@ namespace OS { shortcut: "C-P", }, ], - onchildselect: (e: GUI.TagEventType) => + onchildselect: (e: GUI.TagEventType) => this.actionEdit(e.data.item.data.dataid), }; } @@ -488,12 +500,6 @@ namespace OS { dataid: `${this.name}-refresh`, shortcut: "C-A-R" }, - { - text: "__(Sidebar)", - switch: true, - checked: this.setting.sidebar, - dataid: `${this.name}-side`, - }, { text: "__(Navigation bar)", switch: true, @@ -531,28 +537,19 @@ namespace OS { type: "tree", }, ], - onchildselect: (e: GUI.TagEventType) => { + onchildselect: (e: GUI.TagEventType) => { const { type } = e.data.item.data; this.view.view = type; return (this.viewType[type] = true); }, }, ], - onchildselect: (e: GUI.TagEventType) => this.actionView(e), + onchildselect: (e: GUI.TagEventType) => this.actionView(e), }, ]; return menu; } - private toggleSidebar(b: boolean): void { - if (b) { - $(this.favo).show(); - } else { - $(this.favo).hide(); - } - return this.trigger("resize"); - } - private toggleNav(b: boolean): void { if (b) { $(this.navbar).show(); @@ -562,7 +559,7 @@ namespace OS { return this.trigger("resize"); } - private actionView(e: GUI.TagEventType): void{ + private actionView(e: GUI.TagEventType): void{ const data = e.data.item.data; switch (data.dataid) { case `${this.name}-hidden`: @@ -572,10 +569,6 @@ namespace OS { case `${this.name}-refresh`: this.view.path = this.currdir.path; return; - case `${this.name}-side`: - return this.registry("sidebar", data.checked); - //@setting.sidebar = e.item.data.checked - //@toggleSidebar e.item.data.checked case `${this.name}-nav`: return this.registry("nav", data.checked); } diff --git a/src/packages/Files/scheme.html b/src/packages/Files/scheme.html index 1abc994..2b547eb 100644 --- a/src/packages/Files/scheme.html +++ b/src/packages/Files/scheme.html @@ -1,19 +1,12 @@ - + - - - + +
- -
- - -
- - - - - + + + + \ No newline at end of file diff --git a/src/packages/MarketPlace/main.css b/src/packages/MarketPlace/main.css index 5ac6358..ff8c137 100644 --- a/src/packages/MarketPlace/main.css +++ b/src/packages/MarketPlace/main.css @@ -82,4 +82,9 @@ afx-app-window[data-id="marketplace-win"] p.stat { afx-app-window[data-id = "repository-dialog-win"] afx-list-view[data-id="repo-list"] ul.complex-content > li{ font-size: 11px; font-style: italic; +} + +afx-app-window[data-id="marketplace-win"] afx-tab-bar[data-id="catlist"] i.label-text +{ + font-weight: bold; } \ No newline at end of file diff --git a/src/packages/MarketPlace/main.ts b/src/packages/MarketPlace/main.ts index e780064..ba78be9 100644 --- a/src/packages/MarketPlace/main.ts +++ b/src/packages/MarketPlace/main.ts @@ -24,7 +24,7 @@ namespace OS { private installdir: string; private apps_meta: GenericObject; private applist: GUI.tag.ListViewTag; - private catlist: GUI.tag.ListViewTag; + private catlist: GUI.tag.TabBarTag; private container: GUI.tag.VBoxTag; private appname: GUI.tag.LabelTag; private appdetail: HTMLUListElement; @@ -44,13 +44,13 @@ namespace OS { this.apps_meta = {}; this.applist = this.find("applist") as GUI.tag.ListViewTag; - this.catlist = this.find("catlist") as GUI.tag.ListViewTag; + this.catlist = this.find("catlist") as GUI.tag.TabBarTag; this.applist.onlistselect = (e) => { const data = e.data.item.data; return this.appDetail(data); }; - this.catlist.onlistselect = (e) => { + this.catlist.ontabselect = (e) => { const selected = this.catlist.selected; if(selected < 0) return; @@ -326,7 +326,7 @@ namespace OS { iconclass: "bi bi-gear-wide" }); }); - this.catlist.data = cat_list_data; + this.catlist.items = cat_list_data; this.catlist.selected = 0; } private add_meta_from(k:string, v: API.PackageMetaType) diff --git a/src/packages/MarketPlace/scheme.html b/src/packages/MarketPlace/scheme.html index 60a4544..e358ea7 100644 --- a/src/packages/MarketPlace/scheme.html +++ b/src/packages/MarketPlace/scheme.html @@ -1,31 +1,28 @@ - - - -
- - - - - - - - - - - - -
- - - -

+ + +
+ + + + + + + + + +
+ + + +

+
+ +
+

+
    -     -
    -

    -
      -
      -       - + + + \ No newline at end of file diff --git a/src/packages/Setting/AppAndServiceHandle.ts b/src/packages/Setting/AppAndServiceHandle.ts index ed184f6..4920b7b 100644 --- a/src/packages/Setting/AppAndServiceHandle.ts +++ b/src/packages/Setting/AppAndServiceHandle.ts @@ -89,7 +89,7 @@ namespace OS { this.applist.buttons = [ { - text: "+", + iconclass: "bi bi-plus", onbtclick: () => { const apps = (() => { const result = []; @@ -128,7 +128,7 @@ namespace OS { }, }, { - text: "-", + iconclass: "bi bi-dash", onbtclick: () => { const item = this.applist.selectedItem; if (!item) { diff --git a/src/packages/Setting/AppearanceHandle.ts b/src/packages/Setting/AppearanceHandle.ts index 9c2fcda..c7e936c 100644 --- a/src/packages/Setting/AppearanceHandle.ts +++ b/src/packages/Setting/AppearanceHandle.ts @@ -67,7 +67,7 @@ namespace OS { this.wplist.buttons = [ { - text: "+", + iconclass: "bi bi-plus", onbtclick: (e) => { return this.parent .openDialog("FileDialog", { diff --git a/src/packages/Setting/StartupHandle.ts b/src/packages/Setting/StartupHandle.ts index b43cd39..37af023 100644 --- a/src/packages/Setting/StartupHandle.ts +++ b/src/packages/Setting/StartupHandle.ts @@ -47,7 +47,7 @@ namespace OS { this.applist = this.find("applist") as GUI.tag.ListViewTag; this.srvlist.buttons = [ { - text: "+", + iconclass: "bi bi-plus", onbtclick: () => { let services = []; for (var k in setting.system.packages) { @@ -75,7 +75,7 @@ namespace OS { }, }, { - text: "-", + iconclass: "bi bi-dash", onbtclick: () => { const item = this.srvlist.selectedItem; if (!item) { @@ -90,7 +90,7 @@ namespace OS { this.applist.buttons = [ { - text: "+", + iconclass: "bi bi-plus", onbtclick: () => { const apps = (() => { const result = []; @@ -127,7 +127,7 @@ namespace OS { }, }, { - text: "-", + iconclass: "bi bi-dash", onbtclick: () => { const item = this.applist.selectedItem; if (!item) { diff --git a/src/packages/Setting/VFSHandle.ts b/src/packages/Setting/VFSHandle.ts index 60d51d6..55a6ca5 100644 --- a/src/packages/Setting/VFSHandle.ts +++ b/src/packages/Setting/VFSHandle.ts @@ -144,7 +144,7 @@ namespace OS { this.ppath = this.find("ppath") as GUI.tag.LabelTag; this.mplist.buttons = [ { - text: "+", + iconclass: "bi bi-plus", onbtclick: async () => { const d = await this.parent.openDialog( new VFSSettingDialog(), @@ -162,7 +162,7 @@ namespace OS { }, }, { - text: "-", + iconclass: "bi bi-dash", onbtclick: async () => { const item = this.mplist.selectedItem; if (!item) { diff --git a/src/packages/Setting/main.css b/src/packages/Setting/main.css index 3ef822f..78131ee 100644 --- a/src/packages/Setting/main.css +++ b/src/packages/Setting/main.css @@ -1,21 +1,7 @@ -afx-app-window[data-id = "setting-window"] afx-tab-container afx-tab-bar afx-list-view > div > ul li{ - float:none; - border-radius: 0; - font-weight: bold; - padding-top:3px; - padding-bottom: 3px; - border:0; -} -afx-app-window[data-id = "setting-window"] afx-tab-bar{ - border-right: 1px solid #cbcbcb; -} -afx-app-window[data-id = "setting-window"] afx-label.header{ +afx-app-window[data-id = "setting-window"] afx-label.header i.label-text{ font-weight: bold; } -afx-app-window[data-id = "setting-window"] div.footer{ - border-right: 1px solid #cbcbcb; -} /*APPEARANCE*/ afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] div[data-id = "wp-preview"]{ display: block; @@ -26,7 +12,6 @@ afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] div[da afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] afx-list-view[data-id="wplist"] { border:1px solid #cbcbcb; - padding:2px; } afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] afx-resizer{ border:0; diff --git a/src/packages/Setting/main.ts b/src/packages/Setting/main.ts index 92b3e89..6591a4d 100644 --- a/src/packages/Setting/main.ts +++ b/src/packages/Setting/main.ts @@ -98,14 +98,14 @@ namespace OS { * @memberof Setting */ main(): void{ - //this.containter = this.find("container") as GUI.tag.TabContainerTag; + const containter = this.find("container") as GUI.tag.TabContainerTag; new Setting.AppearanceHandle(this.find("appearance"), this); new Setting.VFSHandle(this.find("vfs"), this); new Setting.LocaleHandle(this.find("locale"), this); new Setting.StartupHandle(this.find("startup"), this); new Setting.AppAndServiceHandle(this.find("app-services"), this); - + containter.selectedIndex = 0; (this.find("btnsave") as GUI.tag.ButtonTag ).onbtclick = (e) => { this._api .setting() diff --git a/src/packages/Setting/scheme.html b/src/packages/Setting/scheme.html index e16ddaa..e682487 100644 --- a/src/packages/Setting/scheme.html +++ b/src/packages/Setting/scheme.html @@ -1,28 +1,24 @@ - + - +
      -
      - + - -
      -
      - - -
      - -       -       +
      - - + + +
      + +       + +
      @@ -31,22 +27,19 @@
      -
      - + -
      - - + +
      - +       -
      - - + +
      - +
      @@ -56,8 +49,7 @@
      -
      - +
      @@ -67,10 +59,10 @@
      - +
      - +
      @@ -80,10 +72,10 @@
      - +
      - +
      @@ -91,10 +83,10 @@       - -
      + +
      - +
      diff --git a/src/themes/antos_dark/afx-app-window.css b/src/themes/antos_dark/afx-app-window.css index d25f514..7ee6bbd 100644 --- a/src/themes/antos_dark/afx-app-window.css +++ b/src/themes/antos_dark/afx-app-window.css @@ -5,42 +5,26 @@ afx-app-window div.afx-window-wrapper{ background-color:#363636; } afx-app-window.unactive > div.afx-window-wrapper{ - background-color: #464646; + /*background-color: #464646;*/ + box-shadow: none; } afx-app-window ul.afx-window-top{ - height: 20px; border-bottom: 1px solid #262626; } -afx-app-window div.afx-window-overlay { - top: 22px; -} -afx-app-window ul.afx-window-top li{ - margin-left: 3px; - margin-top:4px; - -} -afx-app-window ul.afx-window-top .afx-window-close,.afx-window-minimize,.afx-window-maximize{ - width: 10px; - height: 10px; - border-radius: 0; -} +/* 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; - text-align: center; + text-align: left; } afx-app-window div.afx-window-content @@ -49,8 +33,13 @@ afx-app-window div.afx-window-content border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - +/* afx-app-window.unactive div.afx-window-content { background-color:#464646; -} \ No newline at end of file +}*/ +afx-app-window ul.afx-window-top button:hover +{ + background-color: #464646; + color: white; +} diff --git a/src/themes/antos_dark/afx-button.css b/src/themes/antos_dark/afx-button.css index b73f5cc..1980478 100644 --- a/src/themes/antos_dark/afx-button.css +++ b/src/themes/antos_dark/afx-button.css @@ -1,5 +1,4 @@ afx-button button{ - padding: 4px; border: 1px solid #262626; background-color: #464646; color: white; @@ -7,14 +6,11 @@ afx-button button{ font-family: "Ubuntu"; } + afx-button button[disabled]{ color: #868686; } -afx-button i.icon-style { - width: 16px; - height: 16px; - display: inline-block; -} + afx-button button:active, afx-button button.btactive { background-color: #2786F3; color: white; diff --git a/src/themes/antos_dark/afx-dock.css b/src/themes/antos_dark/afx-dock.css index 01437a3..b4192d5 100644 --- a/src/themes/antos_dark/afx-dock.css +++ b/src/themes/antos_dark/afx-dock.css @@ -1,7 +1,4 @@ afx-apps-dock{ - bottom: 0px; - top: 0px; - width: 32px; background-color:#363636; padding:0; padding-top: 0; @@ -10,23 +7,6 @@ afx-apps-dock{ border:1px solid #262626; box-shadow: none; } -afx-apps-dock afx-button button{ - width: 32px; - height: 32px; - font-size: 19px; - margin-bottom: 0; - padding:0px; - background-color: transparent; - border:0; - border-radius: 0; -} -afx-apps-dock afx-button afx-label i.icon-style{ - width: 24px; - height: 24px; - margin-left: 2px; - margin-bottom: 0px; - border:0; -} afx-apps-dock afx-button.selected > button { background-color: #464646; diff --git a/src/themes/antos_dark/afx-file-view.css b/src/themes/antos_dark/afx-file-view.css index 48784b0..c2e87a6 100644 --- a/src/themes/antos_dark/afx-file-view.css +++ b/src/themes/antos_dark/afx-file-view.css @@ -1,7 +1,4 @@ afx-file-view afx-label.status{ - padding:3px; - right: 0px; - height: 15px; background-color: #464646; border-top: 1px solid #262626; @@ -14,7 +11,7 @@ afx-file-view afx-list-view > div.list-container > ul li{ margin-right: 5px; margin-bottom: 5px; } -afx-file-view afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li { +afx-file-view afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li { background-color: transparent; } afx-file-view afx-list-view i.dir:before{ @@ -40,7 +37,7 @@ afx-file-view afx-list-view i.file:before{ font-weight: normal; } -afx-file-view afx-list-view > div.list-container > ul > afx-list-item > li.selected +afx-file-view afx-list-view > div.list-container > ul > .afx-list-item > li.selected { background-color: transparent; } @@ -55,7 +52,6 @@ afx-file-view afx-grid-view{ afx-file-view afx-grid-view i.file:before{ content: "\f016"; font-family: "FontAwesome"; - font-size: 16px; color: white; font-style: normal; font-weight: normal; @@ -63,7 +59,6 @@ afx-file-view afx-grid-view i.file:before{ afx-file-view afx-grid-view i.dir:before{ content: "\f07b"; font-family: "FontAwesome"; - font-size: 16px; color: #76D2F9; font-style: normal; font-weight: normal; @@ -74,36 +69,28 @@ afx-file-view afx-grid-view i{ afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{ color:white; } -afx-file-view afx-grid-view afx-grid-row afx-grid-cell -{ - padding: 3px; -} afx-file-view afx-grid-view .grid_row_header afx-grid-cell{ background-color: #464646; border-top: 1px solid #262626; border-right: 1px solid #262626; border-bottom: 1px solid #262626; - padding: 3px; } afx-file-view afx-tree-view .afx-tree-view-folder-close:before{ content: "\f07b"; font-family: "FontAwesome"; - font-size: 16px; color:#76D2F9; } afx-file-view afx-tree-view .afx-tree-view-folder-open:before{ content: "\f07c"; font-family: "FontAwesome"; color:#76D2F9; - font-size: 16px; } afx-file-view afx-tree-view .afx-tree-view-item:before{ content: "\f016"; font-family: "FontAwesome"; - font-size: 16px; font-style: normal; font-weight: normal; } @@ -112,14 +99,10 @@ afx-file-view afx-tree-view div.afx_tree_item_selected, afx-file-view afx-tree-v background-color: transparent; } -afx-file-view afx-tree-view li.itemname{ - padding:3px; - padding-right: 5px; -} -afx-file-view afx-tree-view div.afx_tree_item_selected .itemname{ +afx-file-view afx-tree-view div.afx_tree_item_selected ul{ background-color: #116cd6; color:white; - border-radius: 3px; + border-radius: 0; } afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{ diff --git a/src/themes/antos_dark/afx-list-view.css b/src/themes/antos_dark/afx-list-view.css index b76aa27..5653366 100644 --- a/src/themes/antos_dark/afx-list-view.css +++ b/src/themes/antos_dark/afx-list-view.css @@ -1,29 +1,17 @@ afx-list-view > div.list-container > ul li{ - padding: 5px; - padding-top:3px; - padding-bottom: 3px; - padding-right: 10px; background-color: #363636; } -afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li{ +afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li{ background-color:#3b3b3b; } -afx-list-view i.closable{ - width: 16px; - height: 16px; -} afx-list-view i.closable:before{ - font-size: 10px; - margin-left: 10px; color: #868686; } - -afx-list-view > div.list-container > ul li > i { - margin-right: 3px; - +afx-list-view.dropdown > div.list-container > ul li:hover{ + background-color: #464646; } -afx-list-view > div.list-container > ul > afx-list-item > li.selected{ +afx-list-view > div.list-container > ul > .afx-list-item li.selected{ background-color: #116cd6; color:white; } @@ -32,36 +20,17 @@ afx-list-view.dropdown > div.list-container > ul{ border:1px solid #262626; box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); border-radius: 3px; - max-height: 150px; background-color: #363636; border-top-left-radius: 0px; - z-index: 10; } -afx-list-view.dropdown div.list-container div{ +afx-list-view.dropdown { color: white; - padding-top:3px; - padding-bottom: 3px; border:1px solid #262626; border-radius: 3px; background-color: transparent; - height: 17px; -} -afx-list-view.dropdown div.list-container div > afx-label{ - padding-left:3px; -} -afx-list-view.dropdown div.list-container div:before { - content: "\f107"; - font-family: "FontAwesome"; - font-size: 11px; - font-style: normal; - position: absolute; - top:25%; - right: 5px; - } -afx-list-view.dropdown > div.list-container > ul li:hover{ - background-color: #464646; } + afx-list-view ul.complex-content{ padding: 0; margin: 0; @@ -76,15 +45,15 @@ afx-list-view ul.complex-content li{ afx-list-view > div.list-container > ul li.selected ul.complex-content li{ color:white; } - afx-list-view div.button_container afx-button{ margin-right: 2px; } afx-list-view div.button_container afx-button button{ border-radius: 0; - padding-left:5px; - padding-top:1px; - padding-bottom: 1px; - padding-right: 5px; - } +afx-list-view .afx-list-item li afx-label.description i.label-text +{ + font-size: 13px; + padding-left: 10px; +} + diff --git a/src/themes/antos_dark/afx-menu.css b/src/themes/antos_dark/afx-menu.css index b4b1328..5491152 100644 --- a/src/themes/antos_dark/afx-menu.css +++ b/src/themes/antos_dark/afx-menu.css @@ -1,12 +1,3 @@ -afx-menu afx-switch span{ - padding-top: 3px; - font-size: 16px; - height: 19px; -} -afx-menu span.shortcut{ - text-align: right; - margin-left: 3px; -} afx-menu li:hover > a afx-switch span:before{ color:white; } @@ -20,14 +11,6 @@ afx-menu afx-menu ul { box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); background-color: #363636; } -afx-menu ul li /*, afx-menu ul >afx-menu-entry > li*/{ - padding-left: 5px; - padding-right: 5px; -} -afx-menu afx-menu li{ - min-width: 150px; - width: calc(100% - 10px); -} afx-menu li:hover { background-color: #2786F3; @@ -37,13 +20,7 @@ afx-menu li:hover > a { } afx-menu afx-menu .afx_submenu:before, afx-menu ul.context .afx_submenu:before{ - content: "\f054"; - font-family: "FontAwesome"; - font-size: 10px; - right:5px; color: #414339; - position:absolute; - top:25%; } afx-menu ul.context{ @@ -52,12 +29,4 @@ afx-menu afx-menu .afx_submenu:before, afx-menu ul.context .afx_submenu:before border-top-left-radius: 0px; box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); background-color: #363636; - } - afx-menu ul.context li{ - min-width: 150px; - width: calc(100% - 10px); - } - -afx-menu afx-label span { - height: 22px !important; } \ No newline at end of file diff --git a/src/themes/antos_dark/afx-nspinner.css b/src/themes/antos_dark/afx-nspinner.css index 5831e6f..0c14618 100644 --- a/src/themes/antos_dark/afx-nspinner.css +++ b/src/themes/antos_dark/afx-nspinner.css @@ -1,6 +1,5 @@ afx-nspinner ul li{ border: 1px solid #262626; - width: 100%; } afx-nspinner ul li.incr{ @@ -16,10 +15,4 @@ afx-nspinner ul li.decr{ afx-nspinner ul li:hover{ color:#116cD6; -} -afx-nspinner ul li.incr i:before{ - font-size: 16px; -} -afx-nspinner ul li.decr i:before{ - font-size: 16px; } \ No newline at end of file diff --git a/src/themes/antos_dark/afx-slider.css b/src/themes/antos_dark/afx-slider.css index e8278b8..7877104 100644 --- a/src/themes/antos_dark/afx-slider.css +++ b/src/themes/antos_dark/afx-slider.css @@ -1,7 +1,7 @@ afx-slider div.container{ border-radius: 3px; - height: 5px; + height: 10px; background-color: #868686; } @@ -11,9 +11,18 @@ afx-slider div.progress { } afx-slider div.dragpoint { - width: 15px; - height: 15px; border:1px solid #262626; - border-radius: 15px; background-color:#868686; } + +afx-slider div.dragpoint::before +{ + content: "\f0d7"; + font-family: "FontAwesome"; + position: absolute; + bottom: -9px; + left: 0; + right: 0; + text-align: center; + color:#868686; +} diff --git a/src/themes/antos_dark/afx-stack-menu.css b/src/themes/antos_dark/afx-stack-menu.css new file mode 100644 index 0000000..c6c1a13 --- /dev/null +++ b/src/themes/antos_dark/afx-stack-menu.css @@ -0,0 +1,26 @@ +afx-list-view > div.list-container > ul afx-stack-menu-item.afx-list-item li:hover { + background-color: #464646; +} + +afx-list-view > div.list-container > ul afx-stack-menu-item.afx-list-item li.selected afx-switch span:before +{ + color:white; +} + + +afx-list-view > div.list-container > ul > afx-stack-menu-item.afx-list-item > li.selected{ + background-color: #116cd6; + color:white; +} + +afx-stack-menu > afx-button button +{ + border-radius: 0; +} +afx-stack-menu.context { + border:1px solid #262626; + border-radius: 5px; + border-top-left-radius: 0px; + box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); + background-color: #363636; +} \ No newline at end of file diff --git a/src/themes/antos_dark/afx-sys-panel.css b/src/themes/antos_dark/afx-sys-panel.css index fe1f636..a0351eb 100644 --- a/src/themes/antos_dark/afx-sys-panel.css +++ b/src/themes/antos_dark/afx-sys-panel.css @@ -1,8 +1,7 @@ afx-sys-panel > div{ background-color: #363636; - border-bottom: 1px solid #262626; + border-top: 1px solid #262626; box-shadow: none; - height: 22px; } afx-sys-panel .afx-panel-os-menu li @@ -48,15 +47,11 @@ afx-sys-panel afx-overlay border: 1px solid #262626; } afx-sys-panel afx-list-view[data-id="applist"], -afx-sys-panel afx-list-view[data-id="catlist"], -afx-sys-panel afx-resizer +afx-sys-panel afx-tab-bar[data-id="catlist"] { border-top: 1px solid #262626; - border-bottom: 1px solid #262626; } - -afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li, -afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li +afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li { padding-top: 5px; padding-bottom: 5px; @@ -68,23 +63,22 @@ afx-sys-panel afx-hbox[data-id="btlist"] afx-button button border: 0; border-left: 1px solid #262626; border-top: 1px solid #262626; + font-size: 24px; } -afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover, -afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li:hover +afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li:hover { background-color: #cecece; color: #262626; + border-radius: 10px; } -afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li.selected, -afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li.selected - +afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li.selected { background-color: #116cd6; color:white; } -afx-sys-panel afx-list-view[data-id="catlist"] .label-text { +afx-sys-panel afx-tab-bar[data-id="catlist"] .afx-list-view i.label-text { font-weight: bold; } @@ -92,16 +86,7 @@ afx-sys-panel afx-list-view[data-id="applist"] afx-label.search-header { font-weight: bold; } -afx-sys-panel afx-list-view[data-id="applist"] afx-label i { - margin-right: 10px; - width: 16px; - height: 16px; -} -afx-sys-panel afx-list-view[data-id="applist"] afx-label i.bi::before -{ - width: 16px; -} afx-sys-panel div[data-id="searchicon"]:before{ content: "\f002"; display: block; @@ -113,7 +98,8 @@ afx-sys-panel div[data-id="searchicon"]:before{ } afx-sys-panel input{ border:0; - height: 25px; + height: 30px; color:#afafaf; + font-size: 16px; background-color: transparent; } \ No newline at end of file diff --git a/src/themes/antos_dark/afx-tab-bar.css b/src/themes/antos_dark/afx-tab-bar.css index 2e6beec..5b9f067 100644 --- a/src/themes/antos_dark/afx-tab-bar.css +++ b/src/themes/antos_dark/afx-tab-bar.css @@ -1,15 +1,14 @@ -afx-tab-bar afx-list-view > div.list-container > ul > afx-list-item > li.selected +afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container > ul > afx-list-item > li.selected { background-color: #464646; color:white; + border-bottom:1px solid #262626; } -afx-tab-bar afx-list-view > div.list-container > ul li{ - border-top-left-radius: 5px; - border-top-right-radius: 5px; - padding-bottom: 2px; - padding-right:15px; - padding-top:2px; - border:1px solid #262626; +afx-tab-bar[dir="vertical"] afx-list-view > div.list-container > ul > afx-list-item > li.selected +{ + background-color: #464646; + color:white; + border-right:1px solid #262626; } \ No newline at end of file diff --git a/src/themes/antos_dark/afx-tree-view.css b/src/themes/antos_dark/afx-tree-view.css index 72ca4af..afb87e2 100644 --- a/src/themes/antos_dark/afx-tree-view.css +++ b/src/themes/antos_dark/afx-tree-view.css @@ -1,12 +1,4 @@ -afx-tree-view div{ - padding:3px; -} - -afx-tree-view i.icon-style { - width: 16px; - height: 16px; -} afx-tree-view div.afx_tree_item_selected{ background-color: #116cd6; color:white; diff --git a/src/themes/antos_dark/antos.css b/src/themes/antos_dark/antos.css index 069d45f..3391b2f 100644 --- a/src/themes/antos_dark/antos.css +++ b/src/themes/antos_dark/antos.css @@ -1,29 +1,15 @@ html,body{ font-family: "Ubuntu"; - font-size: 13px; color: white; } -#workspace { - top: 23px; -} - -#desktop{ - top:0; - left: 35px; -} #desktop > div > ul afx-list-item { - width: 70px; color: white; - padding:3px; } #desktop > div > ul afx-list-item li.selected { background-color: #116cd6; color:white; border-radius: 6px; - width: 70px; - color: white; - padding:3px; } #desktop > div > ul afx-list-item i.file:before{ diff --git a/src/themes/antos_light/afx-app-window.css b/src/themes/antos_light/afx-app-window.css index 2b9722a..023bfb0 100644 --- a/src/themes/antos_light/afx-app-window.css +++ b/src/themes/antos_light/afx-app-window.css @@ -1,55 +1,47 @@ afx-app-window div.afx-window-wrapper{ border:1px solid #a6a6a6; box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); - border-radius: 5px; + border-radius: 0; background-color:#dfdfdf; } afx-app-window.unactive > div.afx-window-wrapper{ - background-color: #f6f6f6; + /*background-color: #f6f6f6;*/ + box-shadow: none; } afx-app-window ul.afx-window-top{ - height: 20px; border-bottom: 1px solid #a6a6a6; } -afx-app-window div.afx-window-overlay { - top: 22px; -} -afx-app-window ul.afx-window-top li{ - 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; + margin-right: 10px; } 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; - text-align: center; + text-align: left; } afx-app-window div.afx-window-content { background-color: white; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } +/* afx-app-window.unactive div.afx-window-content { background-color:white; +}*/ +afx-app-window ul.afx-window-top button:hover +{ + background-color: #2786F3; + color: white; } \ No newline at end of file diff --git a/src/themes/antos_light/afx-button.css b/src/themes/antos_light/afx-button.css index af7f70e..aa5e9fc 100644 --- a/src/themes/antos_light/afx-button.css +++ b/src/themes/antos_light/afx-button.css @@ -1,21 +1,15 @@ afx-button button{ - padding: 4px; border: 1px solid #a6a6a6; background-color: #f6F6F6; color: #414339; - border-radius: 6px; + border-radius: 3px; font-family: "Ubuntu"; - } afx-button button[disabled]{ color: #a6a6a6; } -afx-button i.icon-style { - width: 16px; - height: 16px; - display: inline-block; -} + afx-button button:active, afx-button button.btactive { background-color: #2786F3; color: white; diff --git a/src/themes/antos_light/afx-dock.css b/src/themes/antos_light/afx-dock.css index e559f86..eb0c480 100644 --- a/src/themes/antos_light/afx-dock.css +++ b/src/themes/antos_light/afx-dock.css @@ -1,7 +1,4 @@ afx-apps-dock{ - bottom: 0; - top: 0; - width: 32px; background-color:#e7e7e7; padding:0; padding-top: 0; @@ -10,23 +7,7 @@ afx-apps-dock{ border:1px solid #a6a6a6; box-shadow: none; } -afx-apps-dock afx-button button{ - width: 32px; - height: 32px; - font-size: 19px; - margin-bottom: 0; - padding:0px; - background-color: transparent; - border:0; - border-radius: 0; -} -afx-apps-dock afx-button afx-label i.icon-style{ - width: 24px; - height: 24px; - margin-left: 2px; - margin-bottom: 0px; - border:0; -} + afx-apps-dock afx-button.selected > button { background-color: #2786F3; diff --git a/src/themes/antos_light/afx-file-view.css b/src/themes/antos_light/afx-file-view.css index ec8ab18..21731a6 100644 --- a/src/themes/antos_light/afx-file-view.css +++ b/src/themes/antos_light/afx-file-view.css @@ -1,7 +1,4 @@ afx-file-view afx-label.status{ - padding:3px; - right: 0px; - height: 15px; background-color: #f6F6F6; border-top: 1px solid #cbcbcb; } @@ -13,7 +10,7 @@ afx-file-view afx-list-view > div.list-container > ul li{ margin-right: 5px; margin-bottom: 5px; } -afx-file-view afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li { +afx-file-view afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li { background-color: transparent; } afx-file-view afx-list-view i.dir:before{ @@ -38,7 +35,7 @@ afx-file-view afx-list-view i.file:before{ font-style: normal; font-weight: normal; } -afx-file-view afx-list-view > div.list-container > ul > afx-list-item > li.selected +afx-file-view afx-list-view > div.list-container > ul > .afx-list-item > li.selected { background-color: transparent; } @@ -53,7 +50,6 @@ afx-file-view afx-grid-view{ afx-file-view afx-grid-view i.file:before{ content: "\f016"; font-family: "FontAwesome"; - font-size: 16px; color: #414339; font-style: normal; font-weight: normal; @@ -61,7 +57,6 @@ afx-file-view afx-grid-view i.file:before{ afx-file-view afx-grid-view i.dir:before{ content: "\f07b"; font-family: "FontAwesome"; - font-size: 16px; color: #76D2F9; font-style: normal; font-weight: normal; @@ -72,36 +67,27 @@ afx-file-view afx-grid-view i{ afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{ color:white; } -afx-file-view afx-grid-view afx-grid-row afx-grid-cell -{ - padding: 3px; -} - afx-file-view afx-grid-view .grid_row_header afx-grid-cell{ background-color: #dfdfdf; border-top: 1px solid #a6a6a6; border-right: 1px solid #a6a6a6; border-bottom: 1px solid #a6a6a6; - padding: 3px; } afx-file-view afx-tree-view .afx-tree-view-folder-close:before{ content: "\f07b"; font-family: "FontAwesome"; - font-size: 16px; color:#76D2F9; } afx-file-view afx-tree-view .afx-tree-view-folder-open:before{ content: "\f07c"; font-family: "FontAwesome"; color:#76D2F9; - font-size: 16px; } afx-file-view afx-tree-view .afx-tree-view-item:before{ content: "\f016"; font-family: "FontAwesome"; - font-size: 16px; font-style: normal; font-weight: normal; } @@ -110,14 +96,10 @@ afx-file-view afx-tree-view div.afx_tree_item_selected, afx-file-view afx-tree-v background-color: transparent; } -afx-file-view afx-tree-view li.itemname{ - padding:3px; - padding-right: 5px; -} -afx-file-view afx-tree-view div.afx_tree_item_selected .itemname{ +afx-file-view afx-tree-view div.afx_tree_item_selected ul{ background-color: #116cd6; color:white; - border-radius: 3px; + border-radius: 0x; } afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{ diff --git a/src/themes/antos_light/afx-list-view.css b/src/themes/antos_light/afx-list-view.css index 5d25c5f..00099c7 100644 --- a/src/themes/antos_light/afx-list-view.css +++ b/src/themes/antos_light/afx-list-view.css @@ -1,29 +1,18 @@ afx-list-view > div.list-container > ul li{ - padding: 5px; - padding-top:3px; - padding-bottom: 3px; - padding-right: 10px; background-color: white; } -afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li{ +afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li{ background-color:#f5F5F5; } -afx-list-view i.closable{ - width: 16px; - height: 16px; -} afx-list-view i.closable:before{ - font-size: 10px; - margin-left: 10px; color: #414339; } - -afx-list-view > div.list-container > ul li > i { - margin-right: 3px; - +afx-list-view.dropdown > div.list-container > ul li:hover{ + background-color: #dcdcdc; + color: #414339; } -afx-list-view > div.list-container > ul > afx-list-item > li.selected{ +afx-list-view > div.list-container > ul > .afx-list-item li.selected{ background-color: #116cd6; color:white; } @@ -32,37 +21,15 @@ afx-list-view.dropdown > div.list-container > ul{ border:1px solid #a6a6a6; box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); border-radius: 3px; - max-height: 150px; background-color: white; border-top-left-radius: 0px; - z-index: 10; } -afx-list-view.dropdown div.list-container div{ +afx-list-view.dropdown{ color: #414339; - padding-top:3px; - padding-bottom: 3px; border:1px solid #a6a6a6; border-radius: 3px; background-color: transparent; - height: 17px; -} -afx-list-view.dropdown div.list-container div > afx-label{ - padding-left:3px; -} -afx-list-view.dropdown div.list-container div:before { - content: "\f107"; - font-family: "FontAwesome"; - font-size: 11px; - font-style: normal; - color: #414339; - position: absolute; - top:25%; - right: 5px; - } -afx-list-view.dropdown > div.list-container > ul li:hover{ - background-color: #dcdcdc; - color: #414339; } afx-list-view ul.complex-content{ padding: 0; @@ -79,14 +46,15 @@ afx-list-view > div.list-container > ul li.selected ul.complex-content li{ color:white; } + afx-list-view div.button_container afx-button{ margin-right: 2px; } afx-list-view div.button_container afx-button button{ border-radius: 0; - padding-left:5px; - padding-top:1px; - padding-bottom: 1px; - padding-right: 5px; - } +afx-list-view .afx-list-item li afx-label.description i.label-text +{ + font-size: 13px; + padding-left: 10px; +} \ No newline at end of file diff --git a/src/themes/antos_light/afx-menu.css b/src/themes/antos_light/afx-menu.css index b1ae122..18cc88c 100644 --- a/src/themes/antos_light/afx-menu.css +++ b/src/themes/antos_light/afx-menu.css @@ -1,12 +1,3 @@ -afx-menu afx-switch span{ - padding-top: 3px; - font-size: 16px; - height: 19px; -} -afx-menu span.shortcut{ - text-align: right; - margin-left: 3px; -} afx-menu li:hover > a afx-switch span:before{ color:white; } @@ -20,14 +11,6 @@ afx-menu afx-menu ul { box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); background-color: #e7e7e7; } -afx-menu ul li /*, afx-menu ul >afx-menu-entry > li*/{ - padding-left: 5px; - padding-right: 5px; -} -afx-menu afx-menu li{ - min-width: 150px; - width: calc(100% - 10px); -} afx-menu li:hover { background-color: #2786F3; @@ -37,13 +20,7 @@ afx-menu li:hover > a { } afx-menu afx-menu .afx_submenu:before, afx-menu ul.context .afx_submenu:before{ - content: "\f054"; - font-family: "FontAwesome"; - font-size: 10px; - right:5px; color: #414339; - position:absolute; - top:25%; } afx-menu ul.context{ @@ -53,11 +30,3 @@ afx-menu afx-menu .afx_submenu:before, afx-menu ul.context .afx_submenu:before box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); background-color: #e7e7e7; } - afx-menu ul.context li{ - min-width: 150px; - width: calc(100% - 10px); - } - -afx-menu afx-label span { - height: 22px !important; - } \ No newline at end of file diff --git a/src/themes/antos_light/afx-nspinner.css b/src/themes/antos_light/afx-nspinner.css index aa2232e..970d35b 100644 --- a/src/themes/antos_light/afx-nspinner.css +++ b/src/themes/antos_light/afx-nspinner.css @@ -1,6 +1,5 @@ afx-nspinner ul li{ border: 1px solid #a6a6a6; - width: 100%; } afx-nspinner ul li.incr{ @@ -17,9 +16,3 @@ afx-nspinner ul li.decr{ afx-nspinner ul li:hover{ color:#116cD6; } -afx-nspinner ul li.incr i:before{ - font-size: 16px; -} -afx-nspinner ul li.decr i:before{ - font-size: 16px; -} \ No newline at end of file diff --git a/src/themes/antos_light/afx-slider.css b/src/themes/antos_light/afx-slider.css index 1e9d90b..c4e5a20 100644 --- a/src/themes/antos_light/afx-slider.css +++ b/src/themes/antos_light/afx-slider.css @@ -11,9 +11,18 @@ afx-slider div.progress { } afx-slider div.dragpoint { - width: 15px; - height: 15px; border:1px solid #6b6b6b; - border-radius: 15px; background-color:#e6e6e6; } + +afx-slider div.dragpoint::before +{ + content: "\f0d7"; + font-family: "FontAwesome"; + position: absolute; + bottom: -9px; + left: 0; + right: 0; + text-align: center; + color:#868686; +} diff --git a/src/themes/antos_light/afx-stack-menu.css b/src/themes/antos_light/afx-stack-menu.css new file mode 100644 index 0000000..3d5a86a --- /dev/null +++ b/src/themes/antos_light/afx-stack-menu.css @@ -0,0 +1,24 @@ +afx-list-view > div.list-container > ul afx-stack-menu-item.afx-list-item li:hover { + background-color: #cecece; +} +afx-list-view > div.list-container > ul afx-stack-menu-item.afx-list-item li.selected afx-switch span:before +{ + color:white; +} + +afx-list-view > div.list-container > ul > afx-stack-menu-item.afx-list-item > li.selected{ + background-color: #116cd6; + color:white; +} +afx-stack-menu > afx-button button +{ + border-radius: 0; +} + +afx-stack-menu.context { + border:1px solid #a6a6a6; + border-radius: 5px; + border-top-left-radius: 0px; + box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); + background-color: #e7e7e7; +} \ No newline at end of file diff --git a/src/themes/antos_light/afx-sys-panel.css b/src/themes/antos_light/afx-sys-panel.css index 8cb25b0..d97ad1f 100644 --- a/src/themes/antos_light/afx-sys-panel.css +++ b/src/themes/antos_light/afx-sys-panel.css @@ -1,8 +1,7 @@ afx-sys-panel > div{ background-color: #e7e7e7; - border-bottom: 1px solid #9c9C9C; + border-top: 1px solid #9c9C9C; box-shadow:none; - height: 22px; } afx-sys-panel .afx-panel-os-menu li @@ -48,15 +47,11 @@ afx-sys-panel afx-overlay border: 1px solid #9c9C9C; } afx-sys-panel afx-list-view[data-id="applist"], -afx-sys-panel afx-list-view[data-id="catlist"], -afx-sys-panel afx-resizer +afx-sys-panel afx-tab-bar[data-id="catlist"] { border-top: 1px solid #afafaf; - border-bottom: 1px solid #afafaf; } - -afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li, -afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li +afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li { padding-top: 5px; padding-bottom: 5px; @@ -68,39 +63,26 @@ afx-sys-panel afx-hbox[data-id="btlist"] afx-button button border: 0; border-left: 1px solid #afafaf; border-top: 1px solid #afafaf; + font-size: 24px; } -afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover, -afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li:hover - +afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li:hover { background-color: #cecece; + border-radius: 10px; } -afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li.selected, -afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li.selected -{ +afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li.selected{ background-color: #116cd6; color:white; } -afx-sys-panel afx-list-view[data-id="catlist"] .label-text { +afx-sys-panel afx-tab-bar[data-id="catlist"] .afx-list-view i.label-text { font-weight: bold; } afx-sys-panel afx-list-view[data-id="applist"] afx-label.search-header { font-weight: bold; - -} -afx-sys-panel afx-list-view[data-id="applist"] afx-label i { - margin-right: 10px; - width: 16px; - height: 16px; -} - -afx-sys-panel afx-list-view[data-id="applist"] afx-label i.bi::before -{ - width: 16px; } afx-sys-panel div[data-id="searchicon"]:before{ @@ -116,5 +98,6 @@ afx-sys-panel input{ border:0; height: 25px; color:#afafaf; + font-size: 16px; background-color: transparent; } \ No newline at end of file diff --git a/src/themes/antos_light/afx-tab-bar.css b/src/themes/antos_light/afx-tab-bar.css index ce932d7..cd9623c 100644 --- a/src/themes/antos_light/afx-tab-bar.css +++ b/src/themes/antos_light/afx-tab-bar.css @@ -1,15 +1,14 @@ -afx-tab-bar afx-list-view > div.list-container > ul > afx-list-item > li.selected +afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container > ul > afx-list-item > li.selected { background-color: #116cd6; color:white; + border-bottom:1px solid #c3c3c3; } -afx-tab-bar afx-list-view > div.list-container > ul li{ - border-top-left-radius: 5px; - border-top-right-radius: 5px; - padding-bottom: 2px; - padding-right:15px; - padding-top:2px; - border:1px solid #c3c3c3; +afx-tab-bar[dir="vertical"] afx-list-view > div.list-container > ul > afx-list-item > li.selected +{ + background-color: #116cd6; + color:white; + border-right:1px solid #c3c3c3; } \ No newline at end of file diff --git a/src/themes/antos_light/afx-tree-view.css b/src/themes/antos_light/afx-tree-view.css index 50a6f7b..5d6d971 100644 --- a/src/themes/antos_light/afx-tree-view.css +++ b/src/themes/antos_light/afx-tree-view.css @@ -1,11 +1,3 @@ -afx-tree-view div{ - padding:3px; -} - -afx-tree-view i.icon-style { - width: 16px; - height: 16px; -} afx-tree-view div.afx_tree_item_selected{ background-color: #116cd6; color:white; diff --git a/src/themes/antos_light/antos.css b/src/themes/antos_light/antos.css index 3e9f397..6b14679 100644 --- a/src/themes/antos_light/antos.css +++ b/src/themes/antos_light/antos.css @@ -1,29 +1,16 @@ html,body{ font-family: "Ubuntu"; - font-size: 13px; color:#414339; } -#workspace { - top: 23px; -} -#desktop{ - top:0; - left: 35px; -} #desktop > div > ul afx-list-item { - width: 70px; color: white; - padding:3px; } #desktop > div > ul afx-list-item li.selected { background-color: #116cd6; - color:white; border-radius: 6px; - width: 70px; color: white; - padding:3px; } #desktop > div > ul afx-list-item i.file:before{ diff --git a/src/themes/system/afx-app-window.css b/src/themes/system/afx-app-window.css index 16b24b8..49ed418 100644 --- a/src/themes/system/afx-app-window.css +++ b/src/themes/system/afx-app-window.css @@ -14,6 +14,9 @@ afx-app-window ul.afx-window-top{ padding: 0; width: 100%; padding:0; + display: flex; + flex-direction: row; + height: 40px; } afx-app-window ul.loading::before{ @@ -33,10 +36,12 @@ afx-app-window ul.loading::before { afx-app-window ul.afx-window-top li{ list-style: none; } - afx-app-window ul li.afx-window-title{ - float:none; + flex: 1; overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; } afx-app-window div.afx-window-content @@ -81,8 +86,31 @@ afx-app-window div.afx-window-overlay { background-color: transparent; display: none; position: absolute; - top: 0; left: 0; bottom: 5px; right: 5px; + top: 42px; +} + +afx-app-window div.afx-window-wrapper > afx-stack-menu.context { + top: 42px; + left: 5px; +} + +afx-app-window ul.afx-window-top afx-button button{ + width: 40px; + height: 40px; + font-size: 22px; + margin-bottom: 0; + padding:0px; + background-color: transparent; + border:0; + border-radius: 0; +} +afx-app-window ul.afx-window-top afx-button afx-label i.icon-style{ + width: 24px; + height: 24px; + margin-left: 2px; + margin-bottom: 0px; + border:0; } \ No newline at end of file diff --git a/src/themes/system/afx-button.css b/src/themes/system/afx-button.css index 5b90996..59fd5c0 100644 --- a/src/themes/system/afx-button.css +++ b/src/themes/system/afx-button.css @@ -1,7 +1,17 @@ afx-button button{ outline: none; + min-height: 35px; + min-width: 40px; + padding-left: 5px; + padding-right: 5px; } afx-button i.icon-style { float: left; +} + +afx-button afx-label i.icon-style { + width: 24px; + height: 24px; + display: inline-block; } \ No newline at end of file diff --git a/src/themes/system/afx-dock.css b/src/themes/system/afx-dock.css index 89996db..bb06add 100644 --- a/src/themes/system/afx-dock.css +++ b/src/themes/system/afx-dock.css @@ -1,5 +1,22 @@ afx-apps-dock{ - float: left; - position: absolute; + display: flex; + flex-direction: row; overflow: hidden; +} +afx-apps-dock afx-button button{ + width: 40px; + height: 35px; + font-size: 22px; + margin-bottom: 0; + padding:0px; + background-color: transparent; + border:0; + border-radius: 0; +} +afx-apps-dock afx-button afx-label i.icon-style{ + width: 26px; + height: 26px; + margin-left: 2px; + margin-bottom: 0px; + border:0; } \ No newline at end of file diff --git a/src/themes/system/afx-file-view.css b/src/themes/system/afx-file-view.css index ebd839a..9e7f57c 100644 --- a/src/themes/system/afx-file-view.css +++ b/src/themes/system/afx-file-view.css @@ -39,6 +39,7 @@ afx-file-view afx-tree-view{ margin:0; overflow: hidden; background-color: transparent; + padding-left: 5px; } afx-file-view afx-tree-view .afx_tree_item_odd{ @@ -57,4 +58,47 @@ afx-file-view div.treecontainer{ overflow: auto; padding:0; margin:0; +} + +afx-file-view afx-tree-view .afx-tree-view-folder-close:before{ + font-size: 22px; +} +afx-file-view afx-tree-view .afx-tree-view-folder-open:before{ + font-size: 22px; +} + +afx-file-view afx-tree-view .afx-tree-view-item:before{ + font-size: 22px; +} + +afx-file-view afx-grid-view i.file:before{ + font-size: 21px; + font-style: normal; + font-weight: normal; +} +afx-file-view afx-grid-view i.dir:before{ + font-size: 22px; + font-style: normal; + font-weight: normal; +} +afx-file-view afx-tree-view li.itemname{ + padding-left: 10px; + padding-right: 5px; +} +afx-file-view afx-label.status{ + font-size: 13px; + height: 24px; + display: flex; + width: 100%; +} + +afx-file-view afx-label.status span{ + white-space: nowrap; + width: 100%; + text-align: right; +} + +afx-file-view afx-label.status i.label-text +{ + padding-right: 5px; } \ No newline at end of file diff --git a/src/themes/system/afx-grid-view.css b/src/themes/system/afx-grid-view.css index f976e2d..669c5e3 100644 --- a/src/themes/system/afx-grid-view.css +++ b/src/themes/system/afx-grid-view.css @@ -2,6 +2,11 @@ afx-grid-view afx-grid-row afx-grid-cell{ user-select:none; -webkit-user-select:none; cursor:default; + min-height: 25px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 5px; } afx-grid-view .grid_row_header afx-grid-cell{ @@ -9,6 +14,11 @@ afx-grid-view .grid_row_header afx-grid-cell{ -webkit-user-select:none; cursor:default; font-weight: bold; + min-height: 25px; + display: flex; + padding: 5px; + flex-direction: column; + justify-content: center; } afx-grid-view { @@ -16,5 +26,21 @@ afx-grid-view { } afx-grid-view afx-grid-cell afx-label { - display: inline-block; + display: flex; +} + +afx-grid-view .grid_row_header afx-grid-cell[sort = "asc"] span::before +{ + content: "\F574"; + font-family: "bootstrap-icons"; + font-weight: normal; + font-style: normal; +} + +afx-grid-view .grid_row_header afx-grid-cell[sort = "desc"] span::before +{ + content: "\F57B"; + font-family: "bootstrap-icons"; + font-weight: normal; + font-style: normal; } \ No newline at end of file diff --git a/src/themes/system/afx-label.css b/src/themes/system/afx-label.css index cead7ed..d1bc879 100644 --- a/src/themes/system/afx-label.css +++ b/src/themes/system/afx-label.css @@ -5,6 +5,7 @@ afx-label span { align-items: center; justify-content: center; flex-direction: row; + height: 100%; } afx-label i.label-text{ font-weight: normal; diff --git a/src/themes/system/afx-list-view.css b/src/themes/system/afx-list-view.css index 99f78c5..ed22f20 100644 --- a/src/themes/system/afx-list-view.css +++ b/src/themes/system/afx-list-view.css @@ -1,15 +1,20 @@ -afx-list-view{ +.afx-list-view{ overflow:hidden; - display: block; + display: flex; + flex-direction: column; + justify-content: center; } -afx-list-view afx-list-item + +afx-list-view .afx-list-item { display: contents; } afx-list-view > div.list-container{ overflow: auto; + flex: 1; } + afx-list-view > div.list-container > ul{ margin:0; padding: 0; @@ -17,12 +22,29 @@ afx-list-view > div.list-container > ul{ afx-list-view > div.list-container > ul li{ margin:0; - padding:0; + min-height: 25px; + padding: 5px; list-style: none; position: relative; -webkit-user-select:none; + display: flex; + flex-direction: column; + justify-content: center; cursor:default; } +afx-list-view > div.list-container > ul afx-dbline-list-item li{ + min-height: 40px; +} +.afx-list-view[dir='horizontal'] > div.list-container > ul +{ + display: flex; + flex-direction: row; + height: 100%; +} + +afx-list-view > div.list-container > ul li > i { + margin-right: 3px; +} afx-list-view i.closable{ display: inline-block; @@ -36,6 +58,7 @@ afx-list-view i.closable:before{ content: "\f00d"; font-family: "FontAwesome"; font-style: normal; + font-size: 16px; } afx-list-view.dropdown { @@ -44,17 +67,43 @@ afx-list-view.dropdown { } afx-list-view.dropdown > div.list-container{ overflow: visible; + position: absolute; } +afx-list-view.dropdown > div.list-container > div +{ + height: 100%; + display: flex; + justify-content: center; + flex-direction: column; +} + afx-list-view.dropdown > div.list-container > ul{ overflow-y: auto; overflow-x: hidden; + max-height: 200px; + z-index: 10; + position: absolute; + left: 0; + top: 100%; } afx-list-view.dropdown > div.list-container > ul li{ - display: inline-block; width:100%; } -afx-list-view afx-list-item afx-label { - display: inline-block; +afx-list-view.dropdown div.list-container div:before { + content: "\f107"; + font-family: "FontAwesome"; + font-size: 16px; + font-style: normal; + position: absolute; + right: 5px; } +afx-list-view.dropdown div.list-container div > afx-label{ + padding-left:3px; +} +afx-list-view div.button_container afx-button button +{ + min-width: 30px; + min-height: 30px; +} \ No newline at end of file diff --git a/src/themes/system/afx-menu.css b/src/themes/system/afx-menu.css index 8b09736..4d39809 100644 --- a/src/themes/system/afx-menu.css +++ b/src/themes/system/afx-menu.css @@ -85,4 +85,36 @@ afx-menu li.afx-corner-fix:hover{ } afx-menu ul.context li{ clear:float; + min-width: 150px; + width: calc(100% - 10px); + } + + afx-menu afx-switch span{ + padding-top: 3px; + font-size: 16px; + height: 19px; +} +afx-menu span.shortcut{ + text-align: right; + margin-left: 3px; + } + afx-menu ul li /*, afx-menu ul >afx-menu-entry > li*/{ + padding-left: 5px; + padding-right: 5px; +} +afx-menu afx-menu li{ + min-width: 150px; + width: calc(100% - 10px); +} +afx-menu afx-menu .afx_submenu:before, afx-menu ul.context .afx_submenu:before{ + content: "\f054"; + font-family: "FontAwesome"; + font-size: 10px; + right:5px; + position:absolute; + top:25%; + } + +afx-menu afx-label span { + height: 22px !important; } \ No newline at end of file diff --git a/src/themes/system/afx-nspinner.css b/src/themes/system/afx-nspinner.css index 631591d..06596b9 100644 --- a/src/themes/system/afx-nspinner.css +++ b/src/themes/system/afx-nspinner.css @@ -6,25 +6,36 @@ afx-nspinner ul{ padding:0; margin: 0; list-style: none; + display: flex; + flex-direction: column; + width: 40px; } afx-nspinner input{ margin: 0; + height: 100%; + width: calc(100% - 40px); + flex: 1; } afx-nspinner ul li{ - display: block; + display: flex; padding:0; margin: 0; + flex: 1; + width: 100%; + align-items: center; + justify-content: center; } afx-nspinner ul li.incr i:before{ content: "\f0d8"; font-family: "FontAwesome"; font-style: normal; + font-size: 20px; } afx-nspinner ul li.decr i:before{ content: "\f0d7"; font-family: "FontAwesome"; font-style: normal; - + font-size: 20px; } \ No newline at end of file diff --git a/src/themes/system/afx-slider.css b/src/themes/system/afx-slider.css index 727460b..1723a74 100644 --- a/src/themes/system/afx-slider.css +++ b/src/themes/system/afx-slider.css @@ -20,4 +20,5 @@ afx-slider div.progress { afx-slider div.dragpoint { display: block; + padding: 5px; } diff --git a/src/themes/system/afx-stack-menu.css b/src/themes/system/afx-stack-menu.css new file mode 100644 index 0000000..fa254e3 --- /dev/null +++ b/src/themes/system/afx-stack-menu.css @@ -0,0 +1,51 @@ +afx-stack-menu { + display: flex; + flex-direction: column; + min-width: 200px; +} + +afx-stack-menu .afx-list-view +{ + flex: 1; +} +afx-stack-menu > afx-button button +{ + width: 100%; + padding-top: 10px; + padding-bottom: 10px; +} + +afx-stack-menu > afx-button .label-text +{ + font-weight: bold; +} +afx-stack-menu.context +{ + position: absolute; + z-index: 1000000; +} +afx-stack-menu.context .afx-list-view > div.list-container +{ + overflow: unset; +} +afx-stack-menu-item div +{ + display: flex; + flex-direction: row; +} + +afx-stack-menu-item afx-label { + flex: 1; + display: flex; +} +afx-stack-menu-item .shortcut +{ + margin-left: 10px; + font-size: 13px; +} +afx-stack-menu-item .afx-submenu:before +{ + content: "\f054"; + font-family: "FontAwesome"; + margin-left: 5px; +} \ No newline at end of file diff --git a/src/themes/system/afx-sys-panel.css b/src/themes/system/afx-sys-panel.css index 9cb8370..d3df655 100644 --- a/src/themes/system/afx-sys-panel.css +++ b/src/themes/system/afx-sys-panel.css @@ -2,17 +2,26 @@ afx-sys-panel{ padding:0; margin: 0; + position: absolute; + bottom: 0; + width: 100%; } afx-sys-panel > div{ width: 100%; margin:0; padding: 0; - position:absolute; + display: flex; + flex-direction: row; + height: 35px; } afx-sys-panel afx-overlay { - width: 400px; + bottom: 35px; + overflow: hidden; + margin: 0; + left: 0; + right: 0; } afx-sys-panel > div.loading::before{ background-color: orangered; @@ -24,7 +33,7 @@ afx-sys-panel > div.loading::before{ afx-sys-panel > div.loading::before { right: 0; - bottom:0; + top:0; animation: sys-loading 1s linear infinite; } @@ -59,12 +68,10 @@ afx-sys-panel > div.loading::before { afx-sys-panel .afx-panel-os-menu { padding:0; margin: 0; - float:left; margin-right: 5px; } afx-sys-panel .afx-panel-os-stray{ - float:right; position: relative; } @@ -83,13 +90,6 @@ afx-sys-panel afx-menu.afx-panel-os-stray afx-menu afx-menu{ top:-4px; } -afx-sys-panel afx-overlay -{ - overflow-y: auto; - overflow-x: hidden; - margin: 0; -} - afx-sys-panel afx-hbox[data-id="btlist"] afx-button button { width: 100%; @@ -98,8 +98,45 @@ afx-sys-panel afx-hbox[data-id="btlist"] afx-button button border: 0px; } -afx-sys-panel afx-list-view[data-id="applist"] afx-label span, -afx-sys-panel afx-list-view[data-id="catlist"] afx-label span +afx-sys-panel afx-list-view[data-id="applist"] > div.list-container { + margin: 0 auto; +} +afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul { - white-space: nowrap; + display: flex; + flex-flow: row wrap; + justify-content: center; +} +afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li{ + /*display: block;*/ + width: 70px; + text-align: center; + font-size: 40px; + justify-content: normal !important; +} + +afx-sys-panel afx-list-view[data-id="applist"] i{ + display: block; + width: 100%; +} + + +afx-sys-panel afx-list-view[data-id="applist"] i.label-text{ + word-break: break-word; + font-size: 14px; +} +afx-sys-panel afx-list-view[data-id="applist"] i.icon-style { + width: 40px; + height: 40px; +} +afx-sys-panel afx-list-view[data-id="applist"] afx-label span +{ + flex-direction: column; +} +afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover { + background-color: transparent; +} +afx-sys-panel afx-list-view[data-id="applist"]> div.list-container > ul .afx-list-item:nth-child(even) li +{ + background-color: transparent; } \ No newline at end of file diff --git a/src/themes/system/afx-tab-bar.css b/src/themes/system/afx-tab-bar.css index 0969db9..4915960 100644 --- a/src/themes/system/afx-tab-bar.css +++ b/src/themes/system/afx-tab-bar.css @@ -7,12 +7,26 @@ afx-tab-bar afx-list-view { padding:0; margin:0; } -afx-tab-bar afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li +afx-tab-bar afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li, +afx-tab-bar afx-list-view > div.list-container > ul li { background-color: transparent; + + padding-left: 10px; + padding-right: 10px; } - -afx-tab-bar afx-list-view > div.list-container > ul li{ - float:left; +afx-tab-bar[dir="vertical"] afx-list-view > div.list-container +{ + overflow: hidden; } + +afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container +{ + overflow: hidden; +} + +afx-tab-bar afx-list-view > div.list-container > ul li afx-label i.label-text +{ + white-space: nowrap; +} \ No newline at end of file diff --git a/src/themes/system/afx-tree-view.css b/src/themes/system/afx-tree-view.css index 37f1b63..5400cc8 100644 --- a/src/themes/system/afx-tree-view.css +++ b/src/themes/system/afx-tree-view.css @@ -15,6 +15,14 @@ afx-tree-view li{ list-style: none; margin:0; padding: 0; + min-height: 35px; + display: flex; + flex-direction: column; + justify-content: center; +} +afx-tree-view li.itemname +{ + padding-left: 10px; } afx-tree-view div{ -webkit-user-select:none; @@ -28,8 +36,19 @@ afx-tree-view i.icon-style { afx-tree-view .afx-tree-view-folder-open:before{ content: "\f147"; font-family: "FontAwesome"; + font-size: 22px; } afx-tree-view .afx-tree-view-folder-close:before{ content: "\f196"; font-family: "FontAwesome"; + font-size: 22px; } +afx-tree-view div{ + padding-left:3px; + padding-right: 3px; +} + +afx-tree-view i.icon-style { + width: 24px; + height: 24px; +} \ No newline at end of file diff --git a/src/themes/system/antos.css b/src/themes/system/antos.css index 3f747e8..e56e792 100644 --- a/src/themes/system/antos.css +++ b/src/themes/system/antos.css @@ -4,6 +4,16 @@ html,body{ width: 100%; height: 100%; overflow: hidden; + touch-action: none; + font-size: 14px; +} +#desktop > div > ul afx-list-item { + width: 70px; + padding:3px; +} +#desktop > div > ul afx-list-item li +{ + padding: 3px; } body { @@ -28,7 +38,8 @@ body #workspace { width: 100%; position: absolute; - bottom: 0; + top: 0; + bottom: 35px; } #desktop{ @@ -39,6 +50,9 @@ body user-select:none; cursor: default; padding:0px; + overflow: hidden; + top:0; + left: 0; } #desktop > div > ul afx-list-item { display:block;