dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-12-27 01:38:21 +01:00
Code Issues 1 Actions Projects Releases Wiki Activity

Rework on AntOS core to provide support to both mobile and desktop devices (experimental):

Browse Source 
- 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
This commit is contained in:
DanyLE 2022-12-08 14:50:38 +01:00 committed by Dany LE
parent 13969511a5
commit cd294f58a6
83 changed files with 2417 additions and 1039 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Makefile
View File

@ -40,7 +40,8 @@ tags = dist/core/tags/tag.js \
dist/core/tags/OverlayTag.js \ dist/core/tags/OverlayTag.js \
dist/core/tags/AppDockTag.js \ dist/core/tags/AppDockTag.js \
dist/core/tags/SystemPanelTag.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 \ javascripts= dist/core/core.js \
dist/core/settings.js \ dist/core/settings.js \

509
d.ts/antos.d.ts vendored
View File

@ -367,12 +367,12 @@ declare namespace OS {
*/ */
constructor(name: string); constructor(name: string);
/** /**
* Exit the sub-window * Purge the model from the system
* *
* @returns {void} * @protected
* @memberof SubWindow * @memberof BaseModel
*/ */
quit(): void; protected destroy(): void;
/** /**
* Init the sub-window, this function is called * Init the sub-window, this function is called
* on creation of the sub-window object. It is used * on creation of the sub-window object. It is used
@ -458,6 +458,12 @@ declare namespace OS {
* @memberof BaseDialog * @memberof BaseDialog
*/ */
protected onexit(_e: BaseEvent): void; protected onexit(_e: BaseEvent): void;
/**
* Show the dialog
*
* @memberof BaseDialog
*/
show(): void;
} }
/** /**
* A basic dialog renders a dialog widget using the UI * A basic dialog renders a dialog widget using the UI
@ -1692,6 +1698,10 @@ declare namespace OS {
* is an instance of [[string]] * is an instance of [[string]]
*/ */
const REPOSITORY: string; const REPOSITORY: string;
/**
* Indicate whether the current de
*/
var mobile: boolean;
/** /**
* Register a model prototype to the system namespace. * Register a model prototype to the system namespace.
* There are two types of model to be registered, if the model * There are two types of model to be registered, if the model
@ -2284,14 +2294,6 @@ declare namespace OS {
* @memberof BaseApplication * @memberof BaseApplication
*/ */
sysdock: GUI.tag.AppDockTag; 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 * Loading animation check timeout
* *
@ -2510,6 +2512,7 @@ declare namespace OS {
} }
} }
/// <reference types="jquery" /> /// <reference types="jquery" />
/// <reference types="jquery" />
declare namespace OS { declare namespace OS {
/** /**
* Application argument type definition * Application argument type definition
@ -2780,7 +2783,14 @@ declare namespace OS {
* @returns {void} * @returns {void}
* @memberof BaseModel * @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 * Model meta data, need to be implemented by
* subclasses * subclasses
@ -3148,6 +3158,14 @@ declare namespace OS {
* @memberof FileViewTag * @memberof FileViewTag
*/ */
private _onfileopen; private _onfileopen;
/**
* placeholder for directory changed event callback
*
* @private
* @type {TagEventCallback<API.VFS.BaseFileHandle>}
* @memberof FileViewTag
*/
private _ondirchanged;
/** /**
* Reference to the all selected files meta-datas * Reference to the all selected files meta-datas
* *
@ -3223,6 +3241,14 @@ declare namespace OS {
* @memberof FileViewTag * @memberof FileViewTag
*/ */
set onfileselect(e: TagEventCallback<API.FileInfoType>); set onfileselect(e: TagEventCallback<API.FileInfoType>);
/**
* set the callback handle for the directory changed event.
* The parameter of the callback should be an object
* of type [[TagEventType]]<T> with the data type `T` is [[API.VFS.BaseFileHandle]]
*
* @memberof FileViewTag
*/
set onchdir(e: TagEventCallback<API.VFS.BaseFileHandle>);
/** /**
set the callback handle for the file open event. set the callback handle for the file open event.
* The parameter of the callback should be an object * 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. * defined on any child of this element will be ignored.
* *
* @param {JQuery.MouseEventBase} e a mouse event * @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 * @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 * Mount the element and all the children on its DOM subtree. This action
* is performed in a top-down manner * is performed in a top-down manner
@ -4069,10 +4095,10 @@ declare namespace OS {
* *
* @protected * @protected
* @abstract * @abstract
* @returns {TagLayoutType} * @returns {TagLayoutType | TagLayoutType[]}
* @memberof ListViewItemTag * @memberof ListViewItemTag
*/ */
protected abstract itemlayout(): TagLayoutType; protected abstract itemlayout(): TagLayoutType | TagLayoutType[];
/** /**
* This function is called when the item data is changed. * This function is called when the item data is changed.
* It should be implemented in all subclass of this class * It should be implemented in all subclass of this class
@ -4131,10 +4157,63 @@ declare namespace OS {
* List item custom layout definition * List item custom layout definition
* *
* @protected * @protected
* @returns {TagLayoutType} * @returns {TagLayoutType | TagLayoutType[]}
* @memberof SimpleListItemTag * @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. * This tag defines a traditional or a dropdown list widget.
@ -4349,6 +4428,16 @@ declare namespace OS {
* @memberof ListViewTag * @memberof ListViewTag
*/ */
set buttons(v: GenericObject<any>[]); set buttons(v: GenericObject<any>[]);
/**
* 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 * Getter: Get data of the list
* *
@ -4390,6 +4479,13 @@ declare namespace OS {
* @memberof ListViewTag * @memberof ListViewTag
*/ */
get selectedItems(): ListViewItemTag[]; get selectedItems(): ListViewItemTag[];
/**
* get the selected item index
*
* @readonly
* @type {number}
* @memberof ListViewTag
*/
get selected(): number | number[]; get selected(): number | number[];
/** /**
* Add an item to the beginning of the list * 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 * Add an item to the beginning or end of the list
* *
* @param {GenericObject<any>} item list item data * @param {GenericObject<any>} 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 * @returns {ListViewItemTag} the added list item element
* @memberof ListViewTag * @memberof ListViewTag
*/ */
@ -4460,21 +4556,21 @@ declare namespace OS {
/** /**
* This function triggers the double click event on an item * This function triggers the double click event on an item
* *
* @private * @protected
* @param {TagEventType} e tag event object * @param {TagEventType} e tag event object
* @returns * @returns
* @memberof ListViewTag * @memberof ListViewTag
*/ */
private idbclick; protected idbclick(e: TagEventType<ListViewItemTag>): void;
/** /**
* This function triggers the list item select event * This function triggers the list item select event
* *
* @private * @protected
* @param {TagEventType} e tag event object * @param {TagEventType} e tag event object
* @returns * @returns
* @memberof ListViewTag * @memberof ListViewTag
*/ */
private iselect; protected iselect(e: TagEventType<ListViewItemTag>): void;
/** /**
* Mount the tag and bind some basic event * Mount the tag and bind some basic event
* *
@ -4665,6 +4761,13 @@ declare namespace OS {
* @memberof TabBarTag * @memberof TabBarTag
*/ */
private _ontabselect; private _ontabselect;
/**
* Cache of touch event
*
* @private
* @meberof TabBarTag
*/
private _previous_touch;
/** /**
*Creates an instance of TabBarTag. *Creates an instance of TabBarTag.
* @memberof TabBarTag * @memberof TabBarTag
@ -4694,6 +4797,21 @@ declare namespace OS {
*/ */
set closable(v: boolean); set closable(v: boolean);
get closable(): 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 * Add a tab in the end of the tab bar
* *
@ -4733,6 +4851,14 @@ declare namespace OS {
*/ */
set selected(v: number | number[]); set selected(v: number | number[]);
get selected(): 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 * Set the tab close event handle
* *
@ -6166,7 +6292,14 @@ declare namespace OS {
* @type {GenericObject<any>} * @type {GenericObject<any>}
* @memberof ButtonTag * @memberof ButtonTag
*/ */
data: GenericObject<any>; private _data;
/**
* Custom user data setter/gettter
*
* @memberof ButtonTag
*/
set data(v: GenericObject<any>);
get data(): GenericObject<any>;
/** /**
*Creates an instance of ButtonTag. *Creates an instance of ButtonTag.
* @memberof ButtonTag * @memberof ButtonTag
@ -7472,6 +7605,272 @@ declare namespace OS {
} }
} }
} }
/// <reference types="jquery" />
declare namespace OS {
namespace GUI {
namespace tag {
/**
* menu event data type definition
*/
type StackMenuEventData = TagEventDataType<ListViewItemTag>;
/**
* 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<any>[][]}
* @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<TabEventData>}
* @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<any>[]);
get items(): GenericObject<any>[];
/**
* Setter: Set the menu data
*
* Getter: Get the menu data
*
* @memberof StackMenuTag
*/
set nodes(v: GenericObject<any>[]);
get nodes(): GenericObject<any>[];
/**
* Set the `menu entry select` event handle
*
* @memberof StackMenuTag
*/
set onmenuselect(v: TagEventCallback<StackMenuEventData>);
/**
* 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 { declare namespace OS {
namespace GUI { namespace GUI {
namespace tag { namespace tag {
@ -7553,6 +7952,13 @@ declare namespace OS {
* @memberof SliderTag * @memberof SliderTag
*/ */
set onvaluechanging(f: TagEventCallback<number>); set onvaluechanging(f: TagEventCallback<number>);
/**
* Setter/Getter: set and get precision reading
*
* @memberof SliderTag
*/
set precision(v: boolean);
get precision(): boolean;
/** /**
* Setter: Enable/disable the slider * Setter: Enable/disable the slider
* *
@ -7841,25 +8247,6 @@ declare namespace OS {
* @memberof FloatListTag * @memberof FloatListTag
*/ */
set onready(v: (e: FloatListTag) => void); 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 * Disable the dropdown option in this list
* *
@ -8289,6 +8676,14 @@ declare namespace OS {
* @memberof WindowTag * @memberof WindowTag
*/ */
private _history; 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 * This placeholder stores the offset of the virtual desktop element
* *
@ -8314,6 +8709,12 @@ declare namespace OS {
*/ */
set blur_overlay(v: boolean); set blur_overlay(v: boolean);
get blur_overlay(): boolean; get blur_overlay(): boolean;
/**
* Setter: set menu open event handler
*
* @memberof WindowTag
*/
set onmenuopen(f: (el: StackMenuTag) => void);
/** /**
* Init window tag * Init window tag
* - `shown`: false * - `shown`: false
@ -8359,6 +8760,12 @@ declare namespace OS {
*/ */
set height(v: number); set height(v: number);
get height(): number; get height(): number;
/**
* Set the application menu content
*
* @memberof WindowTag
*/
set menu(v: GenericObject<any>[]);
/** /**
* Setter: enable/disable window minimizable * Setter: enable/disable window minimizable
* *
@ -10136,7 +10543,6 @@ declare namespace OS {
* @interface AnnouncerListenerType * @interface AnnouncerListenerType
*/ */
interface AnnouncerListenerType { interface AnnouncerListenerType {
[index: number]: {
/** /**
* The event name * The event name
* *
@ -10148,7 +10554,6 @@ declare namespace OS {
* *
*/ */
f: (d: any) => void; f: (d: any) => void;
}[];
} }
/** /**
* This class is the based class used in AntOS event * This class is the based class used in AntOS event
@ -10250,7 +10655,7 @@ declare namespace OS {
/** /**
* Placeholder of all global events listeners * Placeholder of all global events listeners
*/ */
var listeners: API.AnnouncerListenerType; var listeners: Map<BaseModel | 0, API.AnnouncerListenerType[]>;
/** /**
* Subscribe to a global event * Subscribe to a global event
* *
@ -10259,7 +10664,15 @@ declare namespace OS {
* @param {(d: API.AnnouncementDataType<any>) => void} f event callback * @param {(d: API.AnnouncementDataType<any>) => void} f event callback
* @param {GUI.BaseModel} a the process (Application/service) related to the callback * @param {GUI.BaseModel} a the process (Application/service) related to the callback
*/ */
function on(e: string, f: (d: API.AnnouncementDataType<any>) => void, a: BaseModel): void; function on(e: string, f: (d: API.AnnouncementDataType<any>) => void, a?: BaseModel): void;
/**
* Subscribe to a global event once
*
* @export
* @param {string} e event name
* @param {(d: API.AnnouncementDataType<any>) => void} f event callback
*/
function one(e: string, f: (d: API.AnnouncementDataType<any>) => void): void;
/** /**
* Trigger a global event * Trigger a global event
* *

10
src/bootstrap.ts
View File

@ -21,5 +21,15 @@ Ant.onload = function () {
"webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange", "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange",
() => (Ant.OS.GUI.fullscreen = !Ant.OS.GUI.fullscreen) () => (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(); return Ant.OS.boot();
}; };

39
src/core/Announcerment.ts
View File

@ -107,7 +107,6 @@ namespace OS {
* @interface AnnouncerListenerType * @interface AnnouncerListenerType
*/ */
export interface AnnouncerListenerType { export interface AnnouncerListenerType {
[index: number]: {
/** /**
* The event name * The event name
* *
@ -120,8 +119,7 @@ namespace OS {
* *
*/ */
f: (d: any) => void; f: (d: any) => void;
}[]; };
}
/** /**
* This class is the based class used in AntOS event * This class is the based class used in AntOS event
@ -301,7 +299,7 @@ namespace OS {
/** /**
* Placeholder of all global events listeners * Placeholder of all global events listeners
*/ */
export var listeners: API.AnnouncerListenerType = {}; export var listeners: Map<BaseModel | 0, API.AnnouncerListenerType[]> = new Map();
/** /**
* Subscribe to a global event * Subscribe to a global event
@ -311,14 +309,29 @@ namespace OS {
* @param {(d: API.AnnouncementDataType<any>) => void} f event callback * @param {(d: API.AnnouncementDataType<any>) => void} f event callback
* @param {GUI.BaseModel} a the process (Application/service) related to the callback * @param {GUI.BaseModel} a the process (Application/service) related to the callback
*/ */
export function on(e: string, f: (d: API.AnnouncementDataType<any>) => void, a: BaseModel): void { export function on(e: string, f: (d: API.AnnouncementDataType<any>) => void, a?: BaseModel): void {
if (!announcer.listeners[a.pid]) { let key: BaseModel | 0 = 0;
announcer.listeners[a.pid] = []; 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); announcer.observable.on(e, f);
} }
/**
* Subscribe to a global event once
*
* @export
* @param {string} e event name
* @param {(d: API.AnnouncementDataType<any>) => void} f event callback
*/
export function one(e: string, f: (d: API.AnnouncementDataType<any>) => void): void {
announcer.observable.one(e, f);
}
/** /**
* Trigger a global event * Trigger a global event
* *
@ -390,16 +403,14 @@ namespace OS {
* @returns {void} * @returns {void}
*/ */
export function unregister(app: BaseModel): void { export function unregister(app: BaseModel): void {
if ( if (!announcer.listeners.has(app)) {
!announcer.listeners[app.pid] ||
!(announcer.listeners[app.pid].length > 0)
) {
return; 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); announcer.observable.off(i.e, i.f);
} }
delete announcer.listeners[app.pid]; announcer.listeners.delete(app);
} }
/** /**

26
src/core/BaseApplication.ts
View File

@ -61,15 +61,6 @@ namespace OS {
*/ */
sysdock: GUI.tag.AppDockTag; 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 * Loading animation check timeout
* *
@ -120,14 +111,8 @@ namespace OS {
// first register some base event to the app // first register some base event to the app
this.on("focus", () => { this.on("focus", () => {
this.sysdock.selectedApp = this; this.sysdock.selectedApp = this;
this.appmenu.pid = this.pid; (this.scheme as GUI.tag.WindowTag).onmenuopen = (el) => el.nodes = this.baseMenu() || [];
this.appmenu.items = this.baseMenu() || [];
OS.PM.pidactive = this.pid; OS.PM.pidactive = this.pid;
this.appmenu.onmenuselect = (
d: GUI.tag.MenuEventData
): void => {
return this.trigger("menuselect", d);
};
this.trigger("focused", undefined); this.trigger("focused", undefined);
if (this.dialog) { if (this.dialog) {
return this.dialog.show(); return this.dialog.show();
@ -135,8 +120,6 @@ namespace OS {
}); });
this.on("hide", () => { this.on("hide", () => {
this.sysdock.selectedApp = null; this.sysdock.selectedApp = null;
this.appmenu.items = [];
this.appmenu.pid = -1;
if (this.dialog) { if (this.dialog) {
return this.dialog.hide(); return this.dialog.hide();
} }
@ -163,7 +146,6 @@ namespace OS {
this._pending_task.push(o.id); this._pending_task.push(o.id);
this.trigger("loading", undefined); this.trigger("loading", undefined);
}); });
this.subscribe("loaded", (o: API.AnnouncementDataType<number>) => { this.subscribe("loaded", (o: API.AnnouncementDataType<number>) => {
const i = this._pending_task.indexOf(o.id); const i = this._pending_task.indexOf(o.id);
if (i >= 0) { if (i >= 0) {
@ -360,9 +342,6 @@ namespace OS {
* @memberof BaseApplication * @memberof BaseApplication
*/ */
blur(): void { blur(): void {
if (this.appmenu && this.pid === this.appmenu.pid) {
this.appmenu.items = [];
}
this.trigger("blur", undefined); this.trigger("blur", undefined);
if(this.dialog) if(this.dialog)
{ {
@ -414,9 +393,6 @@ namespace OS {
protected onexit(evt: BaseEvent): void { protected onexit(evt: BaseEvent): void {
this.cleanup(evt); this.cleanup(evt);
if (!evt.prevent) { if (!evt.prevent) {
if (this.pid === this.appmenu.pid) {
this.appmenu.items = [];
}
$(this.scheme).remove(); $(this.scheme).remove();
} }
} }

35
src/core/BaseDialog.ts
View File

@ -58,23 +58,16 @@ namespace OS {
} }
/** /**
* Exit the sub-window * Purge the model from the system
* *
* @returns {void} * @protected
* @memberof SubWindow * @memberof BaseModel
*/ */
quit(): void { protected destroy(): void
const evt = new BaseEvent("exit", false); {
this.onexit(evt);
if (!evt.prevent) {
delete this._observable;
if (this.scheme) { if (this.scheme) {
$(this.scheme).remove(); $(this.scheme).remove();
} }
if (this.dialog) {
return this.dialog.quit();
}
}
} }
/** /**
@ -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.resizable = false;
win.minimizable = false; win.minimizable = false;
win.menu = undefined;
$(win).trigger("focus"); $(win).trigger("focus");
} }
} }
@ -1216,9 +1223,8 @@ namespace OS {
*/ */
FileDialog.scheme = `\ FileDialog.scheme = `\
<afx-app-window width='400' height='300'> <afx-app-window width='400' height='300'>
<afx-hbox>
<afx-list-view data-id = "location" dropdown = "false" data-width = "120"></afx-list-view>
<afx-vbox> <afx-vbox>
<afx-list-view data-id = "location" dropdown = "true" data-height = "40"></afx-list-view>
<afx-file-view data-id = "fileview" view="tree" status = "false"></afx-file-view> <afx-file-view data-id = "fileview" view="tree" status = "false"></afx-file-view>
<input data-height = '26' type = "text" data-id = "filename" style="margin-left:5px; margin-right:5px;display:none;" ></input> <input data-height = '26' type = "text" data-id = "filename" style="margin-left:5px; margin-right:5px;display:none;" ></input>
<afx-hbox data-height = '30'> <afx-hbox data-height = '30'>
@ -1229,7 +1235,6 @@ namespace OS {
<div data-width="5"></div> <div data-width="5"></div>
</afx-hbox> </afx-hbox>
</afx-vbox> </afx-vbox>
</afx-hbox>
</afx-app-window>\ </afx-app-window>\
`; `;

18
src/core/BaseModel.ts
View File

@ -296,6 +296,8 @@ namespace OS {
this.on("exit", () => this.quit(false)); this.on("exit", () => this.quit(false));
this.host = this._gui.desktop(); this.host = this._gui.desktop();
this.dialog = undefined; 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} * @returns {void}
* @memberof BaseModel * @memberof BaseModel
*/ */
quit(force: boolean): void { quit(force: boolean = false): void {
const evt = new BaseEvent("exit", force); const evt = new BaseEvent("exit", force);
this.onexit(evt); this.onexit(evt);
if (!evt.prevent) { if (!evt.prevent) {
@ -346,10 +348,22 @@ namespace OS {
if (this.dialog) { if (this.dialog) {
this.dialog.quit(); 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 * Model meta data, need to be implemented by
* subclasses * subclasses

11
src/core/core.ts
View File

@ -807,6 +807,10 @@ namespace OS {
*/ */
export const REPOSITORY: string = "https://github.com/lxsang/antos"; 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. * Register a model prototype to the system namespace.
* There are two types of model to be registered, if the model * There are two types of model to be registered, if the model
@ -875,6 +879,7 @@ namespace OS {
export function boot(): void { export function boot(): void {
//first login //first login
console.log("Booting system"); console.log("Booting system");
// check whether we are on mobile device
API.handle API.handle
.auth() .auth()
.then(function (d: API.RequestResult) { .then(function (d: API.RequestResult) {
@ -1331,7 +1336,7 @@ namespace OS {
data.id = q; data.id = q;
data.message = p; data.message = p;
data.name = p; data.name = p;
data.u_data = PM.pidactive; data.u_data = 0; //PM.pidactive;
announcer.trigger("loading", data); announcer.trigger("loading", data);
} }
@ -1612,11 +1617,11 @@ namespace OS {
for (let k in searchHandle) { for (let k in searchHandle) {
const ret = searchHandle[k](text); const ret = searchHandle[k](text);
if (ret.length > 0) { if (ret.length > 0) {
ret.unshift({ /*ret.unshift({
text: k, text: k,
class: "search-header", class: "search-header",
dataid: "header", dataid: "header",
}); });*/
r = r.concat(ret); r = r.concat(ret);
} }
} }

32
src/core/gui.ts
View File

@ -94,7 +94,6 @@ namespace OS {
* is allowed at a time. A dialog may have sub dialog * is allowed at a time. A dialog may have sub dialog
*/ */
export var dialog: BaseDialog; export var dialog: BaseDialog;
/** /**
* Placeholder for system shortcuts * Placeholder for system shortcuts
*/ */
@ -192,7 +191,7 @@ namespace OS {
*/ */
export function systemDock(): GUI.tag.AppDockTag 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) { if (!meta.icon && !meta.iconclass) {
data.iconclass = "fa fa-cogs"; data.iconclass = "fa fa-cogs";
} }
const dock = $("#sysdock")[0] as tag.AppDockTag; const dock = systemDock();
app.sysdock = dock; app.sysdock = dock;
app.init(); app.init();
app.observable.one("rendered", function () { app.observable.one("rendered", function () {
app.appmenu = $(
"[data-id = 'appmenu']",
"#syspanel"
)[0] as tag.MenuTag;
dock.newapp(data); dock.newapp(data);
}); });
} }
@ -714,7 +709,7 @@ namespace OS {
* @returns * @returns
*/ */
export function undock(app: application.BaseApplication) { 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 { function bindContextMenu(event: JQuery.MouseEventBase): void {
var handle = function (e: HTMLElement) { var handle = function (e: HTMLElement) {
if (e.contextmenuHandle) { if (e.contextmenuHandle) {
const m = $("#contextmenu")[0] as tag.MenuTag; const m = $("#contextmenu")[0] as tag.StackMenuTag;
m.onmenuselect = () => { }; m.onmenuselect = () => { };
return e.contextmenuHandle(event, m); return e.contextmenuHandle(event, m);
} else { } else {
@ -896,9 +891,9 @@ namespace OS {
const scheme = $.parseHTML(schemes.ws); const scheme = $.parseHTML(schemes.ws);
$("#wrapper").append(scheme); $("#wrapper").append(scheme);
announcer.observable.one("sysdockloaded", () => { announcer.one("sysdockloaded", () => {
$(window).on("keydown", function (event) { $(window).on("keydown", function (event) {
const dock = $("#sysdock")[0] as tag.AppDockTag; const dock = systemDock();
if (!dock) { if (!dock) {
return; return;
} }
@ -939,10 +934,10 @@ namespace OS {
}); });
// system menu and dock // system menu and dock
$("#syspanel")[0].uify(undefined); $("#syspanel")[0].uify(undefined);
$("#sysdock")[0].uify(undefined);
$("#systooltip")[0].uify(undefined); $("#systooltip")[0].uify(undefined);
$("#contextmenu")[0].uify(undefined);
const ctxmenu = $("#contextmenu")[0];
ctxmenu.uify(undefined);
$("#wrapper").on("contextmenu", (e) => bindContextMenu(e)); $("#wrapper").on("contextmenu", (e) => bindContextMenu(e));
// tooltip // tooltip
$(document).on("mouseover", function (e) { $(document).on("mouseover", function (e) {
@ -1033,8 +1028,8 @@ namespace OS {
// load theme // load theme
loadTheme(setting.appearance.theme, true); loadTheme(setting.appearance.theme, true);
wallpaper(undefined); wallpaper(undefined);
OS.announcer.observable.one("syspanelloaded", async function () { OS.announcer.one("syspanelloaded", async function () {
OS.announcer.observable.on("systemlocalechange", (_) => OS.announcer.on("systemlocalechange", (_) =>
$("#syspanel")[0].update() $("#syspanel")[0].update()
); );
@ -1085,10 +1080,10 @@ namespace OS {
}); });
// initDM // initDM
API.setLocale(setting.system.locale).then(() => 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); 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); console.log(d.u_data);
}); });
} }
@ -1105,10 +1100,9 @@ namespace OS {
schemes.ws = `\ schemes.ws = `\
<afx-sys-panel id = "syspanel"></afx-sys-panel> <afx-sys-panel id = "syspanel"></afx-sys-panel>
<div id = "workspace"> <div id = "workspace">
<afx-apps-dock id="sysdock"></afx-apps-dock>
<afx-desktop id = "desktop" dir="vertical" ></afx-desktop> <afx-desktop id = "desktop" dir="vertical" ></afx-desktop>
</div> </div>
<afx-menu id="contextmenu" data-id="contextmenu" context="true" style="display:none;"></afx-menu> <afx-stack-menu id="contextmenu" data-id="contextmenu" context="true" style="display:none;"></afx-stack-menu>
<afx-label id="systooltip" data-id="systooltip" style="display:none;position:absolute;"></afx-label> <afx-label id="systooltip" data-id="systooltip" style="display:none;position:absolute;"></afx-label>
<textarea id="clipboard"></textarea>\ <textarea id="clipboard"></textarea>\
`; `;

2
src/core/pm.ts
View File

@ -139,7 +139,7 @@ namespace OS {
} else { } else {
GUI.detachservice(app as application.BaseService); GUI.detachservice(app as application.BaseService);
} }
announcer.unregister(app); // announcer.unregister(app);
delete PM.processes[app.name][i]; delete PM.processes[app.name][i];
PM.processes[app.name].splice(i, 1); PM.processes[app.name].splice(i, 1);
} }

4
src/core/tags/AppDockTag.ts
View File

@ -99,7 +99,7 @@ namespace OS {
} }
} }
if (i !== -1) { 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" "afx-button"
)[0] as any) as ButtonTag; )[0] as any) as ButtonTag;
const app = bt.data as application.BaseApplication; const app = bt.data as application.BaseApplication;
m.items = [ m.nodes = [
{ text: "__(New window)", dataid: "new" }, { text: "__(New window)", dataid: "new" },
{ text: "__(Show)", dataid: "show" }, { text: "__(Show)", dataid: "show" },
{ text: "__(Hide)", dataid: "hide" }, { text: "__(Hide)", dataid: "hide" },

17
src/core/tags/ButtonTag.ts
View File

@ -24,7 +24,22 @@ namespace OS {
* @type {GenericObject<any>} * @type {GenericObject<any>}
* @memberof ButtonTag * @memberof ButtonTag
*/ */
data: GenericObject<any>; private _data: GenericObject<any>;
/**
* Custom user data setter/gettter
*
* @memberof ButtonTag
*/
set data(v: GenericObject<any>)
{
this._data = v;
this.set(v);
}
get data(): GenericObject<any>
{
return this._data;
}
/** /**
*Creates an instance of ButtonTag. *Creates an instance of ButtonTag.

15
src/core/tags/DesktopTag.ts
View File

@ -87,7 +87,14 @@ namespace OS {
this.onready = (_) => { this.onready = (_) => {
this.observable = OS.announcer.observable; this.observable = OS.announcer.observable;
window.onresize = () => { window.onresize = () => {
announcer.trigger("desktopresize", undefined); const evt = {
id: this.aid,
data: {
width: $(this).width(),
height: $(this).height()
}
}
announcer.trigger("desktopresize", evt);
this.calibrate(); this.calibrate();
}; };
@ -134,8 +141,8 @@ namespace OS {
{ text: __("Refresh"), dataid: "desktop-refresh" } as GUI.BasicItemType, { text: __("Refresh"), dataid: "desktop-refresh" } as GUI.BasicItemType,
]; ];
menu = menu.concat(setting.desktop.menu.map(e => e)); menu = menu.concat(setting.desktop.menu.map(e => e));
m.items = menu; m.nodes = menu;
m.onmenuselect = (evt: TagEventType<tag.MenuEventData>) => { m.onmenuselect = (evt) => {
if (!evt.data || !evt.data.item) return; if (!evt.data || !evt.data.item) return;
const item = evt.data.item.data; const item = evt.data.item.data;
switch (item.dataid) { switch (item.dataid) {
@ -162,7 +169,7 @@ namespace OS {
}; };
this.refresh(); this.refresh();
announcer.observable.on("VFS", (d: API.AnnouncementDataType<API.VFS.BaseFileHandle>) => { announcer.on("VFS", (d: API.AnnouncementDataType<API.VFS.BaseFileHandle>) => {
if (["read", "publish", "download"].includes(d.message as string)) { if (["read", "publish", "download"].includes(d.message as string)) {
return; return;
} }

39
src/core/tags/FileViewTag.ts
View File

@ -27,6 +27,15 @@ namespace OS {
*/ */
private _onfileopen: TagEventCallback<API.FileInfoType>; private _onfileopen: TagEventCallback<API.FileInfoType>;
/**
* placeholder for directory changed event callback
*
* @private
* @type {TagEventCallback<API.VFS.BaseFileHandle>}
* @memberof FileViewTag
*/
private _ondirchanged: TagEventCallback<API.VFS.BaseFileHandle>;
/** /**
* Reference to the all selected files meta-datas * Reference to the all selected files meta-datas
* *
@ -92,6 +101,7 @@ namespace OS {
this.chdir = true; this.chdir = true;
this.view = "list"; this.view = "list";
this._onfileopen = this._onfileselect = (e) => { }; this._onfileopen = this._onfileselect = (e) => { };
this._ondirchanged = (e) => { };
this._selectedFiles = []; this._selectedFiles = [];
const fn = function(r1, r2, i) { const fn = function(r1, r2, i) {
let t1 = r1[i].text; let t1 = r1[i].text;
@ -115,17 +125,17 @@ namespace OS {
t1 = t1.toString().toLowerCase(); t1 = t1.toString().toLowerCase();
t2 = t2.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; }
if(t1 > t2) { return 1; } if(t1 > t2) { return 1; }
} }
else else
{ {
this.desc = ! this.desc;
if(t1 > t2) { return -1; } if(t1 > t2) { return -1; }
if(t1 < t2) { return 1; } if(t1 < t2) { return 1; };
} }
return 0; return 0;
}; };
@ -176,6 +186,17 @@ namespace OS {
this._onfileselect = e; this._onfileselect = e;
} }
/**
* set the callback handle for the directory changed event.
* The parameter of the callback should be an object
* of type [[TagEventType]]<T> with the data type `T` is [[API.VFS.BaseFileHandle]]
*
* @memberof FileViewTag
*/
set onchdir(e: TagEventCallback<API.VFS.BaseFileHandle>) {
this._ondirchanged = e;
}
/** /**
set the callback handle for the file open event. set the callback handle for the file open event.
* The parameter of the callback should be an object * The parameter of the callback should be an object
@ -352,6 +373,9 @@ namespace OS {
if (this.status) { if (this.status) {
(this.refs.status as LabelTag).text = " "; (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) => .catch((e: Error) =>
announcer.oserror(e.toString(), e) announcer.oserror(e.toString(), e)
@ -457,7 +481,7 @@ namespace OS {
let h = $(this).outerHeight(); let h = $(this).outerHeight();
const w = $(this).width(); const w = $(this).width();
if (this.status) { if (this.status) {
h -= $(this.refs.status).height() + 10; h -= $(this.refs.status).height();
} }
$(this.refs.listview).css("height", h + "px"); $(this.refs.listview).css("height", h + "px");
$(this.refs.gridview).css("height", h + "px"); $(this.refs.gridview).css("height", h + "px");
@ -647,7 +671,7 @@ namespace OS {
} }
if (this.status) { if (this.status) {
(this.refs.status as LabelTag).text = __( (this.refs.status as LabelTag).text = __(
"Selected: {0} ({1} bytes)", "{0} ({1} bytes)",
e.filename, e.filename,
e.size ? e.size : "0" e.size ? e.size : "0"
); );
@ -669,10 +693,11 @@ namespace OS {
e.type = "dir"; e.type = "dir";
e.mime = "dir"; e.mime = "dir";
} }
const evt = { id: this.aid, data: e };
if (e.type === "dir" && this.chdir) { if (e.type === "dir" && this.chdir) {
this.path = e.path; this.path = e.path;
} else { } else {
const evt = { id: this.aid, data: e };
this._onfileopen(evt); this._onfileopen(evt);
this.observable.trigger("fileopen", evt); this.observable.trigger("fileopen", evt);
} }

36
src/core/tags/FloatListTag.ts
View File

@ -48,30 +48,6 @@ namespace OS {
this._onready = v; 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 * Disable the dropdown option in this list
@ -164,9 +140,9 @@ namespace OS {
.css("cursor", "default") .css("cursor", "default")
.css("display", "block") .css("display", "block")
.css("position", "absolute") .css("position", "absolute")
.on("mousedown", (evt) => { .on("pointerdown", (evt) => {
const globalof = $(this.refs.mlist).offset(); const globalof = $(this.refs.mlist).offset();
evt.preventDefault(); //evt.preventDefault();
const offset = $(el).offset(); const offset = $(el).offset();
offset.top = evt.clientY - offset.top; offset.top = evt.clientY - offset.top;
offset.left = evt.clientX - offset.left; offset.left = evt.clientX - offset.left;
@ -184,11 +160,11 @@ namespace OS {
}; };
var mouse_up = function (e: JQuery.MouseEventBase) { var mouse_up = function (e: JQuery.MouseEventBase) {
$(window).off("mousemove", mouse_move); $(window).off("pointermove", mouse_move);
return $(window).off("mouseup", mouse_up); return $(window).off("pointerup", mouse_up);
}; };
$(window).on("mousemove", mouse_move); $(window).on("pointermove", mouse_move);
return $(window).on("mouseup", mouse_up); return $(window).on("pointerup", mouse_up);
}); });
} }

16
src/core/tags/GridViewTag.ts
View File

@ -279,7 +279,7 @@ namespace OS {
e: TagEventType<GridCellPrototype> e: TagEventType<GridCellPrototype>
): void => {}; ): void => {};
this.selected = false; this.selected = false;
$(this).css("display", "block"); //$(this).css("display", "block");
$(this).on("click",(e) => { $(this).on("click",(e) => {
let evt = { id: this.aid, data: this }; let evt = { id: this.aid, data: this };
return this.cellselect(evt, false); return this.cellselect(evt, false);
@ -683,6 +683,14 @@ namespace OS {
if(element.data.sort) if(element.data.sort)
{ {
this.sort(element.data, element.data.sort); this.sort(element.data, element.data.sort);
if(element.data.desc)
{
$(element).attr("sort", "desc");
}
else
{
$(element).attr("sort", "asc");
}
} }
}; };
i++; i++;
@ -752,6 +760,10 @@ namespace OS {
set rows(rows: GenericObject<any>[][]) { set rows(rows: GenericObject<any>[][]) {
this._rows = rows; this._rows = rows;
if(!rows) return; if(!rows) return;
for(const el of this._header)
{
$(el.domel).attr("sort", "none");
}
// update existing row with new data // update existing row with new data
const ndrows = rows.length; const ndrows = rows.length;
const ncrows = this.refs.grid.children.length; const ncrows = this.refs.grid.children.length;
@ -839,7 +851,7 @@ namespace OS {
return fn.call(context,a, b, index); return fn.call(context,a, b, index);
} }
this._rows.sort(__fn); this._rows.sort(__fn);
context.__f = ! context.__f; context.desc = ! context.desc;
this.rows = this._rows; this.rows = this._rows;
} }
/** /**

183
src/core/tags/ListViewTag.ts
View File

@ -173,6 +173,7 @@ namespace OS {
*/ */
protected mount(): void { protected mount(): void {
$(this.refs.item).attr("dataref", "afx-list-item"); $(this.refs.item).attr("dataref", "afx-list-item");
$(this).addClass("afx-list-item");
$(this.refs.item).on("contextmenu", (e) => { $(this.refs.item).on("contextmenu", (e) => {
this._onctxmenu({ id: this.aid, data: this }); this._onctxmenu({ id: this.aid, data: this });
}); });
@ -202,14 +203,22 @@ namespace OS {
* @memberof ListViewItemTag * @memberof ListViewItemTag
*/ */
protected layout(): TagLayoutType[] { 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 [ return [
{ {
el: "li", el: "li",
ref: "item", ref: "item",
children: [ children:children,
this.itemlayout(),
{ el: "i", class: "closable", ref: "btcl" },
],
}, },
]; ];
} }
@ -240,10 +249,10 @@ namespace OS {
* *
* @protected * @protected
* @abstract * @abstract
* @returns {TagLayoutType} * @returns {TagLayoutType | TagLayoutType[]}
* @memberof ListViewItemTag * @memberof ListViewItemTag
*/ */
protected abstract itemlayout(): TagLayoutType; protected abstract itemlayout(): TagLayoutType | TagLayoutType[];
/** /**
* This function is called when the item data is changed. * This function is called when the item data is changed.
@ -329,14 +338,101 @@ namespace OS {
* List item custom layout definition * List item custom layout definition
* *
* @protected * @protected
* @returns {TagLayoutType} * @returns {TagLayoutType | TagLayoutType[]}
* @memberof SimpleListItemTag * @memberof SimpleListItemTag
*/ */
protected itemlayout(): TagLayoutType { protected itemlayout(): TagLayoutType | TagLayoutType[] {
return { el: "afx-label", ref: "label" }; 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. * This tag defines a traditional or a dropdown list widget.
* It contains a collection of list items in which layout * It contains a collection of list items in which layout
@ -482,10 +578,8 @@ namespace OS {
this.dropdown = false; this.dropdown = false;
this.selected = -1; this.selected = -1;
this.dragndrop = false; this.dragndrop = false;
$(this)
.css("display", "flex")
.css("flex-direction", "column");
this.itemtag = "afx-list-item"; this.itemtag = "afx-list-item";
$(this).addClass("afx-list-view");
} }
/** /**
@ -508,7 +602,6 @@ namespace OS {
this.attsw(v, "dropdown"); this.attsw(v, "dropdown");
$(this.refs.container).removeAttr("style"); $(this.refs.container).removeAttr("style");
$(this.refs.mlist).removeAttr("style"); $(this.refs.mlist).removeAttr("style");
$(this.refs.container).css("flex", 1);
$(this).removeClass("dropdown"); $(this).removeClass("dropdown");
const drop = (e: any) => { const drop = (e: any) => {
return this.dropoff(e); return this.dropoff(e);
@ -521,14 +614,7 @@ namespace OS {
$(this.refs.current).show(); $(this.refs.current).show();
$(document).on("click", drop); $(document).on("click", drop);
$(this.refs.current).on("click", show); $(this.refs.current).on("click", show);
$(this.refs.container) $(this.refs.mlist).hide();
.css("position", "absolute")
.css("display", "inline-block");
$(this.refs.mlist)
.css("position", "absolute")
.css("display", "none")
.css("top", "100%")
.css("left", "0");
this.calibrate(); this.calibrate();
} else { } else {
$(this.refs.current).hide(); $(this.refs.current).hide();
@ -676,7 +762,28 @@ namespace OS {
(bt[0] as ButtonTag).set(item); (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 * Getter: Get data of the list
* *
@ -769,7 +876,13 @@ namespace OS {
get selectedItems(): ListViewItemTag[] { get selectedItems(): ListViewItemTag[] {
return this._selectedItems; return this._selectedItems;
} }
/**
* get the selected item index
*
* @readonly
* @type {number}
* @memberof ListViewTag
*/
get selected(): number | number[] { get selected(): number | number[] {
if (this.multiselect) { if (this.multiselect) {
return this.selectedItems.map(function ( return this.selectedItems.map(function (
@ -808,7 +921,7 @@ namespace OS {
* Add an item to the beginning or end of the list * Add an item to the beginning or end of the list
* *
* @param {GenericObject<any>} item list item data * @param {GenericObject<any>} 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 * @returns {ListViewItemTag} the added list item element
* @memberof ListViewTag * @memberof ListViewTag
*/ */
@ -832,6 +945,7 @@ namespace OS {
} }
el[0].uify(this.observable); el[0].uify(this.observable);
const element = el[0] as ListViewItemTag; const element = el[0] as ListViewItemTag;
$(element).attr("list-id",this.aid);
element.onctxmenu = (e) => { element.onctxmenu = (e) => {
return this.iclick(e, true); return this.iclick(e, true);
}; };
@ -955,12 +1069,12 @@ namespace OS {
/** /**
* This function triggers the double click event on an item * This function triggers the double click event on an item
* *
* @private * @protected
* @param {TagEventType} e tag event object * @param {TagEventType} e tag event object
* @returns * @returns
* @memberof ListViewTag * @memberof ListViewTag
*/ */
private idbclick(e: TagEventType<ListViewItemTag>) { protected idbclick(e: TagEventType<ListViewItemTag>) {
const evt: TagEventType<ListItemEventData> = { const evt: TagEventType<ListItemEventData> = {
id: this.aid, id: this.aid,
data: { item: e.data }, data: { item: e.data },
@ -972,12 +1086,12 @@ namespace OS {
/** /**
* This function triggers the list item select event * This function triggers the list item select event
* *
* @private * @protected
* @param {TagEventType} e tag event object * @param {TagEventType} e tag event object
* @returns * @returns
* @memberof ListViewTag * @memberof ListViewTag
*/ */
private iselect(e: TagEventType<ListViewItemTag>) { protected iselect(e: TagEventType<ListViewItemTag>) {
if (!e.data) { if (!e.data) {
return; return;
} }
@ -1167,16 +1281,22 @@ namespace OS {
if (!this.dropdown) { if (!this.dropdown) {
return; 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 = const offset =
$(this).offset().top + $(this.refs.mlist).height(); $(this).offset().top + $(this.refs.mlist).outerHeight()*1.5;
if (offset > desktoph) { if (offset > desktoph) {
$(this.refs.mlist).css( $(this.refs.mlist).css(
"top", "top",
`-${$(this.refs.mlist).outerHeight()}px` `-${$(this.refs.mlist).outerHeight()}px`
); );
} else { } else {
$(this.refs.mlist).css("top", "100%"); $(this.refs.mlist).css("top", "98%");
} }
$(this.refs.mlist).show(); $(this.refs.mlist).show();
} }
@ -1208,7 +1328,9 @@ namespace OS {
return; return;
} }
const w = `${$(this).width()}px`; const w = `${$(this).width()}px`;
const h = `${$(this).outerHeight()}px`;
$(this.refs.container).css("width", w); $(this.refs.container).css("width", w);
$(this.refs.container).css("height", h);
$(this.refs.current).css("width", w); $(this.refs.current).css("width", w);
$(this.refs.mlist).css("width", w); $(this.refs.mlist).css("width", w);
} }
@ -1244,6 +1366,7 @@ namespace OS {
define("afx-list-view", ListViewTag); define("afx-list-view", ListViewTag);
define("afx-list-item", SimpleListItemTag); define("afx-list-item", SimpleListItemTag);
define("afx-dbline-list-item", DoubleLineListItemTag);
} }
} }
} }

32
src/core/tags/NSpinnerTag.ts
View File

@ -114,38 +114,6 @@ namespace OS {
* @memberof NSpinnerTag * @memberof NSpinnerTag
*/ */
calibrate(): void { 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");
} }
/** /**

4
src/core/tags/OverlayTag.ts
View File

@ -127,7 +127,9 @@ namespace OS {
* @memberof OverlayTag * @memberof OverlayTag
*/ */
calibrate(): void { 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", { return this.observable.trigger("resize", {
id: this.aid, id: this.aid,
data: { data: {

18
src/core/tags/ResizerTag.ts
View File

@ -104,7 +104,7 @@ namespace OS {
set dir(v: string) { set dir(v: string) {
let att: string; let att: string;
$(this).attr("dir", v); $(this).attr("dir", v);
$(this).off("mousedown", null); $(this).off("pointerdown", null);
if (v === "hz") { if (v === "hz") {
$(this).css("cursor", "col-resize"); $(this).css("cursor", "col-resize");
$(this).addClass("horizontal"); $(this).addClass("horizontal");
@ -208,24 +208,24 @@ namespace OS {
if (!this.dir || this.dir == "none") { if (!this.dir || this.dir == "none") {
return; return;
} }
$(this).on("mousedown", (e) => { $(this).on("pointerdown", (e) => {
e.preventDefault(); e.preventDefault();
$(window).on("mousemove", (evt) => { $(window).on("pointermove", (evt) => {
if (!this._resizable_el) { if (!this._resizable_el) {
return; return;
} }
if (this.dir === "hz") { if (this.dir === "hz") {
return this.horizontalResize(evt); return this.horizontalResize(evt as JQuery.MouseEventBase);
} else if (this.dir === "ve") { } else if (this.dir === "ve") {
return this.verticalResize(evt); return this.verticalResize(evt as JQuery.MouseEventBase);
} }
}); });
return $(window).on("mouseup", function (evt) { return $(window).on("pointerup", function (evt) {
$(window).off("mousemove", null); $(window).off("pointermove", null);
$(window).off("mouseup", null); $(window).off("pointerup", null);
return $(window).off("mouseup", null); return $(window).off("pointerup", null);
}); });
}); });
} }

52
src/core/tags/SliderTag.ts
View File

@ -65,6 +65,7 @@ namespace OS {
this.enable = true; this.enable = true;
this._max = 100; this._max = 100;
this._value = 0; this._value = 0;
this.precision = false;
this._onchange = this._onchanging = () => {}; this._onchange = this._onchanging = () => {};
} }
@ -98,7 +99,17 @@ namespace OS {
set onvaluechanging(f: TagEventCallback<number>) { set onvaluechanging(f: TagEventCallback<number>) {
this._onchanging = f; 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 * Setter: Enable/disable the slider
* *
@ -110,15 +121,15 @@ namespace OS {
this.attsw(v, "enable"); this.attsw(v, "enable");
if (v) { if (v) {
$(this) $(this)
.on("mouseover",() => { .on("pointerover",() => {
return $(this.refs.point).show(); return $(this.refs.point).show();
}) })
.on("mouseout",() => { .on("pointerout",() => {
return $(this.refs.point).hide(); return $(this.refs.point).hide();
}); });
} else { } else {
$(this.refs.point).hide(); $(this.refs.point).hide();
$(this).off("mouseover").off("mouseout"); $(this).off("pointerover").off("pointerout");
} }
} }
get enable(): boolean { get enable(): boolean {
@ -188,7 +199,16 @@ namespace OS {
*/ */
calibrate(): void { calibrate(): void {
if (this.value > this.max) { 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"); $(this.refs.container).css("width", $(this).width() + "px");
const w = const w =
@ -197,17 +217,17 @@ namespace OS {
$(this.refs.prg) $(this.refs.prg)
.css("width", w + "px") .css("width", w + "px")
.css("height", $(this.refs.container).height() + "px"); .css("height", $(this.refs.container).height() + "px");
if (this.enable) { //if (this.enable) {
const ow = w - $(this.refs.point).width() / 2; const ow = w - ($(this.refs.point).outerWidth() / 2.0);
const top = Math.floor( const top = Math.floor(
($(this.refs.prg).height() - ($(this.refs.prg).height() +
$(this.refs.point).height()) / $(this.refs.point).height()) /
2 2 + 3
); );
$(this.refs.point) $(this.refs.point)
.css("left", ow + "px") .css("left", ow + "px")
.css("top", top + "px"); .css("bottom", top + "px");
} //}
} }
/** /**
@ -220,10 +240,10 @@ namespace OS {
$(this.refs.point) $(this.refs.point)
.css("user-select", "none") .css("user-select", "none")
.css("cursor", "default"); .css("cursor", "default");
$(this.refs.point).on("mousedown", (e) => { $(this).on("pointerdown", (e) => {
e.preventDefault(); e.preventDefault();
const offset = $(this.refs.container).offset(); const offset = $(this.refs.container).offset();
$(window).on("mousemove", (e) => { $(window).on("pointermove", (e) => {
let left = e.clientX - offset.left; let left = e.clientX - offset.left;
left = left < 0 ? 0 : left; left = left < 0 ? 0 : left;
const maxw = $(this.refs.container).width(); const maxw = $(this.refs.container).width();
@ -236,13 +256,13 @@ namespace OS {
}); });
}); });
$(window).on("mouseup", (e) => { $(window).on("pointerup", (e) => {
this._onchange({ this._onchange({
id: this.aid, id: this.aid,
data: this.value, data: this.value,
}); });
$(window).off("mousemove", null); $(window).off("pointermove", null);
return $(window).off("mouseup", null); return $(window).off("pointerup", null);
}); });
}); });
} }

553
src/core/tags/StackMenuTag.ts Normal file
View File

@ -0,0 +1,553 @@
namespace OS {
export namespace GUI {
export namespace tag {
/**
* menu event data type definition
*/
export type StackMenuEventData = TagEventDataType<ListViewItemTag>;
/**
* 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<any>[][]}
* @memberof StackMenuTag
*/
private stack: GenericObject<any>[][];
/**
* 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<TabEventData>}
* @memberof StackMenuTag
*/
private _onmenuselect: TagEventCallback<StackMenuEventData>;
/**
* 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<any>[]) {
this.nodes = v;
}
get items(): GenericObject<any>[] {
return this.nodes;
}
/**
* Setter: Set the menu data
*
* Getter: Get the menu data
*
* @memberof StackMenuTag
*/
set nodes(v: GenericObject<any>[]) {
this.stack = [];
this.reset();
(this.refs.list as ListViewTag).data = v;
$(this.refs.title).hide();
}
get nodes(): GenericObject<any>[] {
return (this.refs.list as ListViewTag).data;
}
/**
* Set the `menu entry select` event handle
*
* @memberof StackMenuTag
*/
set onmenuselect(v: TagEventCallback<StackMenuEventData>) {
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);
}
}
}

69
src/core/tags/SystemPanelTag.ts
View File

@ -142,21 +142,21 @@ namespace OS {
*/ */
private search(e: JQuery.KeyboardEventBase): void { private search(e: JQuery.KeyboardEventBase): void {
const applist = this.refs.applist as ListViewTag; const applist = this.refs.applist as ListViewTag;
const catlist = this.refs.catlist as ListViewTag; const catlist = this.refs.catlist as TabBarTag;
switch (e.which) { switch (e.which) {
case 27: case 27:
// escape key // escape key
return this.toggle(false); return this.toggle(false);
case 37: case 37:
return e.preventDefault();
case 38:
applist.selectPrev(); applist.selectPrev();
return e.preventDefault(); return e.preventDefault();
case 38:
return e.preventDefault();
case 39: case 39:
applist.selectNext();
return e.preventDefault(); return e.preventDefault();
case 40: case 40:
applist.selectNext();
return e.preventDefault(); return e.preventDefault();
case 13: case 13:
e.preventDefault(); e.preventDefault();
@ -216,10 +216,9 @@ namespace OS {
class: "afx-panel-os-pinned-app", class: "afx-panel-os-pinned-app",
}, },
{ {
el: "afx-menu", el: "afx-apps-dock",
id: "appmenu", ref: "sysdock",
ref: "appmenu", id: "sysdock"
class: "afx-panel-os-app",
}, },
{ {
el: "afx-menu", el: "afx-menu",
@ -247,17 +246,13 @@ namespace OS {
], ],
}, },
{ {
el: "afx-hbox", el: "afx-vbox",
children: [ children: [
{ {
el: "afx-list-view", el: "afx-tab-bar",
id: "catlist", id: "catlist",
ref: "catlist", ref: "catlist",
width:"40%" height:45
},
{
el: "afx-resizer",
width: 3,
}, },
{ {
el: "afx-list-view", el: "afx-list-view",
@ -269,7 +264,7 @@ namespace OS {
{ {
el: "afx-hbox", el: "afx-hbox",
id: "btlist", id: "btlist",
height: 30, height: 40,
children: [ children: [
{ {
el: "afx-button", el: "afx-button",
@ -293,6 +288,7 @@ namespace OS {
}, },
], ],
}, },
]; ];
} }
@ -304,7 +300,7 @@ namespace OS {
* @memberof SystemPanelTag * @memberof SystemPanelTag
*/ */
private refreshAppList(): void { 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; let k: string, v: API.PackageMetaType;
const catlist = new Set(); const catlist = new Set();
this.app_list = []; this.app_list = [];
@ -349,7 +345,7 @@ namespace OS {
iconclass: "bi bi-gear-wide" iconclass: "bi bi-gear-wide"
}); });
}); });
catlist_el.data = cat_list_data; catlist_el.items = cat_list_data;
catlist_el.selected = 0; catlist_el.selected = 0;
} }
@ -369,7 +365,7 @@ namespace OS {
this.calibrate(); this.calibrate();
$(document).on("click", this._cb); $(document).on("click", this._cb);
(this.refs.search as HTMLInputElement).value = ""; (this.refs.search as HTMLInputElement).value = "";
$(this.refs.search).trigger("focus"); $(this.refs.search).focus();
} else { } else {
$(this.refs.overlay).hide(); $(this.refs.overlay).hide();
$(document).off("click", this._cb); $(document).off("click", this._cb);
@ -445,11 +441,8 @@ namespace OS {
!$(e.target).closest(this.refs.osmenu).length !$(e.target).closest(this.refs.osmenu).length
) { ) {
return this.toggle(false); 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.systray).css("z-index", 1000000);
(this.refs.btscreen as ButtonTag).set({ (this.refs.btscreen as ButtonTag).set({
iconclass: "fa fa-tv", iconclass: "fa fa-tv",
@ -476,7 +469,14 @@ namespace OS {
}, },
}); });
(this.refs.osmenu as MenuTag).onmenuselect = (e) => { (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) => { $(this.refs.search).on("keyup", (e) => {
@ -493,8 +493,8 @@ namespace OS {
return this.toggle(false); return this.toggle(false);
} }
}); });
const catlist = (this.refs.catlist as tag.ListViewTag); const catlist = (this.refs.catlist as tag.TabBarTag);
catlist.onlistselect = (e) => { catlist.ontabselect = (e) => {
const applist = (this.refs.applist as ListViewTag); const applist = (this.refs.applist as ListViewTag);
if(catlist.selected === 0) if(catlist.selected === 0)
{ {
@ -510,9 +510,6 @@ namespace OS {
applist.selected = -1; applist.selected = -1;
}; };
$(this.refs.overlay) $(this.refs.overlay)
.css("left", 0)
.css("top", `${$(this.refs.panel).height()}px`)
.css("bottom", "0")
.hide(); .hide();
(this.refs.pinned as GUI.tag.MenuTag).onmenuselect = (e) => { (this.refs.pinned as GUI.tag.MenuTag).onmenuselect = (e) => {
const app = e.data.item.data.app; const app = e.data.item.data.app;
@ -520,7 +517,6 @@ namespace OS {
return; return;
GUI.launch(app, []); GUI.launch(app, []);
}; };
this.refs.appmenu.contextmenuHandle = (e, m) => { }
this.refs.osmenu.contextmenuHandle = (e, m) => { } this.refs.osmenu.contextmenuHandle = (e, m) => { }
this.refs.systray.contextmenuHandle = (e, m) => { } this.refs.systray.contextmenuHandle = (e, m) => { }
this.refs.pinned.contextmenuHandle = (e, m) => { } this.refs.pinned.contextmenuHandle = (e, m) => { }
@ -528,18 +524,16 @@ namespace OS {
let menu = [ let menu = [
{ text: __("Applications and services setting"), dataid: "app&srv" } { text: __("Applications and services setting"), dataid: "app&srv" }
]; ];
m.items = menu; m.nodes = menu;
m.onmenuselect = function ( m.onmenuselect = (evt) => {
evt: TagEventType<tag.MenuEventData>
) {
GUI.launch("Setting",[]); GUI.launch("Setting",[]);
} }
m.show(e); m.show(e);
}; };
announcer.observable.on("app-pinned", (_) => { announcer.on("app-pinned", (_) => {
this.RefreshPinnedApp(); this.RefreshPinnedApp();
}); });
announcer.observable.on("loading", (o: API.AnnouncementDataType<number>) => { announcer.on("loading", (o: API.AnnouncementDataType<number>) => {
if(o.u_data != 0) if(o.u_data != 0)
{ {
return; return;
@ -550,7 +544,7 @@ namespace OS {
$(GUI.workspace).css("cursor", "wait"); $(GUI.workspace).css("cursor", "wait");
}); });
announcer.observable.on("loaded", (o: API.AnnouncementDataType<number>) => { announcer.on("loaded", (o: API.AnnouncementDataType<number>) => {
const i = this._pending_task.indexOf(o.id); const i = this._pending_task.indexOf(o.id);
if (i >= 0) { if (i >= 0) {
this._pending_task.splice(i, 1); this._pending_task.splice(i, 1);
@ -561,6 +555,9 @@ namespace OS {
this._loading_toh = setTimeout(() => this.animation_check(),1000); this._loading_toh = setTimeout(() => this.animation_check(),1000);
} }
}); });
announcer.on("desktopresize", (e) => {
this.calibrate();
});
this.RefreshPinnedApp(); this.RefreshPinnedApp();
Ant.OS.announcer.trigger("syspanelloaded", undefined); Ant.OS.announcer.trigger("syspanelloaded", undefined);
} }

76
src/core/tags/TabBarTag.ts
View File

@ -39,6 +39,13 @@ namespace OS {
*/ */
private _ontabselect: TagEventCallback<TabEventData>; private _ontabselect: TagEventCallback<TabEventData>;
/**
* Cache of touch event
*
* @private
* @meberof TabBarTag
*/
private _previous_touch: {x: number, y: number};
/** /**
*Creates an instance of TabBarTag. *Creates an instance of TabBarTag.
* @memberof TabBarTag * @memberof TabBarTag
@ -57,6 +64,8 @@ namespace OS {
*/ */
protected init(): void { protected init(): void {
this.selected = -1; this.selected = -1;
this.dir = "horizontal";
this._previous_touch = {x: 0, y:0};
} }
/** /**
@ -82,6 +91,30 @@ namespace OS {
return this.hasattr("closable"); 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 * Add a tab in the end of the tab bar
* *
@ -144,6 +177,16 @@ namespace OS {
get selected(): number | number[] { get selected(): number | number[] {
return (this.refs.list as ListViewTag).selected; 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 * Set the tab close event handle
@ -179,6 +222,39 @@ namespace OS {
this._ontabselect(e); this._ontabselect(e);
return this.observable.trigger("tabselect", 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;
}
});
});
} }
/** /**

15
src/core/tags/TabContainerTag.ts
View File

@ -129,6 +129,14 @@ namespace OS {
return; return;
} }
(this.refs.wrapper as TileLayoutTag).dir = v; (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" { get dir(): "row" | "column" {
return $(this).attr("dir") as any; return $(this).attr("dir") as any;
@ -175,7 +183,7 @@ namespace OS {
return; return;
} }
$(this.refs.bar).attr("data-width", `${v}`); $(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 * @memberof TabContainerTag
*/ */
set tabbarheight(v: number) { set tabbarheight(v: number) {
if (!v) {
return;
}
$(this.refs.bar).attr("data-height", `${v}`); $(this.refs.bar).attr("data-height", `${v}`);
(this.refs.wrapper as TileLayoutTag).calibrate(); this.observable.trigger("resize", undefined);
} }
/** /**

13
src/core/tags/TileLayoutTags.ts
View File

@ -128,9 +128,7 @@ namespace OS {
private hcalibrate(): void { private hcalibrate(): void {
const auto_width = []; const auto_width = [];
let ocwidth = 0; let ocwidth = 0;
const avaiheight = $(this).height();
const avaiWidth = $(this).width(); const avaiWidth = $(this).width();
//$(this.refs.yield).css("height", `${avaiheight}px`);
$(this.refs.yield) $(this.refs.yield)
.children() .children()
.each(function (e) { .each(function (e) {
@ -160,10 +158,6 @@ namespace OS {
$(v).css("width", `${csize}px`) $(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 = []; const auto_height = [];
let ocheight = 0; let ocheight = 0;
const avaiheight = $(this).height(); const avaiheight = $(this).height();
const avaiwidth = $(this).width();
//$(this.refs.yield).css("height", `${avaiheight}px`);
$(this.refs.yield) $(this.refs.yield)
.children() .children()
.each(function (e) { .each(function (e) {
@ -209,11 +201,6 @@ namespace OS {
$(v).css("height", `${csize}px`) $(v).css("height", `${csize}px`)
); );
} }
return this.observable.trigger("vboxchange", {
id: this.aid,
data: { w: avaiwidth, h: avaiheight },
});
} }
/** /**

4
src/core/tags/TreeViewTag.ts
View File

@ -380,7 +380,7 @@ namespace OS {
.css("flex-direction", "row") .css("flex-direction", "row")
.css("align-items", "center") .css("align-items", "center")
.css("white-space", "nowrap"); .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.refs.wrapper).on("click",(e) => {
this.selected = true; this.selected = true;
}); });
@ -390,7 +390,7 @@ namespace OS {
}); });
$(this.refs.toggle) $(this.refs.toggle)
.css("display", "inline-block") //.css("display", "inline-block")
.css("width", "15px") .css("width", "15px")
.css("flex-shrink", 0) .css("flex-shrink", 0)
.addClass("afx-tree-view-item") .addClass("afx-tree-view-item")

200
src/core/tags/WindowTag.ts
View File

@ -63,6 +63,14 @@ namespace OS {
*/ */
private _history: GenericObject<any>; private _history: GenericObject<any>;
/**
* 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 * This placeholder stores the offset of the virtual desktop element
* *
@ -96,7 +104,15 @@ namespace OS {
get blur_overlay(): boolean { get blur_overlay(): boolean {
return this.hasattr("blur-overlay"); 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 * Init window tag
* - `shown`: false * - `shown`: false
@ -117,6 +133,7 @@ namespace OS {
this.minimizable = true; this.minimizable = true;
this.resizable = true; this.resizable = true;
this.apptitle = "Untitled"; this.apptitle = "Untitled";
this._onmenuopen = undefined;
} }
/** /**
@ -175,6 +192,24 @@ namespace OS {
return this._height; return this._height;
} }
/**
* Set the application menu content
*
* @memberof WindowTag
*/
set menu(v: GenericObject<any>[])
{
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 * Setter: enable/disable window minimizable
* *
@ -262,22 +297,56 @@ namespace OS {
* @memberof WindowTag * @memberof WindowTag
*/ */
protected mount(): void { 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.contextmenuHandle = function (e) { };
$(this.refs["minbt"]).on("click", (e) => { min_btn.onbtclick =(_) => {
return this.observable.trigger("hide", { return this.observable.trigger("hide", {
id: this.aid, id: this.aid,
}); });
}); };
btn_menu.onbtclick = (e) => {
$(this.refs["maxbt"]).on("click", (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(); return this.toggle_window();
}); };
$(this.refs["closebt"]).on("click", (e) => { close_btn.onbtclick = (_) => {
return this.observable.trigger("exit", { return this.observable.trigger("exit", {
id: this.aid, id: this.aid,
}); });
}); };
stackmenu.onmenuselect = (e) => {
if(!e.data.item.data.nodes)
{
stackmenu.selected = -1;
}
}
const left = ($(this.desktop).width() - this.width) / 2; const left = ($(this.desktop).width() - this.width) / 2;
const top = ($(this.desktop).height() - this.height) / 2; const top = ($(this.desktop).height() - this.height) / 2;
$(this) $(this)
@ -285,7 +354,7 @@ namespace OS {
.css("left", `${left}px`) .css("left", `${left}px`)
.css("top", `${top}px`) .css("top", `${top}px`)
.css("z-index", 10); .css("z-index", 10);
$(this).on("mousedown", (e) => { $(this).on("pointerdown", (e) => {
if (this._shown) { if (this._shown) {
return; return;
} }
@ -293,7 +362,6 @@ namespace OS {
id: this.aid, id: this.aid,
}); });
}); });
//$(this.refs.win_overlay).css("background-color", "red");
$(this.refs["dragger"]).on("dblclick", (e) => { $(this.refs["dragger"]).on("dblclick", (e) => {
return this.toggle_window(); return this.toggle_window();
}); });
@ -347,7 +415,26 @@ namespace OS {
h: this.height, h: this.height,
}); });
$(this).attr("tabindex", 0).css("outline", "none"); $(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, id: this.aid,
}); });
} }
@ -384,12 +471,12 @@ namespace OS {
$(this.refs["dragger"]) $(this.refs["dragger"])
.css("user-select", "none") .css("user-select", "none")
.css("cursor", "default"); .css("cursor", "default");
$(this.refs["dragger"]).on("mousedown", (e) => { $(this.refs.dragger).on("pointerdown", (e) => {
e.preventDefault(); //e.preventDefault();
const offset = $(this).offset(); const offset = $(this).offset();
offset.top = e.clientY - offset.top; offset.top = e.clientY - offset.top;
offset.left = e.clientX - offset.left; offset.left = e.clientX - offset.left;
$(window).on("mousemove", (e) => { $(window).on("pointermove", (e) => {
$(this.refs.win_overlay).show(); $(this.refs.win_overlay).show();
let left: number, top: number; let left: number, top: number;
if (this._isMaxi) { if (this._isMaxi) {
@ -415,10 +502,10 @@ namespace OS {
.css("top", `${top}px`) .css("top", `${top}px`)
.css("left", `${left}px`); .css("left", `${left}px`);
}); });
return $(window).on("mouseup", (e) => { return $(window).on("pointerup", (e) => {
$(this.refs.win_overlay).hide(); $(this.refs.win_overlay).hide();
$(window).off("mousemove", null); $(window).off("pointermove", null);
return $(window).off("mouseup", null); return $(window).off("pointerup", null);
}); });
}); });
} }
@ -452,32 +539,32 @@ namespace OS {
} }
const mouse_up_hdl = (e) => { const mouse_up_hdl = (e) => {
$(this.refs.win_overlay).hide(); $(this.refs.win_overlay).hide();
$(window).off("mousemove", mouse_move_hdl); $(window).off("pointermove", mouse_move_hdl);
return $(window).off("mouseup", mouse_up_hdl); return $(window).off("pointerup", mouse_up_hdl);
} }
$(this.refs["grip"]).on("mousedown", (e) => { $(this.refs["grip"]).on("pointerdown", (e) => {
e.preventDefault(); e.preventDefault();
offset.top = e.clientY; offset.top = e.clientY;
offset.left = e.clientX; offset.left = e.clientX;
target = this.refs.grip; target = this.refs.grip;
$(window).on("mousemove", mouse_move_hdl); $(window).on("pointermove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl); $(window).on("pointerup", mouse_up_hdl);
}); });
$(this.refs.grip_bottom).on("mousedown", (e) => { $(this.refs.grip_bottom).on("pointerdown", (e) => {
e.preventDefault(); e.preventDefault();
offset.top = e.clientY; offset.top = e.clientY;
offset.left = e.clientX; offset.left = e.clientX;
target = this.refs.grip_bottom; target = this.refs.grip_bottom;
$(window).on("mousemove", mouse_move_hdl); $(window).on("pointermove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl); $(window).on("pointerup", mouse_up_hdl);
}); });
$(this.refs.grip_right).on("mousedown", (e) => { $(this.refs.grip_right).on("pointerdown", (e) => {
e.preventDefault(); e.preventDefault();
offset.top = e.clientY; offset.top = e.clientY;
offset.left = e.clientX; offset.left = e.clientX;
target = this.refs.grip_right; target = this.refs.grip_right;
$(window).on("mousemove", mouse_move_hdl); $(window).on("pointermove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl); $(window).on("pointerup", mouse_up_hdl);
}); });
} }
/** /**
@ -488,9 +575,9 @@ namespace OS {
* @returns {void} * @returns {void}
* @memberof WindowTag * @memberof WindowTag
*/ */
private toggle_window(): void { private toggle_window(force?: boolean): void {
let h: number, w: number; let h: number, w: number;
if (!this.resizable) { if (!this.resizable && !force) {
return; return;
} }
if (this._isMaxi === false) { if (this._isMaxi === false) {
@ -500,8 +587,8 @@ namespace OS {
width: $(this).css("width"), width: $(this).css("width"),
height: $(this).css("height"), height: $(this).css("height"),
}; };
w = $(this.desktop).width(); w = $(this.desktop).width() - 2;
h = $(this.desktop).height(); h = $(this.desktop).height() - 2;
$(this).css("top", "0").css("left", "0"); $(this).css("top", "0").css("left", "0");
this.setsize({ w, h }); this.setsize({ w, h });
this._isMaxi = true; this._isMaxi = true;
@ -538,18 +625,12 @@ namespace OS {
children: [ children: [
{ {
el: "li", el: "li",
class: "afx-window-close", children: [
ref: "closebt",
},
{ {
el: "li", el: "afx-button",
class: "afx-window-minimize", ref: "btnMenu",
ref: "minbt",
}, },
{ ],
el: "li",
class: "afx-window-maximize",
ref: "maxbt",
}, },
{ {
el: "li", 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", el: "div",
ref: "yield", ref: "yield",
@ -590,6 +700,10 @@ namespace OS {
ref: "win_overlay", ref: "win_overlay",
class: "afx-window-overlay", class: "afx-window-overlay",
}, },
{
el: "afx-stack-menu",
ref: "stackmenu"
}
], ],
}, },
]; ];

4
src/core/tags/tag.ts
View File

@ -24,10 +24,10 @@ interface HTMLElement {
* defined on any child of this element will be ignored. * defined on any child of this element will be ignored.
* *
* @param {JQuery.MouseEventBase} e a mouse event * @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 * @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 * Mount the element and all the children on its DOM subtree. This action

6
src/packages/Files/main.css
View File

@ -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{ afx-app-window[data-id ='files-app-window'] button{
height: 23px;
border-radius: 0; border-radius: 0;
padding-top:2px;
}
afx-app-window[data-id ='files-app-window'] input{
border-radius: 3px;
} }

119
src/packages/Files/main.ts
View File

@ -37,7 +37,6 @@ namespace OS {
*/ */
export class Files extends BaseApplication { export class Files extends BaseApplication {
private view: GUI.tag.FileViewTag; private view: GUI.tag.FileViewTag;
private navinput: HTMLInputElement;
private navbar: GUI.tag.HBoxTag; private navbar: GUI.tag.HBoxTag;
private currdir: API.VFS.BaseFileHandle; private currdir: API.VFS.BaseFileHandle;
private favo: GUI.tag.ListViewTag; private favo: GUI.tag.ListViewTag;
@ -57,13 +56,7 @@ namespace OS {
*/ */
main(): void { main(): void {
this.view = this.find("fileview") as GUI.tag.FileViewTag; 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; 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.favo = this.find("favouri") as GUI.tag.ListViewTag;
this.clipboard = undefined; this.clipboard = undefined;
this.viewType = this._api.switcher("icon", "list", "tree"); this.viewType = this._api.switcher("icon", "list", "tree");
@ -93,7 +86,7 @@ namespace OS {
ctx_menu.unshift( { ctx_menu.unshift( {
text: "__(Open with)", text: "__(Open with)",
nodes: apps, nodes: apps,
onchildselect: (e: GUI.TagEventType<GUI.tag.MenuEventData>) => { onchildselect: (e: GUI.TagEventType<GUI.tag.StackMenuEventData>) => {
if (!e) { if (!e) {
return; return;
} }
@ -106,7 +99,7 @@ namespace OS {
ctx_menu = ctx_menu.concat([ ctx_menu = ctx_menu.concat([
{ {
text: "__(Extract Here)", text: "__(Extract Here)",
onmenuselect: (e: GUI.TagEventType<GUI.tag.MenuEventData>) => { onmenuselect: (e: GUI.TagEventType<GUI.tag.StackMenuEventData>) => {
if (!e) { if (!e) {
return; return;
} }
@ -117,7 +110,7 @@ namespace OS {
}, },
{ {
text: "__(Extract to)", text: "__(Extract to)",
onmenuselect: async (e: GUI.TagEventType<GUI.tag.MenuEventData>) => { onmenuselect: async (e: GUI.TagEventType<GUI.tag.StackMenuEventData>) => {
if (!e) { if (!e) {
return; return;
} }
@ -144,7 +137,7 @@ namespace OS {
ctx_menu.push( ctx_menu.push(
{ {
text: "__(Compress)", text: "__(Compress)",
onmenuselect: async (e: GUI.TagEventType<GUI.tag.MenuEventData>) => { onmenuselect: async (e: GUI.TagEventType<GUI.tag.StackMenuEventData>) => {
if (!e) { if (!e) {
return; return;
} }
@ -171,7 +164,7 @@ namespace OS {
} }
} }
m.items = ctx_menu; m.nodes = ctx_menu;
m.show(e); m.show(e);
}; };
@ -186,6 +179,10 @@ namespace OS {
}; };
this.favo.onlistselect = (e) => { this.favo.onlistselect = (e) => {
if(this.currdir.path == e.data.item.data.path)
{
return;
}
return this.view.path = e.data.item.data.path; return this.view.path = e.data.item.data.path;
}; };
@ -198,12 +195,6 @@ namespace OS {
return this.view.path = p.path; 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) => { this.view.fetch = (path) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let dir = path.asFileHandle(); let dir = path.asFileHandle();
@ -213,15 +204,41 @@ namespace OS {
if (d.error) { if (d.error) {
return reject(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); return resolve(d.result);
}) })
.catch((e) => reject(__e(e))); .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.vfs_event_flag = true;
this.view.ondragndrop = async (e) => { this.view.ondragndrop = async (e) => {
if (!e) { if (!e) {
@ -272,11 +289,6 @@ namespace OS {
} }
this.vfs_event_flag = true; this.vfs_event_flag = true;
}; };
// application setting
if (this.setting.sidebar === undefined) {
this.setting.sidebar = true;
}
if (this.setting.nav === undefined) { if (this.setting.nav === undefined) {
this.setting.nav = true; this.setting.nav = true;
} }
@ -286,19 +298,16 @@ namespace OS {
this.applyAllSetting(); this.applyAllSetting();
// VFS mount point and event // VFS mount point and event
const mntpoints = []; const mntpoints = this.systemsetting.VFS.mountpoints.map(e => {
for(let v of this.systemsetting.VFS.mountpoints) return {
{ text: e.text,
mntpoints.push({ path: e.path,
text: v.text, icon: e.icon,
path: v.path, iconclass: e.iconclass,
icon: v.icon,
iconclass: v.iconclass,
selected: false selected: false
});
} }
});
this.favo.data = mntpoints; this.favo.data = mntpoints;
//@favo.set "selected", -1
if (this.setting.view) { if (this.setting.view) {
this.view.view = this.setting.view; this.view.view = this.setting.view;
} }
@ -387,6 +396,11 @@ namespace OS {
this.view.multiselect = false; 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; this.view.path = this.currdir.path;
} }
@ -397,8 +411,6 @@ namespace OS {
return this.view.showhidden = this.setting.showhidden; return this.view.showhidden = this.setting.showhidden;
case "nav": case "nav":
return this.toggleNav(this.setting.nav); return this.toggleNav(this.setting.nav);
case "sidebar":
return this.toggleSidebar(this.setting.sidebar);
} }
} }
@ -437,7 +449,7 @@ namespace OS {
shortcut: "C-I", shortcut: "C-I",
}, },
], ],
onchildselect: (e: GUI.TagEventType<GUI.tag.MenuEventData>) => onchildselect: (e: GUI.TagEventType<GUI.tag.StackMenuEventData>) =>
this.actionFile(e.data.item.data.dataid), this.actionFile(e.data.item.data.dataid),
}; };
return arr; return arr;
@ -472,7 +484,7 @@ namespace OS {
shortcut: "C-P", shortcut: "C-P",
}, },
], ],
onchildselect: (e: GUI.TagEventType<GUI.tag.MenuEventData>) => onchildselect: (e: GUI.TagEventType<GUI.tag.StackMenuEventData>) =>
this.actionEdit(e.data.item.data.dataid), this.actionEdit(e.data.item.data.dataid),
}; };
} }
@ -488,12 +500,6 @@ namespace OS {
dataid: `${this.name}-refresh`, dataid: `${this.name}-refresh`,
shortcut: "C-A-R" shortcut: "C-A-R"
}, },
{
text: "__(Sidebar)",
switch: true,
checked: this.setting.sidebar,
dataid: `${this.name}-side`,
},
{ {
text: "__(Navigation bar)", text: "__(Navigation bar)",
switch: true, switch: true,
@ -531,28 +537,19 @@ namespace OS {
type: "tree", type: "tree",
}, },
], ],
onchildselect: (e: GUI.TagEventType<GUI.tag.MenuEventData>) => { onchildselect: (e: GUI.TagEventType<GUI.tag.StackMenuEventData>) => {
const { type } = e.data.item.data; const { type } = e.data.item.data;
this.view.view = type; this.view.view = type;
return (this.viewType[type] = true); return (this.viewType[type] = true);
}, },
}, },
], ],
onchildselect: (e: GUI.TagEventType<GUI.tag.MenuEventData>) => this.actionView(e), onchildselect: (e: GUI.TagEventType<GUI.tag.StackMenuEventData>) => this.actionView(e),
}, },
]; ];
return menu; 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 { private toggleNav(b: boolean): void {
if (b) { if (b) {
$(this.navbar).show(); $(this.navbar).show();
@ -562,7 +559,7 @@ namespace OS {
return this.trigger("resize"); return this.trigger("resize");
} }
private actionView(e: GUI.TagEventType<GUI.tag.MenuEventData>): void{ private actionView(e: GUI.TagEventType<GUI.tag.StackMenuEventData>): void{
const data = e.data.item.data; const data = e.data.item.data;
switch (data.dataid) { switch (data.dataid) {
case `${this.name}-hidden`: case `${this.name}-hidden`:
@ -572,10 +569,6 @@ namespace OS {
case `${this.name}-refresh`: case `${this.name}-refresh`:
this.view.path = this.currdir.path; this.view.path = this.currdir.path;
return; 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`: case `${this.name}-nav`:
return this.registry("nav", data.checked); return this.registry("nav", data.checked);
} }

19
src/packages/Files/scheme.html
View File

@ -1,19 +1,12 @@
<afx-app-window data-id = "files-app-window" apptitle="Files" width="600" height="400"> <afx-app-window data-id = "files-app-window" apptitle="Files" width="600" height="500">
<afx-vbox> <afx-vbox>
<afx-hbox data-height = "23" data-id = "nav-bar"> <afx-hbox data-height = "35" data-id = "nav-bar">
<afx-button data-width = "23" data-id = "btback" iconclass = "fa fa-arrow-left"></afx-button> <afx-list-view data-id = "favouri" dropdown="true"></afx-list-view>
<input type = "text" data-id = "navinput"></input>
<div data-width = "2"></div> <div data-width = "2"></div>
<afx-button data-width = "23" data-id = "btgrid" iconclass = "fa fa-th"></afx-button> <afx-button data-width = "40" data-id = "btback" iconclass = "fa fa-arrow-up"></afx-button>
<div data-width = "2"></div> <afx-button data-width = "40" data-id = "btgrid" iconclass = "fa fa-th"></afx-button>
<afx-button data-width = "23" data-id = "btlist" iconclass = "fa fa-th-list"></afx-button> <afx-button data-width = "40" data-id = "btlist" iconclass = "fa fa-th-list"></afx-button>
</afx-hbox> </afx-hbox>
<div data-height="5"></div>
<afx-hbox>
<afx-list-view data-id = "favouri" data-width = "150" min-width="100">
</afx-list-view>
<afx-resizer data-width = "3" ></afx-resizer>
<afx-file-view data-id = "fileview"></afx-file-view> <afx-file-view data-id = "fileview"></afx-file-view>
</afx-hbox>
</afx-vbox> </afx-vbox>
</afx-app-window> </afx-app-window>

5
src/packages/MarketPlace/main.css
View File

@ -83,3 +83,8 @@ afx-app-window[data-id = "repository-dialog-win"] afx-list-view[data-id="repo-li
font-size: 11px; font-size: 11px;
font-style: italic; font-style: italic;
} }
afx-app-window[data-id="marketplace-win"] afx-tab-bar[data-id="catlist"] i.label-text
{
font-weight: bold;
}

8
src/packages/MarketPlace/main.ts
View File

@ -24,7 +24,7 @@ namespace OS {
private installdir: string; private installdir: string;
private apps_meta: GenericObject<any>; private apps_meta: GenericObject<any>;
private applist: GUI.tag.ListViewTag; private applist: GUI.tag.ListViewTag;
private catlist: GUI.tag.ListViewTag; private catlist: GUI.tag.TabBarTag;
private container: GUI.tag.VBoxTag; private container: GUI.tag.VBoxTag;
private appname: GUI.tag.LabelTag; private appname: GUI.tag.LabelTag;
private appdetail: HTMLUListElement; private appdetail: HTMLUListElement;
@ -44,13 +44,13 @@ namespace OS {
this.apps_meta = {}; this.apps_meta = {};
this.applist = this.find("applist") as GUI.tag.ListViewTag; 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) => { this.applist.onlistselect = (e) => {
const data = e.data.item.data; const data = e.data.item.data;
return this.appDetail(data); return this.appDetail(data);
}; };
this.catlist.onlistselect = (e) => { this.catlist.ontabselect = (e) => {
const selected = this.catlist.selected; const selected = this.catlist.selected;
if(selected < 0) if(selected < 0)
return; return;
@ -326,7 +326,7 @@ namespace OS {
iconclass: "bi bi-gear-wide" iconclass: "bi bi-gear-wide"
}); });
}); });
this.catlist.data = cat_list_data; this.catlist.items = cat_list_data;
this.catlist.selected = 0; this.catlist.selected = 0;
} }
private add_meta_from(k:string, v: API.PackageMetaType) private add_meta_from(k:string, v: API.PackageMetaType)

11
src/packages/MarketPlace/scheme.html
View File

@ -1,16 +1,12 @@
<afx-app-window data-id = "marketplace-win" apptitle="MarketPlace" width="650" height="400"> <afx-app-window data-id = "marketplace-win" apptitle="MarketPlace" width="650" height="400">
<afx-hbox > <afx-vbox >
<afx-vbox data-width = "350">
<afx-hbox data-height= "23" data-id="search-container"> <afx-hbox data-height= "23" data-id="search-container">
<div data-width="17" data-id="searchicon"></div> <div data-width="17" data-id="searchicon"></div>
<input data-id = "searchbox" ></input> <input data-id = "searchbox" ></input>
</afx-hbox> </afx-hbox>
<afx-tab-bar data-id = "catlist" data-height="45"></afx-tab-bar>
<afx-hbox> <afx-hbox>
<afx-list-view data-id = "catlist" dropdown = "false" data-width="35%"></afx-list-view> <afx-list-view data-id = "applist" dropdown = "false" data-width="30%"></afx-list-view>
<afx-resizer data-width = "3" ></afx-resizer>
<afx-list-view data-id = "applist" dropdown = "false" ></afx-list-view>
</afx-hbox>
</afx-vbox>
<afx-resizer data-width = "3" ></afx-resizer> <afx-resizer data-width = "3" ></afx-resizer>
<afx-vbox data-id = "container"> <afx-vbox data-id = "container">
<afx-label data-id = "appname" data-height = "45"></afx-label> <afx-label data-id = "appname" data-height = "45"></afx-label>
@ -28,4 +24,5 @@
</div> </div>
</afx-vbox> </afx-vbox>
</afx-hbox> </afx-hbox>
</afx-vbox>
</afx-app-window> </afx-app-window>

4
src/packages/Setting/AppAndServiceHandle.ts
View File

@ -89,7 +89,7 @@ namespace OS {
this.applist.buttons = [ this.applist.buttons = [
{ {
text: "+", iconclass: "bi bi-plus",
onbtclick: () => { onbtclick: () => {
const apps = (() => { const apps = (() => {
const result = []; const result = [];
@ -128,7 +128,7 @@ namespace OS {
}, },
}, },
{ {
text: "-", iconclass: "bi bi-dash",
onbtclick: () => { onbtclick: () => {
const item = this.applist.selectedItem; const item = this.applist.selectedItem;
if (!item) { if (!item) {

2
src/packages/Setting/AppearanceHandle.ts
View File

@ -67,7 +67,7 @@ namespace OS {
this.wplist.buttons = [ this.wplist.buttons = [
{ {
text: "+", iconclass: "bi bi-plus",
onbtclick: (e) => { onbtclick: (e) => {
return this.parent return this.parent
.openDialog("FileDialog", { .openDialog("FileDialog", {

8
src/packages/Setting/StartupHandle.ts
View File

@ -47,7 +47,7 @@ namespace OS {
this.applist = this.find("applist") as GUI.tag.ListViewTag; this.applist = this.find("applist") as GUI.tag.ListViewTag;
this.srvlist.buttons = [ this.srvlist.buttons = [
{ {
text: "+", iconclass: "bi bi-plus",
onbtclick: () => { onbtclick: () => {
let services = []; let services = [];
for (var k in setting.system.packages) { for (var k in setting.system.packages) {
@ -75,7 +75,7 @@ namespace OS {
}, },
}, },
{ {
text: "-", iconclass: "bi bi-dash",
onbtclick: () => { onbtclick: () => {
const item = this.srvlist.selectedItem; const item = this.srvlist.selectedItem;
if (!item) { if (!item) {
@ -90,7 +90,7 @@ namespace OS {
this.applist.buttons = [ this.applist.buttons = [
{ {
text: "+", iconclass: "bi bi-plus",
onbtclick: () => { onbtclick: () => {
const apps = (() => { const apps = (() => {
const result = []; const result = [];
@ -127,7 +127,7 @@ namespace OS {
}, },
}, },
{ {
text: "-", iconclass: "bi bi-dash",
onbtclick: () => { onbtclick: () => {
const item = this.applist.selectedItem; const item = this.applist.selectedItem;
if (!item) { if (!item) {

4
src/packages/Setting/VFSHandle.ts
View File

@ -144,7 +144,7 @@ namespace OS {
this.ppath = this.find("ppath") as GUI.tag.LabelTag; this.ppath = this.find("ppath") as GUI.tag.LabelTag;
this.mplist.buttons = [ this.mplist.buttons = [
{ {
text: "+", iconclass: "bi bi-plus",
onbtclick: async () => { onbtclick: async () => {
const d = await this.parent.openDialog( const d = await this.parent.openDialog(
new VFSSettingDialog(), new VFSSettingDialog(),
@ -162,7 +162,7 @@ namespace OS {
}, },
}, },
{ {
text: "-", iconclass: "bi bi-dash",
onbtclick: async () => { onbtclick: async () => {
const item = this.mplist.selectedItem; const item = this.mplist.selectedItem;
if (!item) { if (!item) {

17
src/packages/Setting/main.css
View File

@ -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; font-weight: bold;
} }
afx-app-window[data-id = "setting-window"] div.footer{
border-right: 1px solid #cbcbcb;
}
/*APPEARANCE*/ /*APPEARANCE*/
afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] div[data-id = "wp-preview"]{ afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] div[data-id = "wp-preview"]{
display: block; 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"] afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] afx-list-view[data-id="wplist"]
{ {
border:1px solid #cbcbcb; border:1px solid #cbcbcb;
padding:2px;
} }
afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] afx-resizer{ afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] afx-resizer{
border:0; border:0;

4
src/packages/Setting/main.ts
View File

@ -98,14 +98,14 @@ namespace OS {
* @memberof Setting * @memberof Setting
*/ */
main(): void{ 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.AppearanceHandle(this.find("appearance"), this);
new Setting.VFSHandle(this.find("vfs"), this); new Setting.VFSHandle(this.find("vfs"), this);
new Setting.LocaleHandle(this.find("locale"), this); new Setting.LocaleHandle(this.find("locale"), this);
new Setting.StartupHandle(this.find("startup"), this); new Setting.StartupHandle(this.find("startup"), this);
new Setting.AppAndServiceHandle(this.find("app-services"), this); new Setting.AppAndServiceHandle(this.find("app-services"), this);
containter.selectedIndex = 0;
(this.find("btnsave") as GUI.tag.ButtonTag ).onbtclick = (e) => { (this.find("btnsave") as GUI.tag.ButtonTag ).onbtclick = (e) => {
this._api this._api
.setting() .setting()

52
src/packages/Setting/scheme.html
View File

@ -1,28 +1,24 @@
<afx-app-window data-id = "setting-window" apptitle="Setting" width="650" height="400"> <afx-app-window data-id = "setting-window" apptitle="Setting" width="600" height="500">
<afx-vbox> <afx-vbox>
<afx-tab-container data-id = "container" dir = "row" tabbarwidth= "150"> <afx-tab-container data-id = "container" dir = "column" tabbarheight= "40">
<afx-hbox tabname="__(Appearance)" data-id="appearance" iconclass = "fa fa-paint-brush"> <afx-hbox tabname="__(Appearance)" data-id="appearance" iconclass = "fa fa-paint-brush">
<div data-width="10"></div> <div data-width="10"></div>
<afx-vbox> <afx-vbox>
<div data-height="5"></div> <afx-label text = "__(Wallpaper)" iconclass = "fa fa-image" class = "header" data-height="30"></afx-label>
<afx-label text = "__(Wallpaper)" iconclass = "fa fa-image" class = "header" data-height="23"></afx-label>
<afx-hbox> <afx-hbox>
<afx-list-view data-width="150" data-id="wplist"></afx-list-view> <afx-list-view data-width="150" data-id="wplist"></afx-list-view>
<afx-resizer data-width="2"></afx-resizer> <afx-resizer data-width="2"></afx-resizer>
<afx-vbox>
<div data-id = "wp-preview"></div> <div data-id = "wp-preview"></div>
</afx-hbox>
<div data-height="5"></div> <div data-height="5"></div>
<afx-hbox data-height="25"> <afx-hbox data-height="35">
<afx-list-view data-id = "wpsize" dropdown="true"></afx-list-view> <afx-list-view data-id = "wpsize" dropdown="true"></afx-list-view>
<div data-width="5"></div> <div data-width="5"></div>
<afx-list-view data-id = "wprepeat" dropdown="true"></afx-list-view> <afx-list-view data-id = "wprepeat" dropdown="true"></afx-list-view>
</afx-hbox> </afx-hbox>
</afx-vbox> <afx-label text = "__(Theme)" iconclass = "fa fa-window-restore" class = "header" data-height="30"></afx-label>
</afx-hbox> <afx-list-view data-height="35" data-id="theme-list" dropdown="true"></afx-list-view>
<div data-height="5"></div>
<afx-label text = "__(Theme)" iconclass = "fa fa-window-restore" class = "header" data-height="23"></afx-label>
<afx-list-view data-height="30" data-id="theme-list" dropdown="true"></afx-list-view>
<div data-height="5"></div> <div data-height="5"></div>
</afx-vbox> </afx-vbox>
<div data-width="10"></div> <div data-width="10"></div>
@ -31,22 +27,19 @@
<afx-hbox data-id="vfs" tabname = "__(VFS)" iconclass = "fa fa-inbox"> <afx-hbox data-id="vfs" tabname = "__(VFS)" iconclass = "fa fa-inbox">
<div data-width="10"></div> <div data-width="10"></div>
<afx-vbox> <afx-vbox>
<div data-height="5"></div> <afx-label text = "__(Mount points)" iconclass = "fa fa-folder" class = "header" data-height="30"></afx-label>
<afx-label text = "__(Mount points)" iconclass = "fa fa-folder" class = "header" data-height="23"></afx-label>
<afx-list-view data-id="mplist"></afx-list-view> <afx-list-view data-id="mplist"></afx-list-view>
<div data-height="5"></div> <afx-label text = "__(Desktop path)" iconclass = "fa fa-desktop" class = "header" data-height="30"></afx-label>
<afx-label text = "__(Desktop path)" iconclass = "fa fa-desktop" class = "header" data-height="23"></afx-label> <afx-hbox data-height = "40" >
<afx-hbox data-height = "25" >
<div data-width="16"></div> <div data-width="16"></div>
<afx-label data-id="dpath"></afx-label> <afx-label data-id="dpath"></afx-label>
<afx-button text="" iconclass = "fa fa-arrow-up" data-id="btndpath" data-width="20" class="btnsel"></afx-button> <afx-button text="" iconclass = "fa fa-arrow-up" data-id="btndpath" data-width="40" class="btnsel"></afx-button>
</afx-hbox> </afx-hbox>
<div data-height="5"></div> <afx-label text = "__(Local packages path)" iconclass = "fa fa-cube" class = "header" data-height="30"></afx-label>
<afx-label text = "__(Local packages path)" iconclass = "fa fa-cube" class = "header" data-height="23"></afx-label> <afx-hbox data-height = "40" >
<afx-hbox data-height = "25" >
<div data-width="16"></div> <div data-width="16"></div>
<afx-label data-id="ppath"></afx-label> <afx-label data-id="ppath"></afx-label>
<afx-button text="" data-id="btnppath" iconclass = "fa fa-arrow-up" data-width="20" class="btnsel"></afx-button> <afx-button text="" data-id="btnppath" iconclass = "fa fa-arrow-up" data-width="40" class="btnsel"></afx-button>
</afx-hbox> </afx-hbox>
<div data-height="10"></div> <div data-height="10"></div>
</afx-vbox> </afx-vbox>
@ -56,8 +49,7 @@
<afx-hbox data-id="locale" tabname = "__(Languages)"iconclass = "fa fa-globe"> <afx-hbox data-id="locale" tabname = "__(Languages)"iconclass = "fa fa-globe">
<div data-width="10"></div> <div data-width="10"></div>
<afx-vbox> <afx-vbox>
<div data-height="5"></div> <afx-label text = "__(System locale)" iconclass = "fa fa-globe" class = "header" data-height="30"></afx-label>
<afx-label text = "__(System locale)" iconclass = "fa fa-globe" class = "header" data-height="23"></afx-label>
<afx-list-view data-id="lglist"></afx-list-view> <afx-list-view data-id="lglist"></afx-list-view>
<div data-height="10"></div> <div data-height="10"></div>
</afx-vbox> </afx-vbox>
@ -67,10 +59,10 @@
<afx-hbox data-id="startup" tabname = "__(Startup)" iconclass = "fa fa-cog"> <afx-hbox data-id="startup" tabname = "__(Startup)" iconclass = "fa fa-cog">
<div data-width="10"></div> <div data-width="10"></div>
<afx-vbox> <afx-vbox>
<afx-label text = "__(Startup services)" iconclass = "fa fa-tasks" class = "header" data-height="23"></afx-label> <afx-label text = "__(Startup services)" iconclass = "fa fa-tasks" class = "header" data-height="30"></afx-label>
<afx-list-view data-id="srvlist"></afx-list-view> <afx-list-view data-id="srvlist"></afx-list-view>
<div data-height="5"></div> <div data-height="5"></div>
<afx-label text = "__(Startup applications)" iconclass = "fa fa-adn" class = "header" data-height="23"></afx-label> <afx-label text = "__(Startup applications)" iconclass = "fa fa-adn" class = "header" data-height="30"></afx-label>
<afx-list-view data-id="applist"></afx-list-view> <afx-list-view data-id="applist"></afx-list-view>
<div data-height="10"></div> <div data-height="10"></div>
</afx-vbox> </afx-vbox>
@ -80,10 +72,10 @@
<afx-hbox data-id="app-services" tabname = "__(Apps. and Services)" iconclass = "fa fa-adn"> <afx-hbox data-id="app-services" tabname = "__(Apps. and Services)" iconclass = "fa fa-adn">
<div data-width="10"></div> <div data-width="10"></div>
<afx-vbox> <afx-vbox>
<afx-label text = "__(Services)" iconclass = "fa fa-tasks" class = "header" data-height="23"></afx-label> <afx-label text = "__(Services)" iconclass = "fa fa-tasks" class = "header" data-height="30"></afx-label>
<afx-list-view data-id="sys-srvlist"></afx-list-view> <afx-list-view data-id="sys-srvlist"></afx-list-view>
<div data-height="5"></div> <div data-height="5"></div>
<afx-label text = "__(Pinned applications)" iconclass = "fa fa-adn" class = "header" data-height="23"></afx-label> <afx-label text = "__(Pinned applications)" iconclass = "fa fa-adn" class = "header" data-height="30"></afx-label>
<afx-list-view data-id="sys-applist"></afx-list-view> <afx-list-view data-id="sys-applist"></afx-list-view>
<div data-height="10"></div> <div data-height="10"></div>
</afx-vbox> </afx-vbox>
@ -91,10 +83,10 @@
</afx-hbox> </afx-hbox>
</afx-tab-container> </afx-tab-container>
<afx-hbox data-height="35"> <afx-hbox data-height="45">
<div data-width = "150" class = "footer"></div> <div></div>
<div style="text-align:right" > <div style="text-align:right" >
<afx-button text="__(Save)" data-id="btnsave" iconclass="fa fa-save" style="margin-right:10px;" ></afx-button> <afx-button text="__(Save)" data-id="btnsave" iconclass="fa fa-save" style="margin-right:5px;" ></afx-button>
</div> </div>
</afx-hbox> </afx-hbox>

33
src/themes/antos_dark/afx-app-window.css
View File

@ -5,42 +5,26 @@ afx-app-window div.afx-window-wrapper{
background-color:#363636; background-color:#363636;
} }
afx-app-window.unactive > div.afx-window-wrapper{ afx-app-window.unactive > div.afx-window-wrapper{
background-color: #464646; /*background-color: #464646;*/
box-shadow: none;
} }
afx-app-window ul.afx-window-top{ afx-app-window ul.afx-window-top{
height: 20px;
border-bottom: 1px solid #262626; 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{ afx-app-window ul li.afx-window-close{
background-color: #Fc605b; background-color: #Fc605b;
float:left;
} }
afx-app-window ul li.afx-window-minimize{ afx-app-window ul li.afx-window-minimize{
background-color: #fec041; background-color: #fec041;
float:left;
} }
afx-app-window ul li.afx-window-maximize{ afx-app-window ul li.afx-window-maximize{
background-color: #35cc4b; background-color: #35cc4b;
float:left; }*/
}
afx-app-window ul li.afx-window-title{ afx-app-window ul li.afx-window-title{
margin-top:1px; text-align: left;
text-align: center;
} }
afx-app-window div.afx-window-content 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-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
/*
afx-app-window.unactive div.afx-window-content afx-app-window.unactive div.afx-window-content
{ {
background-color:#464646; background-color:#464646;
}*/
afx-app-window ul.afx-window-top button:hover
{
background-color: #464646;
color: white;
} }

8
src/themes/antos_dark/afx-button.css
View File

@ -1,5 +1,4 @@
afx-button button{ afx-button button{
padding: 4px;
border: 1px solid #262626; border: 1px solid #262626;
background-color: #464646; background-color: #464646;
color: white; color: white;
@ -7,14 +6,11 @@ afx-button button{
font-family: "Ubuntu"; font-family: "Ubuntu";
} }
afx-button button[disabled]{ afx-button button[disabled]{
color: #868686; color: #868686;
} }
afx-button i.icon-style {
width: 16px;
height: 16px;
display: inline-block;
}
afx-button button:active, afx-button button.btactive { afx-button button:active, afx-button button.btactive {
background-color: #2786F3; background-color: #2786F3;
color: white; color: white;

20
src/themes/antos_dark/afx-dock.css
View File

@ -1,7 +1,4 @@
afx-apps-dock{ afx-apps-dock{
bottom: 0px;
top: 0px;
width: 32px;
background-color:#363636; background-color:#363636;
padding:0; padding:0;
padding-top: 0; padding-top: 0;
@ -10,23 +7,6 @@ afx-apps-dock{
border:1px solid #262626; border:1px solid #262626;
box-shadow: none; 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 { afx-apps-dock afx-button.selected > button {
background-color: #464646; background-color: #464646;

25
src/themes/antos_dark/afx-file-view.css
View File

@ -1,7 +1,4 @@
afx-file-view afx-label.status{ afx-file-view afx-label.status{
padding:3px;
right: 0px;
height: 15px;
background-color: #464646; background-color: #464646;
border-top: 1px solid #262626; border-top: 1px solid #262626;
@ -14,7 +11,7 @@ afx-file-view afx-list-view > div.list-container > ul li{
margin-right: 5px; margin-right: 5px;
margin-bottom: 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; background-color: transparent;
} }
afx-file-view afx-list-view i.dir:before{ 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; 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; background-color: transparent;
} }
@ -55,7 +52,6 @@ afx-file-view afx-grid-view{
afx-file-view afx-grid-view i.file:before{ afx-file-view afx-grid-view i.file:before{
content: "\f016"; content: "\f016";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 16px;
color: white; color: white;
font-style: normal; font-style: normal;
font-weight: 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{ afx-file-view afx-grid-view i.dir:before{
content: "\f07b"; content: "\f07b";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 16px;
color: #76D2F9; color: #76D2F9;
font-style: normal; font-style: normal;
font-weight: 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{ afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{
color:white; 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{ afx-file-view afx-grid-view .grid_row_header afx-grid-cell{
background-color: #464646; background-color: #464646;
border-top: 1px solid #262626; border-top: 1px solid #262626;
border-right: 1px solid #262626; border-right: 1px solid #262626;
border-bottom: 1px solid #262626; border-bottom: 1px solid #262626;
padding: 3px;
} }
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{ afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
content: "\f07b"; content: "\f07b";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 16px;
color:#76D2F9; color:#76D2F9;
} }
afx-file-view afx-tree-view .afx-tree-view-folder-open:before{ afx-file-view afx-tree-view .afx-tree-view-folder-open:before{
content: "\f07c"; content: "\f07c";
font-family: "FontAwesome"; font-family: "FontAwesome";
color:#76D2F9; color:#76D2F9;
font-size: 16px;
} }
afx-file-view afx-tree-view .afx-tree-view-item:before{ afx-file-view afx-tree-view .afx-tree-view-item:before{
content: "\f016"; content: "\f016";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 16px;
font-style: normal; font-style: normal;
font-weight: 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; background-color: transparent;
} }
afx-file-view afx-tree-view li.itemname{ afx-file-view afx-tree-view div.afx_tree_item_selected ul{
padding:3px;
padding-right: 5px;
}
afx-file-view afx-tree-view div.afx_tree_item_selected .itemname{
background-color: #116cd6; background-color: #116cd6;
color:white; color:white;
border-radius: 3px; border-radius: 0;
} }
afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{ afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{

55
src/themes/antos_dark/afx-list-view.css
View File

@ -1,29 +1,17 @@
afx-list-view > div.list-container > ul li{ afx-list-view > div.list-container > ul li{
padding: 5px;
padding-top:3px;
padding-bottom: 3px;
padding-right: 10px;
background-color: #363636; 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; background-color:#3b3b3b;
} }
afx-list-view i.closable{
width: 16px;
height: 16px;
}
afx-list-view i.closable:before{ afx-list-view i.closable:before{
font-size: 10px;
margin-left: 10px;
color: #868686; color: #868686;
} }
afx-list-view.dropdown > div.list-container > ul li:hover{
afx-list-view > div.list-container > ul li > i { background-color: #464646;
margin-right: 3px;
} }
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; background-color: #116cd6;
color:white; color:white;
} }
@ -32,36 +20,17 @@ afx-list-view.dropdown > div.list-container > ul{
border:1px solid #262626; border:1px solid #262626;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
border-radius: 3px; border-radius: 3px;
max-height: 150px;
background-color: #363636; background-color: #363636;
border-top-left-radius: 0px; border-top-left-radius: 0px;
z-index: 10;
} }
afx-list-view.dropdown div.list-container div{ afx-list-view.dropdown {
color: white; color: white;
padding-top:3px;
padding-bottom: 3px;
border:1px solid #262626; border:1px solid #262626;
border-radius: 3px; border-radius: 3px;
background-color: transparent; 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{ afx-list-view ul.complex-content{
padding: 0; padding: 0;
margin: 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{ afx-list-view > div.list-container > ul li.selected ul.complex-content li{
color:white; color:white;
} }
afx-list-view div.button_container afx-button{ afx-list-view div.button_container afx-button{
margin-right: 2px; margin-right: 2px;
} }
afx-list-view div.button_container afx-button button{ afx-list-view div.button_container afx-button button{
border-radius: 0; 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;
}

31
src/themes/antos_dark/afx-menu.css
View File

@ -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{ afx-menu li:hover > a afx-switch span:before{
color:white; color:white;
} }
@ -20,14 +11,6 @@ afx-menu afx-menu ul {
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
background-color: #363636; 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 { afx-menu li:hover {
background-color: #2786F3; 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{ 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; color: #414339;
position:absolute;
top:25%;
} }
afx-menu ul.context{ 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); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
background-color: #363636; background-color: #363636;
} }
afx-menu ul.context li{
min-width: 150px;
width: calc(100% - 10px);
}
afx-menu afx-label span {
height: 22px !important;
}

7
src/themes/antos_dark/afx-nspinner.css
View File

@ -1,6 +1,5 @@
afx-nspinner ul li{ afx-nspinner ul li{
border: 1px solid #262626; border: 1px solid #262626;
width: 100%;
} }
afx-nspinner ul li.incr{ afx-nspinner ul li.incr{
@ -17,9 +16,3 @@ afx-nspinner ul li.decr{
afx-nspinner ul li:hover{ afx-nspinner ul li:hover{
color:#116cD6; color:#116cD6;
} }
afx-nspinner ul li.incr i:before{
font-size: 16px;
}
afx-nspinner ul li.decr i:before{
font-size: 16px;
}

17
src/themes/antos_dark/afx-slider.css
View File

@ -1,7 +1,7 @@
afx-slider div.container{ afx-slider div.container{
border-radius: 3px; border-radius: 3px;
height: 5px; height: 10px;
background-color: #868686; background-color: #868686;
} }
@ -11,9 +11,18 @@ afx-slider div.progress {
} }
afx-slider div.dragpoint { afx-slider div.dragpoint {
width: 15px;
height: 15px;
border:1px solid #262626; border:1px solid #262626;
border-radius: 15px;
background-color:#868686; 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;
}

26
src/themes/antos_dark/afx-stack-menu.css Normal file
View File

@ -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;
}

34
src/themes/antos_dark/afx-sys-panel.css
View File

@ -1,8 +1,7 @@
afx-sys-panel > div{ afx-sys-panel > div{
background-color: #363636; background-color: #363636;
border-bottom: 1px solid #262626; border-top: 1px solid #262626;
box-shadow: none; box-shadow: none;
height: 22px;
} }
afx-sys-panel .afx-panel-os-menu li afx-sys-panel .afx-panel-os-menu li
@ -48,15 +47,11 @@ afx-sys-panel afx-overlay
border: 1px solid #262626; border: 1px solid #262626;
} }
afx-sys-panel afx-list-view[data-id="applist"], afx-sys-panel afx-list-view[data-id="applist"],
afx-sys-panel afx-list-view[data-id="catlist"], afx-sys-panel afx-tab-bar[data-id="catlist"]
afx-sys-panel afx-resizer
{ {
border-top: 1px solid #262626; 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="applist"] > div.list-container > ul li,
afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li
{ {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
@ -68,23 +63,22 @@ afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
border: 0; border: 0;
border-left: 1px solid #262626; border-left: 1px solid #262626;
border-top: 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="applist"] > div.list-container > ul .afx-list-item li:hover
afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li:hover
{ {
background-color: #cecece; background-color: #cecece;
color: #262626; 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="applist"] > div.list-container > ul .afx-list-item li.selected
afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li.selected
{ {
background-color: #116cd6; background-color: #116cd6;
color:white; 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; font-weight: bold;
} }
@ -92,16 +86,7 @@ afx-sys-panel afx-list-view[data-id="applist"] afx-label.search-header {
font-weight: bold; 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{ afx-sys-panel div[data-id="searchicon"]:before{
content: "\f002"; content: "\f002";
display: block; display: block;
@ -113,7 +98,8 @@ afx-sys-panel div[data-id="searchicon"]:before{
} }
afx-sys-panel input{ afx-sys-panel input{
border:0; border:0;
height: 25px; height: 30px;
color:#afafaf; color:#afafaf;
font-size: 16px;
background-color: transparent; background-color: transparent;
} }

15
src/themes/antos_dark/afx-tab-bar.css
View File

@ -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; background-color: #464646;
color:white; color:white;
border-bottom:1px solid #262626;
} }
afx-tab-bar afx-list-view > div.list-container > ul li{ afx-tab-bar[dir="vertical"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
border-top-left-radius: 5px; {
border-top-right-radius: 5px; background-color: #464646;
padding-bottom: 2px; color:white;
padding-right:15px; border-right:1px solid #262626;
padding-top:2px;
border:1px solid #262626;
} }

8
src/themes/antos_dark/afx-tree-view.css
View File

@ -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{ afx-tree-view div.afx_tree_item_selected{
background-color: #116cd6; background-color: #116cd6;
color:white; color:white;

14
src/themes/antos_dark/antos.css
View File

@ -1,29 +1,15 @@
html,body{ html,body{
font-family: "Ubuntu"; font-family: "Ubuntu";
font-size: 13px;
color: white; color: white;
} }
#workspace {
top: 23px;
}
#desktop{
top:0;
left: 35px;
}
#desktop > div > ul afx-list-item { #desktop > div > ul afx-list-item {
width: 70px;
color: white; color: white;
padding:3px;
} }
#desktop > div > ul afx-list-item li.selected { #desktop > div > ul afx-list-item li.selected {
background-color: #116cd6; background-color: #116cd6;
color:white; color:white;
border-radius: 6px; border-radius: 6px;
width: 70px;
color: white;
padding:3px;
} }
#desktop > div > ul afx-list-item i.file:before{ #desktop > div > ul afx-list-item i.file:before{

38
src/themes/antos_light/afx-app-window.css
View File

@ -1,55 +1,47 @@
afx-app-window div.afx-window-wrapper{ afx-app-window div.afx-window-wrapper{
border:1px solid #a6a6a6; border:1px solid #a6a6a6;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
border-radius: 5px; border-radius: 0;
background-color:#dfdfdf; background-color:#dfdfdf;
} }
afx-app-window.unactive > div.afx-window-wrapper{ afx-app-window.unactive > div.afx-window-wrapper{
background-color: #f6f6f6; /*background-color: #f6f6f6;*/
box-shadow: none;
} }
afx-app-window ul.afx-window-top{ afx-app-window ul.afx-window-top{
height: 20px;
border-bottom: 1px solid #a6a6a6; 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{ afx-app-window ul li.afx-window-close{
background-color: #Fc605b; background-color: #Fc605b;
float:left; margin-right: 10px;
} }
afx-app-window ul li.afx-window-minimize{ afx-app-window ul li.afx-window-minimize{
background-color: #fec041; background-color: #fec041;
float:left;
} }
afx-app-window ul li.afx-window-maximize{ afx-app-window ul li.afx-window-maximize{
background-color: #35cc4b; background-color: #35cc4b;
float:left;
} }
*/
afx-app-window ul li.afx-window-title{ afx-app-window ul li.afx-window-title{
margin-top:1px; text-align: left;
text-align: center;
} }
afx-app-window div.afx-window-content afx-app-window div.afx-window-content
{ {
background-color: white; background-color: white;
border-bottom-left-radius: 5px; border-bottom-left-radius: 0;
border-bottom-right-radius: 5px; border-bottom-right-radius: 0;
} }
/*
afx-app-window.unactive div.afx-window-content afx-app-window.unactive div.afx-window-content
{ {
background-color:white; background-color:white;
}*/
afx-app-window ul.afx-window-top button:hover
{
background-color: #2786F3;
color: white;
} }

10
src/themes/antos_light/afx-button.css
View File

@ -1,21 +1,15 @@
afx-button button{ afx-button button{
padding: 4px;
border: 1px solid #a6a6a6; border: 1px solid #a6a6a6;
background-color: #f6F6F6; background-color: #f6F6F6;
color: #414339; color: #414339;
border-radius: 6px; border-radius: 3px;
font-family: "Ubuntu"; font-family: "Ubuntu";
} }
afx-button button[disabled]{ afx-button button[disabled]{
color: #a6a6a6; color: #a6a6a6;
} }
afx-button i.icon-style {
width: 16px;
height: 16px;
display: inline-block;
}
afx-button button:active, afx-button button.btactive { afx-button button:active, afx-button button.btactive {
background-color: #2786F3; background-color: #2786F3;
color: white; color: white;

21
src/themes/antos_light/afx-dock.css
View File

@ -1,7 +1,4 @@
afx-apps-dock{ afx-apps-dock{
bottom: 0;
top: 0;
width: 32px;
background-color:#e7e7e7; background-color:#e7e7e7;
padding:0; padding:0;
padding-top: 0; padding-top: 0;
@ -10,23 +7,7 @@ afx-apps-dock{
border:1px solid #a6a6a6; border:1px solid #a6a6a6;
box-shadow: none; 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 { afx-apps-dock afx-button.selected > button {
background-color: #2786F3; background-color: #2786F3;

26
src/themes/antos_light/afx-file-view.css
View File

@ -1,7 +1,4 @@
afx-file-view afx-label.status{ afx-file-view afx-label.status{
padding:3px;
right: 0px;
height: 15px;
background-color: #f6F6F6; background-color: #f6F6F6;
border-top: 1px solid #cbcbcb; border-top: 1px solid #cbcbcb;
} }
@ -13,7 +10,7 @@ afx-file-view afx-list-view > div.list-container > ul li{
margin-right: 5px; margin-right: 5px;
margin-bottom: 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; background-color: transparent;
} }
afx-file-view afx-list-view i.dir:before{ 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-style: normal;
font-weight: 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; background-color: transparent;
} }
@ -53,7 +50,6 @@ afx-file-view afx-grid-view{
afx-file-view afx-grid-view i.file:before{ afx-file-view afx-grid-view i.file:before{
content: "\f016"; content: "\f016";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 16px;
color: #414339; color: #414339;
font-style: normal; font-style: normal;
font-weight: 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{ afx-file-view afx-grid-view i.dir:before{
content: "\f07b"; content: "\f07b";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 16px;
color: #76D2F9; color: #76D2F9;
font-style: normal; font-style: normal;
font-weight: 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{ afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{
color:white; 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{ afx-file-view afx-grid-view .grid_row_header afx-grid-cell{
background-color: #dfdfdf; background-color: #dfdfdf;
border-top: 1px solid #a6a6a6; border-top: 1px solid #a6a6a6;
border-right: 1px solid #a6a6a6; border-right: 1px solid #a6a6a6;
border-bottom: 1px solid #a6a6a6; border-bottom: 1px solid #a6a6a6;
padding: 3px;
} }
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{ afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
content: "\f07b"; content: "\f07b";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 16px;
color:#76D2F9; color:#76D2F9;
} }
afx-file-view afx-tree-view .afx-tree-view-folder-open:before{ afx-file-view afx-tree-view .afx-tree-view-folder-open:before{
content: "\f07c"; content: "\f07c";
font-family: "FontAwesome"; font-family: "FontAwesome";
color:#76D2F9; color:#76D2F9;
font-size: 16px;
} }
afx-file-view afx-tree-view .afx-tree-view-item:before{ afx-file-view afx-tree-view .afx-tree-view-item:before{
content: "\f016"; content: "\f016";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 16px;
font-style: normal; font-style: normal;
font-weight: 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; background-color: transparent;
} }
afx-file-view afx-tree-view li.itemname{ afx-file-view afx-tree-view div.afx_tree_item_selected ul{
padding:3px;
padding-right: 5px;
}
afx-file-view afx-tree-view div.afx_tree_item_selected .itemname{
background-color: #116cd6; background-color: #116cd6;
color:white; color:white;
border-radius: 3px; border-radius: 0x;
} }
afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{ afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{

56
src/themes/antos_light/afx-list-view.css
View File

@ -1,29 +1,18 @@
afx-list-view > div.list-container > ul li{ afx-list-view > div.list-container > ul li{
padding: 5px;
padding-top:3px;
padding-bottom: 3px;
padding-right: 10px;
background-color: white; 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; background-color:#f5F5F5;
} }
afx-list-view i.closable{
width: 16px;
height: 16px;
}
afx-list-view i.closable:before{ afx-list-view i.closable:before{
font-size: 10px;
margin-left: 10px;
color: #414339; color: #414339;
} }
afx-list-view.dropdown > div.list-container > ul li:hover{
afx-list-view > div.list-container > ul li > i { background-color: #dcdcdc;
margin-right: 3px; 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; background-color: #116cd6;
color:white; color:white;
} }
@ -32,37 +21,15 @@ afx-list-view.dropdown > div.list-container > ul{
border:1px solid #a6a6a6; border:1px solid #a6a6a6;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
border-radius: 3px; border-radius: 3px;
max-height: 150px;
background-color: white; background-color: white;
border-top-left-radius: 0px; border-top-left-radius: 0px;
z-index: 10;
} }
afx-list-view.dropdown div.list-container div{ afx-list-view.dropdown{
color: #414339; color: #414339;
padding-top:3px;
padding-bottom: 3px;
border:1px solid #a6a6a6; border:1px solid #a6a6a6;
border-radius: 3px; border-radius: 3px;
background-color: transparent; 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{ afx-list-view ul.complex-content{
padding: 0; padding: 0;
@ -79,14 +46,15 @@ afx-list-view > div.list-container > ul li.selected ul.complex-content li{
color:white; color:white;
} }
afx-list-view div.button_container afx-button{ afx-list-view div.button_container afx-button{
margin-right: 2px; margin-right: 2px;
} }
afx-list-view div.button_container afx-button button{ afx-list-view div.button_container afx-button button{
border-radius: 0; border-radius: 0;
padding-left:5px; }
padding-top:1px; afx-list-view .afx-list-item li afx-label.description i.label-text
padding-bottom: 1px; {
padding-right: 5px; font-size: 13px;
padding-left: 10px;
} }

31
src/themes/antos_light/afx-menu.css
View File

@ -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{ afx-menu li:hover > a afx-switch span:before{
color:white; color:white;
} }
@ -20,14 +11,6 @@ afx-menu afx-menu ul {
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
background-color: #e7e7e7; 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 { afx-menu li:hover {
background-color: #2786F3; 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{ 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; color: #414339;
position:absolute;
top:25%;
} }
afx-menu ul.context{ 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); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
background-color: #e7e7e7; background-color: #e7e7e7;
} }
afx-menu ul.context li{
min-width: 150px;
width: calc(100% - 10px);
}
afx-menu afx-label span {
height: 22px !important;
}

7
src/themes/antos_light/afx-nspinner.css
View File

@ -1,6 +1,5 @@
afx-nspinner ul li{ afx-nspinner ul li{
border: 1px solid #a6a6a6; border: 1px solid #a6a6a6;
width: 100%;
} }
afx-nspinner ul li.incr{ afx-nspinner ul li.incr{
@ -17,9 +16,3 @@ afx-nspinner ul li.decr{
afx-nspinner ul li:hover{ afx-nspinner ul li:hover{
color:#116cD6; color:#116cD6;
} }
afx-nspinner ul li.incr i:before{
font-size: 16px;
}
afx-nspinner ul li.decr i:before{
font-size: 16px;
}

15
src/themes/antos_light/afx-slider.css
View File

@ -11,9 +11,18 @@ afx-slider div.progress {
} }
afx-slider div.dragpoint { afx-slider div.dragpoint {
width: 15px;
height: 15px;
border:1px solid #6b6b6b; border:1px solid #6b6b6b;
border-radius: 15px;
background-color:#e6e6e6; 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;
}

24
src/themes/antos_light/afx-stack-menu.css Normal file
View File

@ -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;
}

35
src/themes/antos_light/afx-sys-panel.css
View File

@ -1,8 +1,7 @@
afx-sys-panel > div{ afx-sys-panel > div{
background-color: #e7e7e7; background-color: #e7e7e7;
border-bottom: 1px solid #9c9C9C; border-top: 1px solid #9c9C9C;
box-shadow:none; box-shadow:none;
height: 22px;
} }
afx-sys-panel .afx-panel-os-menu li afx-sys-panel .afx-panel-os-menu li
@ -48,15 +47,11 @@ afx-sys-panel afx-overlay
border: 1px solid #9c9C9C; border: 1px solid #9c9C9C;
} }
afx-sys-panel afx-list-view[data-id="applist"], afx-sys-panel afx-list-view[data-id="applist"],
afx-sys-panel afx-list-view[data-id="catlist"], afx-sys-panel afx-tab-bar[data-id="catlist"]
afx-sys-panel afx-resizer
{ {
border-top: 1px solid #afafaf; 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="applist"] > div.list-container > ul li,
afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li
{ {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
@ -68,39 +63,26 @@ afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
border: 0; border: 0;
border-left: 1px solid #afafaf; border-left: 1px solid #afafaf;
border-top: 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="applist"] > div.list-container > ul .afx-list-item li:hover
afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li:hover
{ {
background-color: #cecece; 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="applist"] > div.list-container > ul .afx-list-item li.selected{
afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li.selected
{
background-color: #116cd6; background-color: #116cd6;
color:white; 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; font-weight: bold;
} }
afx-sys-panel afx-list-view[data-id="applist"] afx-label.search-header { afx-sys-panel afx-list-view[data-id="applist"] afx-label.search-header {
font-weight: bold; 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{ afx-sys-panel div[data-id="searchicon"]:before{
@ -116,5 +98,6 @@ afx-sys-panel input{
border:0; border:0;
height: 25px; height: 25px;
color:#afafaf; color:#afafaf;
font-size: 16px;
background-color: transparent; background-color: transparent;
} }

15
src/themes/antos_light/afx-tab-bar.css
View File

@ -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; background-color: #116cd6;
color:white; color:white;
border-bottom:1px solid #c3c3c3;
} }
afx-tab-bar afx-list-view > div.list-container > ul li{ afx-tab-bar[dir="vertical"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
border-top-left-radius: 5px; {
border-top-right-radius: 5px; background-color: #116cd6;
padding-bottom: 2px; color:white;
padding-right:15px; border-right:1px solid #c3c3c3;
padding-top:2px;
border:1px solid #c3c3c3;
} }

8
src/themes/antos_light/afx-tree-view.css
View File

@ -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{ afx-tree-view div.afx_tree_item_selected{
background-color: #116cd6; background-color: #116cd6;
color:white; color:white;

13
src/themes/antos_light/antos.css
View File

@ -1,29 +1,16 @@
html,body{ html,body{
font-family: "Ubuntu"; font-family: "Ubuntu";
font-size: 13px;
color:#414339; color:#414339;
} }
#workspace {
top: 23px;
}
#desktop{
top:0;
left: 35px;
}
#desktop > div > ul afx-list-item { #desktop > div > ul afx-list-item {
width: 70px;
color: white; color: white;
padding:3px;
} }
#desktop > div > ul afx-list-item li.selected { #desktop > div > ul afx-list-item li.selected {
background-color: #116cd6; background-color: #116cd6;
color:white;
border-radius: 6px; border-radius: 6px;
width: 70px;
color: white; color: white;
padding:3px;
} }
#desktop > div > ul afx-list-item i.file:before{ #desktop > div > ul afx-list-item i.file:before{

34
src/themes/system/afx-app-window.css
View File

@ -14,6 +14,9 @@ afx-app-window ul.afx-window-top{
padding: 0; padding: 0;
width: 100%; width: 100%;
padding:0; padding:0;
display: flex;
flex-direction: row;
height: 40px;
} }
afx-app-window ul.loading::before{ afx-app-window ul.loading::before{
@ -33,10 +36,12 @@ afx-app-window ul.loading::before {
afx-app-window ul.afx-window-top li{ afx-app-window ul.afx-window-top li{
list-style: none; list-style: none;
} }
afx-app-window ul li.afx-window-title{ afx-app-window ul li.afx-window-title{
float:none; flex: 1;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
} }
afx-app-window div.afx-window-content afx-app-window div.afx-window-content
@ -81,8 +86,31 @@ afx-app-window div.afx-window-overlay {
background-color: transparent; background-color: transparent;
display: none; display: none;
position: absolute; position: absolute;
top: 0;
left: 0; left: 0;
bottom: 5px; bottom: 5px;
right: 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;
} }

10
src/themes/system/afx-button.css
View File

@ -1,7 +1,17 @@
afx-button button{ afx-button button{
outline: none; outline: none;
min-height: 35px;
min-width: 40px;
padding-left: 5px;
padding-right: 5px;
} }
afx-button i.icon-style { afx-button i.icon-style {
float: left; float: left;
} }
afx-button afx-label i.icon-style {
width: 24px;
height: 24px;
display: inline-block;
}

21
src/themes/system/afx-dock.css
View File

@ -1,5 +1,22 @@
afx-apps-dock{ afx-apps-dock{
float: left; display: flex;
position: absolute; flex-direction: row;
overflow: hidden; 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;
}

44
src/themes/system/afx-file-view.css
View File

@ -39,6 +39,7 @@ afx-file-view afx-tree-view{
margin:0; margin:0;
overflow: hidden; overflow: hidden;
background-color: transparent; background-color: transparent;
padding-left: 5px;
} }
afx-file-view afx-tree-view .afx_tree_item_odd{ afx-file-view afx-tree-view .afx_tree_item_odd{
@ -58,3 +59,46 @@ afx-file-view div.treecontainer{
padding:0; padding:0;
margin: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;
}

28
src/themes/system/afx-grid-view.css
View File

@ -2,6 +2,11 @@ afx-grid-view afx-grid-row afx-grid-cell{
user-select:none; user-select:none;
-webkit-user-select:none; -webkit-user-select:none;
cursor:default; cursor:default;
min-height: 25px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 5px;
} }
afx-grid-view .grid_row_header afx-grid-cell{ 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; -webkit-user-select:none;
cursor:default; cursor:default;
font-weight: bold; font-weight: bold;
min-height: 25px;
display: flex;
padding: 5px;
flex-direction: column;
justify-content: center;
} }
afx-grid-view { afx-grid-view {
@ -16,5 +26,21 @@ afx-grid-view {
} }
afx-grid-view afx-grid-cell afx-label { 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;
} }

1
src/themes/system/afx-label.css
View File

@ -5,6 +5,7 @@ afx-label span {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
height: 100%;
} }
afx-label i.label-text{ afx-label i.label-text{
font-weight: normal; font-weight: normal;

63
src/themes/system/afx-list-view.css
View File

@ -1,15 +1,20 @@
afx-list-view{ .afx-list-view{
overflow:hidden; 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; display: contents;
} }
afx-list-view > div.list-container{ afx-list-view > div.list-container{
overflow: auto; overflow: auto;
flex: 1;
} }
afx-list-view > div.list-container > ul{ afx-list-view > div.list-container > ul{
margin:0; margin:0;
padding: 0; padding: 0;
@ -17,12 +22,29 @@ afx-list-view > div.list-container > ul{
afx-list-view > div.list-container > ul li{ afx-list-view > div.list-container > ul li{
margin:0; margin:0;
padding:0; min-height: 25px;
padding: 5px;
list-style: none; list-style: none;
position: relative; position: relative;
-webkit-user-select:none; -webkit-user-select:none;
display: flex;
flex-direction: column;
justify-content: center;
cursor:default; 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{ afx-list-view i.closable{
display: inline-block; display: inline-block;
@ -36,6 +58,7 @@ afx-list-view i.closable:before{
content: "\f00d"; content: "\f00d";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-style: normal; font-style: normal;
font-size: 16px;
} }
afx-list-view.dropdown { afx-list-view.dropdown {
@ -44,17 +67,43 @@ afx-list-view.dropdown {
} }
afx-list-view.dropdown > div.list-container{ afx-list-view.dropdown > div.list-container{
overflow: visible; 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{ afx-list-view.dropdown > div.list-container > ul{
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
max-height: 200px;
z-index: 10;
position: absolute;
left: 0;
top: 100%;
} }
afx-list-view.dropdown > div.list-container > ul li{ afx-list-view.dropdown > div.list-container > ul li{
display: inline-block;
width:100%; width:100%;
} }
afx-list-view afx-list-item afx-label { afx-list-view.dropdown div.list-container div:before {
display: inline-block; 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;
} }

32
src/themes/system/afx-menu.css
View File

@ -85,4 +85,36 @@ afx-menu li.afx-corner-fix:hover{
} }
afx-menu ul.context li{ afx-menu ul.context li{
clear:float; 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;
} }

15
src/themes/system/afx-nspinner.css
View File

@ -6,25 +6,36 @@ afx-nspinner ul{
padding:0; padding:0;
margin: 0; margin: 0;
list-style: none; list-style: none;
display: flex;
flex-direction: column;
width: 40px;
} }
afx-nspinner input{ afx-nspinner input{
margin: 0; margin: 0;
height: 100%;
width: calc(100% - 40px);
flex: 1;
} }
afx-nspinner ul li{ afx-nspinner ul li{
display: block; display: flex;
padding:0; padding:0;
margin: 0; margin: 0;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
} }
afx-nspinner ul li.incr i:before{ afx-nspinner ul li.incr i:before{
content: "\f0d8"; content: "\f0d8";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-style: normal; font-style: normal;
font-size: 20px;
} }
afx-nspinner ul li.decr i:before{ afx-nspinner ul li.decr i:before{
content: "\f0d7"; content: "\f0d7";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-style: normal; font-style: normal;
font-size: 20px;
} }

1
src/themes/system/afx-slider.css
View File

@ -20,4 +20,5 @@ afx-slider div.progress {
afx-slider div.dragpoint { afx-slider div.dragpoint {
display: block; display: block;
padding: 5px;
} }

51
src/themes/system/afx-stack-menu.css Normal file
View File

@ -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;
}

69
src/themes/system/afx-sys-panel.css
View File

@ -2,17 +2,26 @@
afx-sys-panel{ afx-sys-panel{
padding:0; padding:0;
margin: 0; margin: 0;
position: absolute;
bottom: 0;
width: 100%;
} }
afx-sys-panel > div{ afx-sys-panel > div{
width: 100%; width: 100%;
margin:0; margin:0;
padding: 0; padding: 0;
position:absolute; display: flex;
flex-direction: row;
height: 35px;
} }
afx-sys-panel afx-overlay afx-sys-panel afx-overlay
{ {
width: 400px; bottom: 35px;
overflow: hidden;
margin: 0;
left: 0;
right: 0;
} }
afx-sys-panel > div.loading::before{ afx-sys-panel > div.loading::before{
background-color: orangered; background-color: orangered;
@ -24,7 +33,7 @@ afx-sys-panel > div.loading::before{
afx-sys-panel > div.loading::before { afx-sys-panel > div.loading::before {
right: 0; right: 0;
bottom:0; top:0;
animation: sys-loading 1s linear infinite; animation: sys-loading 1s linear infinite;
} }
@ -59,12 +68,10 @@ afx-sys-panel > div.loading::before {
afx-sys-panel .afx-panel-os-menu { afx-sys-panel .afx-panel-os-menu {
padding:0; padding:0;
margin: 0; margin: 0;
float:left;
margin-right: 5px; margin-right: 5px;
} }
afx-sys-panel .afx-panel-os-stray{ afx-sys-panel .afx-panel-os-stray{
float:right;
position: relative; position: relative;
} }
@ -83,13 +90,6 @@ afx-sys-panel afx-menu.afx-panel-os-stray afx-menu afx-menu{
top:-4px; 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 afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
{ {
width: 100%; width: 100%;
@ -98,8 +98,45 @@ afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
border: 0px; border: 0px;
} }
afx-sys-panel afx-list-view[data-id="applist"] afx-label span, afx-sys-panel afx-list-view[data-id="applist"] > div.list-container {
afx-sys-panel afx-list-view[data-id="catlist"] afx-label span margin: 0 auto;
{ }
white-space: nowrap; afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul
{
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;
} }

22
src/themes/system/afx-tab-bar.css
View File

@ -7,12 +7,26 @@ afx-tab-bar afx-list-view {
padding:0; padding:0;
margin: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; background-color: transparent;
padding-left: 10px;
padding-right: 10px;
} }
afx-tab-bar[dir="vertical"] afx-list-view > div.list-container
afx-tab-bar afx-list-view > div.list-container > ul li{ {
float:left; 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;
} }

19
src/themes/system/afx-tree-view.css
View File

@ -15,6 +15,14 @@ afx-tree-view li{
list-style: none; list-style: none;
margin:0; margin:0;
padding: 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{ afx-tree-view div{
-webkit-user-select:none; -webkit-user-select:none;
@ -28,8 +36,19 @@ afx-tree-view i.icon-style {
afx-tree-view .afx-tree-view-folder-open:before{ afx-tree-view .afx-tree-view-folder-open:before{
content: "\f147"; content: "\f147";
font-family: "FontAwesome"; font-family: "FontAwesome";
font-size: 22px;
} }
afx-tree-view .afx-tree-view-folder-close:before{ afx-tree-view .afx-tree-view-folder-close:before{
content: "\f196"; content: "\f196";
font-family: "FontAwesome"; 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;
} }

16
src/themes/system/antos.css
View File

@ -4,6 +4,16 @@ html,body{
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; 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 body
{ {
@ -28,7 +38,8 @@ body
#workspace { #workspace {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0; top: 0;
bottom: 35px;
} }
#desktop{ #desktop{
@ -39,6 +50,9 @@ body
user-select:none; user-select:none;
cursor: default; cursor: default;
padding:0px; padding:0px;
overflow: hidden;
top:0;
left: 0;
} }
#desktop > div > ul afx-list-item { #desktop > div > ul afx-list-item {
display:block; display:block;