dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-06-29 10:09:50 +02:00
Code Issues 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
parent 2620d2ccb6
commit 92e27b653f
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/AppDockTag.js \
dist/core/tags/SystemPanelTag.js \
dist/core/tags/DesktopTag.js
dist/core/tags/DesktopTag.js \
dist/core/tags/StackMenuTag.js
javascripts= dist/core/core.js \
dist/core/settings.js \

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

@ -367,12 +367,12 @@ declare namespace OS {
*/
constructor(name: string);
/**
* Exit the sub-window
* Purge the model from the system
*
* @returns {void}
* @memberof SubWindow
* @protected
* @memberof BaseModel
*/
quit(): void;
protected destroy(): void;
/**
* Init the sub-window, this function is called
* on creation of the sub-window object. It is used
@ -458,6 +458,12 @@ declare namespace OS {
* @memberof BaseDialog
*/
protected onexit(_e: BaseEvent): void;
/**
* Show the dialog
*
* @memberof BaseDialog
*/
show(): void;
}
/**
* A basic dialog renders a dialog widget using the UI
@ -1692,6 +1698,10 @@ declare namespace OS {
* is an instance of [[string]]
*/
const REPOSITORY: string;
/**
* Indicate whether the current de
*/
var mobile: boolean;
/**
* Register a model prototype to the system namespace.
* There are two types of model to be registered, if the model
@ -2284,14 +2294,6 @@ declare namespace OS {
* @memberof BaseApplication
*/
sysdock: GUI.tag.AppDockTag;
/**
* Reference to the system application menu located
* on the system panel
*
* @type {GUI.tag.MenuTag}
* @memberof BaseApplication
*/
appmenu: GUI.tag.MenuTag;
/**
* Loading animation check timeout
*
@ -2510,6 +2512,7 @@ declare namespace OS {
}
}
/// <reference types="jquery" />
/// <reference types="jquery" />
declare namespace OS {
/**
* Application argument type definition
@ -2780,7 +2783,14 @@ declare namespace OS {
* @returns {void}
* @memberof BaseModel
*/
quit(force: boolean): void;
quit(force?: boolean): void;
/**
* Purge the model from the system
*
* @protected
* @memberof BaseModel
*/
protected destroy(): void;
/**
* Model meta data, need to be implemented by
* subclasses
@ -3148,6 +3158,14 @@ declare namespace OS {
* @memberof FileViewTag
*/
private _onfileopen;
/**
* placeholder for directory changed event callback
*
* @private
* @type {TagEventCallback<API.VFS.BaseFileHandle>}
* @memberof FileViewTag
*/
private _ondirchanged;
/**
* Reference to the all selected files meta-datas
*
@ -3223,6 +3241,14 @@ declare namespace OS {
* @memberof FileViewTag
*/
set onfileselect(e: TagEventCallback<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.
* The parameter of the callback should be an object
@ -3484,10 +3510,10 @@ interface HTMLElement {
* defined on any child of this element will be ignored.
*
* @param {JQuery.MouseEventBase} e a mouse event
* @param {OS.GUI.tag.MenuTag} m The context menu element [[MenuTag]]
* @param {OS.GUI.tag.StackMenuTag} m The context menu element [[StackMenuTag]]
* @memberof HTMLElement
*/
contextmenuHandle(e: JQuery.MouseEventBase, m: OS.GUI.tag.MenuTag): void;
contextmenuHandle(e: JQuery.MouseEventBase, m: OS.GUI.tag.StackMenuTag): void;
/**
* Mount the element and all the children on its DOM subtree. This action
* is performed in a top-down manner
@ -4069,10 +4095,10 @@ declare namespace OS {
*
* @protected
* @abstract
* @returns {TagLayoutType}
* @returns {TagLayoutType | TagLayoutType[]}
* @memberof ListViewItemTag
*/
protected abstract itemlayout(): TagLayoutType;
protected abstract itemlayout(): TagLayoutType | TagLayoutType[];
/**
* This function is called when the item data is changed.
* It should be implemented in all subclass of this class
@ -4131,10 +4157,63 @@ declare namespace OS {
* List item custom layout definition
*
* @protected
* @returns {TagLayoutType}
* @returns {TagLayoutType | TagLayoutType[]}
* @memberof SimpleListItemTag
*/
protected itemlayout(): TagLayoutType;
protected itemlayout(): TagLayoutType | TagLayoutType[];
}
/**
* The layout of a double line list item contains two
* AFX labels
*
* @export
* @class DoubleLineListItemTag
* @extends {ListViewItemTag}
*/
class DoubleLineListItemTag extends ListViewItemTag {
/**
*Creates an instance of DoubleLineListItemTag.
* @memberof DoubleLineListItemTag
*/
constructor();
/**
* Reset some property to default
*
* @protected
* @memberof DoubleLineListItemTag
*/
protected init(): void;
/**
* Do nothing
*
* @protected
* @memberof DoubleLineListItemTag
*/
protected calibrate(): void;
/**
* Refresh the inner label when the item data
* is changed
*
* @protected
* @returns {void}
* @memberof DoubleLineListItemTag
*/
protected ondatachange(): void;
/**
* Re-render the list item
*
* @protected
* @memberof DoubleLineListItemTag
*/
protected reload(): void;
/**
* List item custom layout definition
*
* @protected
* @returns {TagLayoutType | TagLayoutType[]}
* @memberof DoubleLineListItemTag
*/
protected itemlayout(): TagLayoutType | TagLayoutType[];
}
/**
* This tag defines a traditional or a dropdown list widget.
@ -4349,6 +4428,16 @@ declare namespace OS {
* @memberof ListViewTag
*/
set buttons(v: GenericObject<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
*
@ -4390,6 +4479,13 @@ declare namespace OS {
* @memberof ListViewTag
*/
get selectedItems(): ListViewItemTag[];
/**
* get the selected item index
*
* @readonly
* @type {number}
* @memberof ListViewTag
*/
get selected(): number | number[];
/**
* Add an item to the beginning of the list
@ -4412,7 +4508,7 @@ declare namespace OS {
* Add an item to the beginning or end of the list
*
* @param {GenericObject<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
* @memberof ListViewTag
*/
@ -4460,21 +4556,21 @@ declare namespace OS {
/**
* This function triggers the double click event on an item
*
* @private
* @protected
* @param {TagEventType} e tag event object
* @returns
* @memberof ListViewTag
*/
private idbclick;
protected idbclick(e: TagEventType<ListViewItemTag>): void;
/**
* This function triggers the list item select event
*
* @private
* @protected
* @param {TagEventType} e tag event object
* @returns
* @memberof ListViewTag
*/
private iselect;
protected iselect(e: TagEventType<ListViewItemTag>): void;
/**
* Mount the tag and bind some basic event
*
@ -4665,6 +4761,13 @@ declare namespace OS {
* @memberof TabBarTag
*/
private _ontabselect;
/**
* Cache of touch event
*
* @private
* @meberof TabBarTag
*/
private _previous_touch;
/**
*Creates an instance of TabBarTag.
* @memberof TabBarTag
@ -4694,6 +4797,21 @@ declare namespace OS {
*/
set closable(v: boolean);
get closable(): boolean;
/**
* Setter:
*
* Set the tab bar direction:
* - `horizontal`: horizontal direction
* - `vertical`: vertical direction
*
* Getter:
*
* Get the tab bar direction
*
* @memberof TabBarTag
*/
set dir(v: string);
get dir(): string;
/**
* Add a tab in the end of the tab bar
*
@ -4733,6 +4851,14 @@ declare namespace OS {
*/
set selected(v: number | number[]);
get selected(): number | number[];
/**
* Get the latest selected item
*
* @readonly
* @type {ListViewItemTag}
* @memberof TabBarTag
*/
get selectedItem(): ListViewItemTag;
/**
* Set the tab close event handle
*
@ -6166,7 +6292,14 @@ declare namespace OS {
* @type {GenericObject<any>}
* @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.
* @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 {
namespace GUI {
namespace tag {
@ -7553,6 +7952,13 @@ declare namespace OS {
* @memberof SliderTag
*/
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
*
@ -7841,25 +8247,6 @@ declare namespace OS {
* @memberof FloatListTag
*/
set onready(v: (e: FloatListTag) => void);
/**
* Setter:
*
* Set the direction of the list item layout.
* Two directions are available:
* - `vertical`
* - `horizontal`
*
* This setter acts as a DOM attribute
*
* Getter:
*
* Get the currently set direction of list
* item layout
*
* @memberof FloatListTag
*/
set dir(v: string);
get dir(): string;
/**
* Disable the dropdown option in this list
*
@ -8289,6 +8676,14 @@ declare namespace OS {
* @memberof WindowTag
*/
private _history;
/**
* This placeholder store the callback for the menu open event
*
* @private
* @type {(el: StackMenuTag) => void}
* @memberof WindowTag
*/
private _onmenuopen;
/**
* This placeholder stores the offset of the virtual desktop element
*
@ -8314,6 +8709,12 @@ declare namespace OS {
*/
set blur_overlay(v: boolean);
get blur_overlay(): boolean;
/**
* Setter: set menu open event handler
*
* @memberof WindowTag
*/
set onmenuopen(f: (el: StackMenuTag) => void);
/**
* Init window tag
* - `shown`: false
@ -8359,6 +8760,12 @@ declare namespace OS {
*/
set height(v: number);
get height(): number;
/**
* Set the application menu content
*
* @memberof WindowTag
*/
set menu(v: GenericObject<any>[]);
/**
* Setter: enable/disable window minimizable
*
@ -10136,19 +10543,17 @@ declare namespace OS {
* @interface AnnouncerListenerType
*/
interface AnnouncerListenerType {
[index: number]: {
/**
* The event name
*
* @type {string}
*/
e: string;
/**
* The event callback
*
*/
f: (d: any) => void;
}[];
/**
* The event name
*
* @type {string}
*/
e: string;
/**
* The event callback
*
*/
f: (d: any) => void;
}
/**
* This class is the based class used in AntOS event
@ -10250,7 +10655,7 @@ declare namespace OS {
/**
* Placeholder of all global events listeners
*/
var listeners: API.AnnouncerListenerType;
var listeners: Map<BaseModel | 0, API.AnnouncerListenerType[]>;
/**
* Subscribe to a global event
*
@ -10259,7 +10664,15 @@ declare namespace OS {
* @param {(d: API.AnnouncementDataType<any>) => void} f event 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
*

10
src/bootstrap.ts
View File

@ -21,5 +21,15 @@ Ant.onload = function () {
"webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange",
() => (Ant.OS.GUI.fullscreen = !Ant.OS.GUI.fullscreen)
);
const agent = navigator.userAgent||navigator.vendor||(window as any).opera;
Ant.OS.mobile = false;
if(
/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(agent)
||
/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(agent.substr(0,4))
)
{
Ant.OS.mobile = true;
}
return Ant.OS.boot();
};

61
src/core/Announcerment.ts
View File

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

26
src/core/BaseApplication.ts
View File

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

61
src/core/BaseDialog.ts
View File

@ -58,22 +58,15 @@ namespace OS {
}
/**
* Exit the sub-window
* Purge the model from the system
*
* @returns {void}
* @memberof SubWindow
* @protected
* @memberof BaseModel
*/
quit(): void {
const evt = new BaseEvent("exit", false);
this.onexit(evt);
if (!evt.prevent) {
delete this._observable;
if (this.scheme) {
$(this.scheme).remove();
}
if (this.dialog) {
return this.dialog.quit();
}
protected destroy(): void
{
if (this.scheme) {
$(this.scheme).remove();
}
}
@ -218,6 +211,19 @@ namespace OS {
}
}
/**
* Show the dialog
*
* @memberof BaseDialog
*/
show(): void {
this.trigger("focus", undefined);
this.trigger("focused", undefined);
if (this.dialog) {
this.dialog.show();
}
}
}
/**
@ -320,6 +326,7 @@ namespace OS {
}
win.resizable = false;
win.minimizable = false;
win.menu = undefined;
$(win).trigger("focus");
}
}
@ -1216,20 +1223,18 @@ namespace OS {
*/
FileDialog.scheme = `\
<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-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>
<afx-hbox data-height = '30'>
<div style=' text-align:right;'>
<afx-button data-id = "btnOk" text = "__(Ok)"></afx-button>
<afx-button data-id = "bt-cancel" text = "__(Cancel)"></afx-button>
</div>
<div data-width="5"></div>
</afx-hbox>
</afx-vbox>
</afx-hbox>
<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>
<input data-height = '26' type = "text" data-id = "filename" style="margin-left:5px; margin-right:5px;display:none;" ></input>
<afx-hbox data-height = '30'>
<div style=' text-align:right;'>
<afx-button data-id = "btnOk" text = "__(Ok)"></afx-button>
<afx-button data-id = "bt-cancel" text = "__(Cancel)"></afx-button>
</div>
<div data-width="5"></div>
</afx-hbox>
</afx-vbox>
</afx-app-window>\
`;

18
src/core/BaseModel.ts
View File

@ -296,6 +296,8 @@ namespace OS {
this.on("exit", () => this.quit(false));
this.host = this._gui.desktop();
this.dialog = undefined;
// relay global events to local events
this.subscribe("desktopresize", (e) => this.observable.trigger("desktopresize", e));
}
/**
@ -334,7 +336,7 @@ namespace OS {
* @returns {void}
* @memberof BaseModel
*/
quit(force: boolean): void {
quit(force: boolean = false): void {
const evt = new BaseEvent("exit", force);
this.onexit(evt);
if (!evt.prevent) {
@ -346,10 +348,22 @@ namespace OS {
if (this.dialog) {
this.dialog.quit();
}
return PM.kill(this);
announcer.unregister(this);
this.destroy();
}
}
/**
* Purge the model from the system
*
* @protected
* @memberof BaseModel
*/
protected destroy(): void
{
return PM.kill(this);
}
/**
* Model meta data, need to be implemented by
* subclasses

11
src/core/core.ts
View File

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

34
src/core/gui.ts
View File

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

2
src/core/pm.ts
View File

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

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

@ -99,7 +99,7 @@ namespace OS {
}
}
if (i !== -1) {
$(this.items[i].domel).attr("tooltip", `cr:${app.title()}`);
$(this.items[i].domel).attr("tooltip", `ct:${app.title()}`);
}
}
@ -257,7 +257,7 @@ namespace OS {
"afx-button"
)[0] as any) as ButtonTag;
const app = bt.data as application.BaseApplication;
m.items = [
m.nodes = [
{ text: "__(New window)", dataid: "new" },
{ text: "__(Show)", dataid: "show" },
{ text: "__(Hide)", dataid: "hide" },

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

@ -24,7 +24,22 @@ namespace OS {
* @type {GenericObject<any>}
* @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.

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

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

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

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

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

@ -48,30 +48,6 @@ namespace OS {
this._onready = v;
}
/**
* Setter:
*
* Set the direction of the list item layout.
* Two directions are available:
* - `vertical`
* - `horizontal`
*
* This setter acts as a DOM attribute
*
* Getter:
*
* Get the currently set direction of list
* item layout
*
* @memberof FloatListTag
*/
set dir(v: string) {
$(this).attr("dir", v);
this.calibrate();
}
get dir(): string {
return $(this).attr("dir");
}
/**
* Disable the dropdown option in this list
@ -164,9 +140,9 @@ namespace OS {
.css("cursor", "default")
.css("display", "block")
.css("position", "absolute")
.on("mousedown", (evt) => {
.on("pointerdown", (evt) => {
const globalof = $(this.refs.mlist).offset();
evt.preventDefault();
//evt.preventDefault();
const offset = $(el).offset();
offset.top = evt.clientY - offset.top;
offset.left = evt.clientX - offset.left;
@ -184,11 +160,11 @@ namespace OS {
};
var mouse_up = function (e: JQuery.MouseEventBase) {
$(window).off("mousemove", mouse_move);
return $(window).off("mouseup", mouse_up);
$(window).off("pointermove", mouse_move);
return $(window).off("pointerup", mouse_up);
};
$(window).on("mousemove", mouse_move);
return $(window).on("mouseup", mouse_up);
$(window).on("pointermove", mouse_move);
return $(window).on("pointerup", mouse_up);
});
}

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

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

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

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

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

@ -114,38 +114,6 @@ namespace OS {
* @memberof NSpinnerTag
*/
calibrate(): void {
$(this.refs.holder).css(
"width",
$(this).width() - 20 + "px"
);
$(this.refs.holder).css("height", $(this).height() + "px");
$(this.refs.spinner)
.css("width", "20px")
.css("height", $(this).height() + "px");
$(this.refs.incr)
.css("height", $(this).height() / 2 - 2 + "px")
.css("position", "relative");
$(this.refs.decr)
.css("height", $(this).height() / 2 - 2 + "px")
.css("position", "relative");
$(this.refs.spinner)
.find("li")
.css("display", "block")
.css("text-align", "center")
.css("vertical-align", "middle");
$(this.refs.spinner)
.find("i")
.css("font-size", "16px")
.css("position", "absolute");
const fn = function (ie: HTMLElement, pos: string) {
const el = $(ie).find("i");
el.css(
pos,
($(ie).height() - el.height()) / 2 + "px"
).css("left", ($(ie).width() - el.width()) / 2 + "px");
};
fn(this.refs.decr, "bottom");
fn(this.refs.incr, "top");
}
/**

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

@ -127,7 +127,9 @@ namespace OS {
* @memberof OverlayTag
*/
calibrate(): void {
$(this).css("width", this.width).css("height", this.height);
$(this)
.css("width", this.width)
.css("height", this.height);
return this.observable.trigger("resize", {
id: this.aid,
data: {

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

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

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

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

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

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

@ -39,6 +39,13 @@ namespace OS {
*/
private _ontabselect: TagEventCallback<TabEventData>;
/**
* Cache of touch event
*
* @private
* @meberof TabBarTag
*/
private _previous_touch: {x: number, y: number};
/**
*Creates an instance of TabBarTag.
* @memberof TabBarTag
@ -57,6 +64,8 @@ namespace OS {
*/
protected init(): void {
this.selected = -1;
this.dir = "horizontal";
this._previous_touch = {x: 0, y:0};
}
/**
@ -82,6 +91,30 @@ namespace OS {
return this.hasattr("closable");
}
/**
* Setter:
*
* Set the tab bar direction:
* - `horizontal`: horizontal direction
* - `vertical`: vertical direction
*
* Getter:
*
* Get the tab bar direction
*
* @memberof TabBarTag
*/
set dir(v: string) {
$(this).attr("dir", v);
if (!v) {
return;
}
(this.refs.list as ListViewTag).dir = v;
}
get dir(): string {
return $(this).attr("dir") as any;
}
/**
* Add a tab in the end of the tab bar
*
@ -144,6 +177,16 @@ namespace OS {
get selected(): number | number[] {
return (this.refs.list as ListViewTag).selected;
}
/**
* Get the latest selected item
*
* @readonly
* @type {ListViewItemTag}
* @memberof TabBarTag
*/
get selectedItem(): ListViewItemTag {
return (this.refs.list as ListViewTag).selectedItem;
}
/**
* Set the tab close event handle
@ -179,6 +222,39 @@ namespace OS {
this._ontabselect(e);
return this.observable.trigger("tabselect", e);
};
const list_container = $(".list-container", this.refs.list);
list_container.each((i,el) => {
$(el).on("touchstart", e => {
this._previous_touch.x = e.touches[0].pageX;
this._previous_touch.y = e.touches[0].pageY;
});
$(el).on("touchmove", e => {
const offset = {x:0, y:0};
offset.x = this._previous_touch.x - e.touches[0].pageX ;
offset.y = this._previous_touch.y - e.touches[0].pageY;
if(this.dir == "horizontal")
{
el.scrollLeft += offset.x;
}
else
{
el.scrollTop += offset.y;
}
this._previous_touch.x = e.touches[0].pageX;
this._previous_touch.y = e.touches[0].pageY;
});
$(el).on("wheel", (evt)=>{
if(this.dir == "horizontal")
{
el.scrollLeft += (evt.originalEvent as WheelEvent).deltaY;
}
else
{
el.scrollTop += (evt.originalEvent as WheelEvent).deltaY;
}
});
});
}
/**

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

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

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

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

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

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

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

@ -63,6 +63,14 @@ namespace OS {
*/
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
*
@ -79,7 +87,7 @@ namespace OS {
constructor() {
super();
}
/**
* blur overlay: If active the window overlay will be shown
* on inactive (blur event)
@ -96,7 +104,15 @@ namespace OS {
get blur_overlay(): boolean {
return this.hasattr("blur-overlay");
}
/**
* Setter: set menu open event handler
*
* @memberof WindowTag
*/
set onmenuopen(f: (el: StackMenuTag) => void)
{
this._onmenuopen = f;
}
/**
* Init window tag
* - `shown`: false
@ -117,6 +133,7 @@ namespace OS {
this.minimizable = true;
this.resizable = true;
this.apptitle = "Untitled";
this._onmenuopen = undefined;
}
/**
@ -174,6 +191,24 @@ namespace OS {
get height(): number {
return this._height;
}
/**
* Set the application menu content
*
* @memberof WindowTag
*/
set menu(v: GenericObject<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
@ -262,22 +297,56 @@ namespace OS {
* @memberof WindowTag
*/
protected mount(): void {
const btn_menu = (this.refs.btnMenu as ButtonTag);
const min_btn = (this.refs["minbt"] as ButtonTag);
const max_btn = (this.refs["maxbt"] as ButtonTag);
const close_btn = (this.refs["closebt"] as ButtonTag);
const stackmenu = (this.refs.stackmenu as StackMenuTag);
stackmenu.context = true;
btn_menu.iconclass = "bi bi-list";
min_btn.iconclass = "bi bi-dash";
max_btn.iconclass = "bi bi-stop";
close_btn.iconclass = "bi bi-x";
this.contextmenuHandle = function (e) { };
$(this.refs["minbt"]).on("click", (e) => {
min_btn.onbtclick =(_) => {
return this.observable.trigger("hide", {
id: this.aid,
});
});
$(this.refs["maxbt"]).on("click", (e) => {
};
btn_menu.onbtclick = (e) => {
e.data.stopPropagation();
if($(stackmenu).is(":hidden"))
{
if(this._onmenuopen)
{
this._onmenuopen(stackmenu);
}
else
{
stackmenu.reset();
}
stackmenu.show();
}
else
{
$(stackmenu).hide();
}
};
max_btn.onbtclick = (_) => {
return this.toggle_window();
});
};
$(this.refs["closebt"]).on("click", (e) => {
close_btn.onbtclick = (_) => {
return this.observable.trigger("exit", {
id: this.aid,
});
});
};
stackmenu.onmenuselect = (e) => {
if(!e.data.item.data.nodes)
{
stackmenu.selected = -1;
}
}
const left = ($(this.desktop).width() - this.width) / 2;
const top = ($(this.desktop).height() - this.height) / 2;
$(this)
@ -285,7 +354,7 @@ namespace OS {
.css("left", `${left}px`)
.css("top", `${top}px`)
.css("z-index", 10);
$(this).on("mousedown", (e) => {
$(this).on("pointerdown", (e) => {
if (this._shown) {
return;
}
@ -293,7 +362,6 @@ namespace OS {
id: this.aid,
});
});
//$(this.refs.win_overlay).css("background-color", "red");
$(this.refs["dragger"]).on("dblclick", (e) => {
return this.toggle_window();
});
@ -347,7 +415,26 @@ namespace OS {
h: this.height,
});
$(this).attr("tabindex", 0).css("outline", "none");
return this.observable.trigger("rendered", {
if(OS.mobile)
{
this.toggle_window();
//this.minimizable = false;
this.resizable = false;
}
this.observable.on("desktopresize", (e) => {
if(this._isMaxi)
{
this._isMaxi = false;
this.toggle_window(true);
}
/*else
{
const w = this.width > e.data.width ? e.data.width: this.width;
const h = this.height > e.data.height ? e.data.height: this.height;
this.setsize({ w: w, h: h });
}*/
});
this.observable.trigger("rendered", {
id: this.aid,
});
}
@ -384,12 +471,12 @@ namespace OS {
$(this.refs["dragger"])
.css("user-select", "none")
.css("cursor", "default");
$(this.refs["dragger"]).on("mousedown", (e) => {
e.preventDefault();
$(this.refs.dragger).on("pointerdown", (e) => {
//e.preventDefault();
const offset = $(this).offset();
offset.top = e.clientY - offset.top;
offset.left = e.clientX - offset.left;
$(window).on("mousemove", (e) => {
$(window).on("pointermove", (e) => {
$(this.refs.win_overlay).show();
let left: number, top: number;
if (this._isMaxi) {
@ -415,10 +502,10 @@ namespace OS {
.css("top", `${top}px`)
.css("left", `${left}px`);
});
return $(window).on("mouseup", (e) => {
return $(window).on("pointerup", (e) => {
$(this.refs.win_overlay).hide();
$(window).off("mousemove", null);
return $(window).off("mouseup", null);
$(window).off("pointermove", null);
return $(window).off("pointerup", null);
});
});
}
@ -452,32 +539,32 @@ namespace OS {
}
const mouse_up_hdl = (e) => {
$(this.refs.win_overlay).hide();
$(window).off("mousemove", mouse_move_hdl);
return $(window).off("mouseup", mouse_up_hdl);
$(window).off("pointermove", mouse_move_hdl);
return $(window).off("pointerup", mouse_up_hdl);
}
$(this.refs["grip"]).on("mousedown", (e) => {
$(this.refs["grip"]).on("pointerdown", (e) => {
e.preventDefault();
offset.top = e.clientY;
offset.left = e.clientX;
target = this.refs.grip;
$(window).on("mousemove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl);
$(window).on("pointermove", mouse_move_hdl);
$(window).on("pointerup", mouse_up_hdl);
});
$(this.refs.grip_bottom).on("mousedown", (e) => {
$(this.refs.grip_bottom).on("pointerdown", (e) => {
e.preventDefault();
offset.top = e.clientY;
offset.left = e.clientX;
target = this.refs.grip_bottom;
$(window).on("mousemove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl);
$(window).on("pointermove", mouse_move_hdl);
$(window).on("pointerup", mouse_up_hdl);
});
$(this.refs.grip_right).on("mousedown", (e) => {
$(this.refs.grip_right).on("pointerdown", (e) => {
e.preventDefault();
offset.top = e.clientY;
offset.left = e.clientX;
target = this.refs.grip_right;
$(window).on("mousemove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl);
$(window).on("pointermove", mouse_move_hdl);
$(window).on("pointerup", mouse_up_hdl);
});
}
/**
@ -488,9 +575,9 @@ namespace OS {
* @returns {void}
* @memberof WindowTag
*/
private toggle_window(): void {
private toggle_window(force?: boolean): void {
let h: number, w: number;
if (!this.resizable) {
if (!this.resizable && !force) {
return;
}
if (this._isMaxi === false) {
@ -500,8 +587,8 @@ namespace OS {
width: $(this).css("width"),
height: $(this).css("height"),
};
w = $(this.desktop).width();
h = $(this.desktop).height();
w = $(this.desktop).width() - 2;
h = $(this.desktop).height() - 2;
$(this).css("top", "0").css("left", "0");
this.setsize({ w, h });
this._isMaxi = true;
@ -538,18 +625,12 @@ namespace OS {
children: [
{
el: "li",
class: "afx-window-close",
ref: "closebt",
},
{
el: "li",
class: "afx-window-minimize",
ref: "minbt",
},
{
el: "li",
class: "afx-window-maximize",
ref: "maxbt",
children: [
{
el: "afx-button",
ref: "btnMenu",
},
],
},
{
el: "li",
@ -562,9 +643,38 @@ namespace OS {
},
],
},
{
el: "li",
class: "afx-window-minimize",
children: [
{
el: "afx-button",
ref: "minbt",
}
]
},
{
el: "li",
class: "afx-window-maximize",
children: [
{
el: "afx-button",
ref: "maxbt",
}
]
},
{
el: "li",
class: "afx-window-close",
children: [
{
el: "afx-button",
ref: "closebt",
}
]
},
],
},
{ el: "div", class: "afx-clear" },
{
el: "div",
ref: "yield",
@ -590,6 +700,10 @@ namespace OS {
ref: "win_overlay",
class: "afx-window-overlay",
},
{
el: "afx-stack-menu",
ref: "stackmenu"
}
],
},
];

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

@ -24,10 +24,10 @@ interface HTMLElement {
* defined on any child of this element will be ignored.
*
* @param {JQuery.MouseEventBase} e a mouse event
* @param {OS.GUI.tag.MenuTag} m The context menu element [[MenuTag]]
* @param {OS.GUI.tag.StackMenuTag} m The context menu element [[StackMenuTag]]
* @memberof HTMLElement
*/
contextmenuHandle(e: JQuery.MouseEventBase, m: OS.GUI.tag.MenuTag): void;
contextmenuHandle(e: JQuery.MouseEventBase, m: OS.GUI.tag.StackMenuTag): void;
/**
* Mount the element and all the children on its DOM subtree. This action

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

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

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

21
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-hbox data-height = "23" data-id = "nav-bar">
<afx-button data-width = "23" data-id = "btback" iconclass = "fa fa-arrow-left"></afx-button>
<input type = "text" data-id = "navinput"></input>
<afx-hbox data-height = "35" data-id = "nav-bar">
<afx-list-view data-id = "favouri" dropdown="true"></afx-list-view>
<div data-width = "2"></div>
<afx-button data-width = "23" data-id = "btgrid" iconclass = "fa fa-th"></afx-button>
<div data-width = "2"></div>
<afx-button data-width = "23" data-id = "btlist" iconclass = "fa fa-th-list"></afx-button>
</afx-hbox>
<div data-height="5"></div>
<afx-hbox>
<afx-list-view data-id = "favouri" data-width = "150" min-width="100">
</afx-list-view>
<afx-resizer data-width = "3" ></afx-resizer>
<afx-file-view data-id = "fileview"></afx-file-view>
<afx-button data-width = "40" data-id = "btback" iconclass = "fa fa-arrow-up"></afx-button>
<afx-button data-width = "40" data-id = "btgrid" iconclass = "fa fa-th"></afx-button>
<afx-button data-width = "40" data-id = "btlist" iconclass = "fa fa-th-list"></afx-button>
</afx-hbox>
<afx-file-view data-id = "fileview"></afx-file-view>
</afx-vbox>
</afx-app-window>

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

@ -82,4 +82,9 @@ afx-app-window[data-id="marketplace-win"] p.stat {
afx-app-window[data-id = "repository-dialog-win"] afx-list-view[data-id="repo-list"] ul.complex-content > li{
font-size: 11px;
font-style: italic;
}
afx-app-window[data-id="marketplace-win"] afx-tab-bar[data-id="catlist"] i.label-text
{
font-weight: bold;
}

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

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

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

@ -1,31 +1,28 @@
<afx-app-window data-id = "marketplace-win" apptitle="MarketPlace" width="650" height="400">
<afx-hbox >
<afx-vbox data-width = "350">
<afx-hbox data-height= "23" data-id="search-container">
<div data-width="17" data-id="searchicon"></div>
<input data-id = "searchbox" ></input>
</afx-hbox>
<afx-hbox>
<afx-list-view data-id = "catlist" dropdown = "false" data-width="35%"></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-vbox data-id = "container">
<afx-label data-id = "appname" data-height = "45"></afx-label>
<afx-hbox data-height = "50">
<div style = "text-align:left;">
<afx-button data-id = "bt-remove" text = "__(Uninstall)"></afx-button>
<afx-button data-id = "bt-exec" text = "__(Launch)"></afx-button>
<afx-button data-id = "bt-install" text = "__(Install)" ></afx-button>
<p class="stat"><afx-label data-id="vstat"></afx-label></p>
<afx-vbox >
<afx-hbox data-height= "23" data-id="search-container">
<div data-width="17" data-id="searchicon"></div>
<input data-id = "searchbox" ></input>
</afx-hbox>
<afx-tab-bar data-id = "catlist" data-height="45"></afx-tab-bar>
<afx-hbox>
<afx-list-view data-id = "applist" dropdown = "false" data-width="30%"></afx-list-view>
<afx-resizer data-width = "3" ></afx-resizer>
<afx-vbox data-id = "container">
<afx-label data-id = "appname" data-height = "45"></afx-label>
<afx-hbox data-height = "50">
<div style = "text-align:left;">
<afx-button data-id = "bt-remove" text = "__(Uninstall)"></afx-button>
<afx-button data-id = "bt-exec" text = "__(Launch)"></afx-button>
<afx-button data-id = "bt-install" text = "__(Install)" ></afx-button>
<p class="stat"><afx-label data-id="vstat"></afx-label></p>
</div>
</afx-hbox>
<div data-id="desc-container">
<p data-id = "app-desc"></p>
<ul data-id = "app-detail"></ul>
</div>
</afx-hbox>
<div data-id="desc-container">
<p data-id = "app-desc"></p>
<ul data-id = "app-detail"></ul>
</div>
</afx-vbox>
</afx-hbox>
</afx-vbox>
</afx-hbox>
</afx-vbox>
</afx-app-window>

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

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

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

@ -67,7 +67,7 @@ namespace OS {
this.wplist.buttons = [
{
text: "+",
iconclass: "bi bi-plus",
onbtclick: (e) => {
return this.parent
.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.srvlist.buttons = [
{
text: "+",
iconclass: "bi bi-plus",
onbtclick: () => {
let services = [];
for (var k in setting.system.packages) {
@ -75,7 +75,7 @@ namespace OS {
},
},
{
text: "-",
iconclass: "bi bi-dash",
onbtclick: () => {
const item = this.srvlist.selectedItem;
if (!item) {
@ -90,7 +90,7 @@ namespace OS {
this.applist.buttons = [
{
text: "+",
iconclass: "bi bi-plus",
onbtclick: () => {
const apps = (() => {
const result = [];
@ -127,7 +127,7 @@ namespace OS {
},
},
{
text: "-",
iconclass: "bi bi-dash",
onbtclick: () => {
const item = this.applist.selectedItem;
if (!item) {

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

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

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

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

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

60
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-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">
<div data-width="10"></div>
<afx-vbox>
<div data-height="5"></div>
<afx-label text = "__(Wallpaper)" iconclass = "fa fa-image" class = "header" data-height="23"></afx-label>
<afx-label text = "__(Wallpaper)" iconclass = "fa fa-image" class = "header" data-height="30"></afx-label>
<afx-hbox>
<afx-list-view data-width="150" data-id="wplist"></afx-list-view>
<afx-resizer data-width="2"></afx-resizer>
<afx-vbox>
<div data-id = "wp-preview"></div>
<div data-height="5"></div>
<afx-hbox data-height="25">
<afx-list-view data-id = "wpsize" dropdown="true"></afx-list-view>
<div data-width="5"></div>
<afx-list-view data-id = "wprepeat" dropdown="true"></afx-list-view>
</afx-hbox>
</afx-vbox>
<div data-id = "wp-preview"></div>
</afx-hbox>
<div data-height="5"></div>
<afx-label text = "__(Theme)" iconclass = "fa fa-window-restore" class = "header" data-height="23"></afx-label>
<afx-list-view data-height="30" data-id="theme-list" dropdown="true"></afx-list-view>
<afx-hbox data-height="35">
<afx-list-view data-id = "wpsize" dropdown="true"></afx-list-view>
<div data-width="5"></div>
<afx-list-view data-id = "wprepeat" dropdown="true"></afx-list-view>
</afx-hbox>
<afx-label text = "__(Theme)" iconclass = "fa fa-window-restore" class = "header" data-height="30"></afx-label>
<afx-list-view data-height="35" data-id="theme-list" dropdown="true"></afx-list-view>
<div data-height="5"></div>
</afx-vbox>
<div data-width="10"></div>
@ -31,22 +27,19 @@
<afx-hbox data-id="vfs" tabname = "__(VFS)" iconclass = "fa fa-inbox">
<div data-width="10"></div>
<afx-vbox>
<div data-height="5"></div>
<afx-label text = "__(Mount points)" iconclass = "fa fa-folder" class = "header" data-height="23"></afx-label>
<afx-label text = "__(Mount points)" iconclass = "fa fa-folder" class = "header" data-height="30"></afx-label>
<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="23"></afx-label>
<afx-hbox data-height = "25" >
<afx-label text = "__(Desktop path)" iconclass = "fa fa-desktop" class = "header" data-height="30"></afx-label>
<afx-hbox data-height = "40" >
<div data-width="16"></div>
<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>
<div data-height="5"></div>
<afx-label text = "__(Local packages path)" iconclass = "fa fa-cube" class = "header" data-height="23"></afx-label>
<afx-hbox data-height = "25" >
<afx-label text = "__(Local packages path)" iconclass = "fa fa-cube" class = "header" data-height="30"></afx-label>
<afx-hbox data-height = "40" >
<div data-width="16"></div>
<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>
<div data-height="10"></div>
</afx-vbox>
@ -56,8 +49,7 @@
<afx-hbox data-id="locale" tabname = "__(Languages)"iconclass = "fa fa-globe">
<div data-width="10"></div>
<afx-vbox>
<div data-height="5"></div>
<afx-label text = "__(System locale)" iconclass = "fa fa-globe" class = "header" data-height="23"></afx-label>
<afx-label text = "__(System locale)" iconclass = "fa fa-globe" class = "header" data-height="30"></afx-label>
<afx-list-view data-id="lglist"></afx-list-view>
<div data-height="10"></div>
</afx-vbox>
@ -67,10 +59,10 @@
<afx-hbox data-id="startup" tabname = "__(Startup)" iconclass = "fa fa-cog">
<div data-width="10"></div>
<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>
<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>
<div data-height="10"></div>
</afx-vbox>
@ -80,10 +72,10 @@
<afx-hbox data-id="app-services" tabname = "__(Apps. and Services)" iconclass = "fa fa-adn">
<div data-width="10"></div>
<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>
<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>
<div data-height="10"></div>
</afx-vbox>
@ -91,10 +83,10 @@
</afx-hbox>
</afx-tab-container>
<afx-hbox data-height="35">
<div data-width = "150" class = "footer"></div>
<afx-hbox data-height="45">
<div></div>
<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>
</afx-hbox>

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

@ -5,42 +5,26 @@ afx-app-window div.afx-window-wrapper{
background-color:#363636;
}
afx-app-window.unactive > div.afx-window-wrapper{
background-color: #464646;
/*background-color: #464646;*/
box-shadow: none;
}
afx-app-window ul.afx-window-top{
height: 20px;
border-bottom: 1px solid #262626;
}
afx-app-window div.afx-window-overlay {
top: 22px;
}
afx-app-window ul.afx-window-top li{
margin-left: 3px;
margin-top:4px;
}
afx-app-window ul.afx-window-top .afx-window-close,.afx-window-minimize,.afx-window-maximize{
width: 10px;
height: 10px;
border-radius: 0;
}
/*
afx-app-window ul li.afx-window-close{
background-color: #Fc605b;
float:left;
}
afx-app-window ul li.afx-window-minimize{
background-color: #fec041;
float:left;
}
afx-app-window ul li.afx-window-maximize{
background-color: #35cc4b;
float:left;
}
}*/
afx-app-window ul li.afx-window-title{
margin-top:1px;
text-align: center;
text-align: left;
}
afx-app-window div.afx-window-content
@ -49,8 +33,13 @@ afx-app-window div.afx-window-content
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/*
afx-app-window.unactive div.afx-window-content
{
background-color:#464646;
}
}*/
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{
padding: 4px;
border: 1px solid #262626;
background-color: #464646;
color: white;
@ -7,14 +6,11 @@ afx-button button{
font-family: "Ubuntu";
}
afx-button button[disabled]{
color: #868686;
}
afx-button i.icon-style {
width: 16px;
height: 16px;
display: inline-block;
}
afx-button button:active, afx-button button.btactive {
background-color: #2786F3;
color: white;

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

@ -1,7 +1,4 @@
afx-apps-dock{
bottom: 0px;
top: 0px;
width: 32px;
background-color:#363636;
padding:0;
padding-top: 0;
@ -10,23 +7,6 @@ afx-apps-dock{
border:1px solid #262626;
box-shadow: none;
}
afx-apps-dock afx-button button{
width: 32px;
height: 32px;
font-size: 19px;
margin-bottom: 0;
padding:0px;
background-color: transparent;
border:0;
border-radius: 0;
}
afx-apps-dock afx-button afx-label i.icon-style{
width: 24px;
height: 24px;
margin-left: 2px;
margin-bottom: 0px;
border:0;
}
afx-apps-dock afx-button.selected > button {
background-color: #464646;

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

@ -1,7 +1,4 @@
afx-file-view afx-label.status{
padding:3px;
right: 0px;
height: 15px;
background-color: #464646;
border-top: 1px solid #262626;
@ -14,7 +11,7 @@ afx-file-view afx-list-view > div.list-container > ul li{
margin-right: 5px;
margin-bottom: 5px;
}
afx-file-view afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li {
afx-file-view afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li {
background-color: transparent;
}
afx-file-view afx-list-view i.dir:before{
@ -40,7 +37,7 @@ afx-file-view afx-list-view i.file:before{
font-weight: normal;
}
afx-file-view afx-list-view > div.list-container > ul > afx-list-item > li.selected
afx-file-view afx-list-view > div.list-container > ul > .afx-list-item > li.selected
{
background-color: transparent;
}
@ -55,7 +52,6 @@ afx-file-view afx-grid-view{
afx-file-view afx-grid-view i.file:before{
content: "\f016";
font-family: "FontAwesome";
font-size: 16px;
color: white;
font-style: normal;
font-weight: normal;
@ -63,7 +59,6 @@ afx-file-view afx-grid-view i.file:before{
afx-file-view afx-grid-view i.dir:before{
content: "\f07b";
font-family: "FontAwesome";
font-size: 16px;
color: #76D2F9;
font-style: normal;
font-weight: normal;
@ -74,36 +69,28 @@ afx-file-view afx-grid-view i{
afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{
color:white;
}
afx-file-view afx-grid-view afx-grid-row afx-grid-cell
{
padding: 3px;
}
afx-file-view afx-grid-view .grid_row_header afx-grid-cell{
background-color: #464646;
border-top: 1px solid #262626;
border-right: 1px solid #262626;
border-bottom: 1px solid #262626;
padding: 3px;
}
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
content: "\f07b";
font-family: "FontAwesome";
font-size: 16px;
color:#76D2F9;
}
afx-file-view afx-tree-view .afx-tree-view-folder-open:before{
content: "\f07c";
font-family: "FontAwesome";
color:#76D2F9;
font-size: 16px;
}
afx-file-view afx-tree-view .afx-tree-view-item:before{
content: "\f016";
font-family: "FontAwesome";
font-size: 16px;
font-style: normal;
font-weight: normal;
}
@ -112,14 +99,10 @@ afx-file-view afx-tree-view div.afx_tree_item_selected, afx-file-view afx-tree-v
background-color: transparent;
}
afx-file-view afx-tree-view li.itemname{
padding:3px;
padding-right: 5px;
}
afx-file-view afx-tree-view div.afx_tree_item_selected .itemname{
afx-file-view afx-tree-view div.afx_tree_item_selected ul{
background-color: #116cd6;
color:white;
border-radius: 3px;
border-radius: 0;
}
afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{

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

@ -1,29 +1,17 @@
afx-list-view > div.list-container > ul li{
padding: 5px;
padding-top:3px;
padding-bottom: 3px;
padding-right: 10px;
background-color: #363636;
}
afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li{
afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li{
background-color:#3b3b3b;
}
afx-list-view i.closable{
width: 16px;
height: 16px;
}
afx-list-view i.closable:before{
font-size: 10px;
margin-left: 10px;
color: #868686;
}
afx-list-view > div.list-container > ul li > i {
margin-right: 3px;
afx-list-view.dropdown > div.list-container > ul li:hover{
background-color: #464646;
}
afx-list-view > div.list-container > ul > afx-list-item > li.selected{
afx-list-view > div.list-container > ul > .afx-list-item li.selected{
background-color: #116cd6;
color:white;
}
@ -32,36 +20,17 @@ afx-list-view.dropdown > div.list-container > ul{
border:1px solid #262626;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
border-radius: 3px;
max-height: 150px;
background-color: #363636;
border-top-left-radius: 0px;
z-index: 10;
}
afx-list-view.dropdown div.list-container div{
afx-list-view.dropdown {
color: white;
padding-top:3px;
padding-bottom: 3px;
border:1px solid #262626;
border-radius: 3px;
background-color: transparent;
height: 17px;
}
afx-list-view.dropdown div.list-container div > afx-label{
padding-left:3px;
}
afx-list-view.dropdown div.list-container div:before {
content: "\f107";
font-family: "FontAwesome";
font-size: 11px;
font-style: normal;
position: absolute;
top:25%;
right: 5px;
}
afx-list-view.dropdown > div.list-container > ul li:hover{
background-color: #464646;
}
afx-list-view ul.complex-content{
padding: 0;
margin: 0;
@ -76,15 +45,15 @@ afx-list-view ul.complex-content li{
afx-list-view > div.list-container > ul li.selected ul.complex-content li{
color:white;
}
afx-list-view div.button_container afx-button{
margin-right: 2px;
}
afx-list-view div.button_container afx-button button{
border-radius: 0;
padding-left:5px;
padding-top:1px;
padding-bottom: 1px;
padding-right: 5px;
}
afx-list-view .afx-list-item li afx-label.description i.label-text
{
font-size: 13px;
padding-left: 10px;
}

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{
color:white;
}
@ -20,14 +11,6 @@ afx-menu afx-menu ul {
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
background-color: #363636;
}
afx-menu ul li /*, afx-menu ul >afx-menu-entry > li*/{
padding-left: 5px;
padding-right: 5px;
}
afx-menu afx-menu li{
min-width: 150px;
width: calc(100% - 10px);
}
afx-menu li:hover {
background-color: #2786F3;
@ -37,13 +20,7 @@ afx-menu li:hover > a {
}
afx-menu afx-menu .afx_submenu:before, afx-menu ul.context .afx_submenu:before{
content: "\f054";
font-family: "FontAwesome";
font-size: 10px;
right:5px;
color: #414339;
position:absolute;
top:25%;
}
afx-menu ul.context{
@ -52,12 +29,4 @@ afx-menu afx-menu .afx_submenu:before, afx-menu ul.context .afx_submenu:before
border-top-left-radius: 0px;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
background-color: #363636;
}
afx-menu ul.context li{
min-width: 150px;
width: calc(100% - 10px);
}
afx-menu afx-label span {
height: 22px !important;
}

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

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

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

@ -1,7 +1,7 @@
afx-slider div.container{
border-radius: 3px;
height: 5px;
height: 10px;
background-color: #868686;
}
@ -11,9 +11,18 @@ afx-slider div.progress {
}
afx-slider div.dragpoint {
width: 15px;
height: 15px;
border:1px solid #262626;
border-radius: 15px;
background-color:#868686;
}
afx-slider div.dragpoint::before
{
content: "\f0d7";
font-family: "FontAwesome";
position: absolute;
bottom: -9px;
left: 0;
right: 0;
text-align: center;
color:#868686;
}

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

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

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{
background-color: #116cd6;
color:white;

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

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

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

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

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

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

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

@ -1,7 +1,4 @@
afx-apps-dock{
bottom: 0;
top: 0;
width: 32px;
background-color:#e7e7e7;
padding:0;
padding-top: 0;
@ -10,23 +7,7 @@ afx-apps-dock{
border:1px solid #a6a6a6;
box-shadow: none;
}
afx-apps-dock afx-button button{
width: 32px;
height: 32px;
font-size: 19px;
margin-bottom: 0;
padding:0px;
background-color: transparent;
border:0;
border-radius: 0;
}
afx-apps-dock afx-button afx-label i.icon-style{
width: 24px;
height: 24px;
margin-left: 2px;
margin-bottom: 0px;
border:0;
}
afx-apps-dock afx-button.selected > button {
background-color: #2786F3;

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

@ -1,7 +1,4 @@
afx-file-view afx-label.status{
padding:3px;
right: 0px;
height: 15px;
background-color: #f6F6F6;
border-top: 1px solid #cbcbcb;
}
@ -13,7 +10,7 @@ afx-file-view afx-list-view > div.list-container > ul li{
margin-right: 5px;
margin-bottom: 5px;
}
afx-file-view afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li {
afx-file-view afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li {
background-color: transparent;
}
afx-file-view afx-list-view i.dir:before{
@ -38,7 +35,7 @@ afx-file-view afx-list-view i.file:before{
font-style: normal;
font-weight: normal;
}
afx-file-view afx-list-view > div.list-container > ul > afx-list-item > li.selected
afx-file-view afx-list-view > div.list-container > ul > .afx-list-item > li.selected
{
background-color: transparent;
}
@ -53,7 +50,6 @@ afx-file-view afx-grid-view{
afx-file-view afx-grid-view i.file:before{
content: "\f016";
font-family: "FontAwesome";
font-size: 16px;
color: #414339;
font-style: normal;
font-weight: normal;
@ -61,7 +57,6 @@ afx-file-view afx-grid-view i.file:before{
afx-file-view afx-grid-view i.dir:before{
content: "\f07b";
font-family: "FontAwesome";
font-size: 16px;
color: #76D2F9;
font-style: normal;
font-weight: normal;
@ -72,36 +67,27 @@ afx-file-view afx-grid-view i{
afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{
color:white;
}
afx-file-view afx-grid-view afx-grid-row afx-grid-cell
{
padding: 3px;
}
afx-file-view afx-grid-view .grid_row_header afx-grid-cell{
background-color: #dfdfdf;
border-top: 1px solid #a6a6a6;
border-right: 1px solid #a6a6a6;
border-bottom: 1px solid #a6a6a6;
padding: 3px;
}
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
content: "\f07b";
font-family: "FontAwesome";
font-size: 16px;
color:#76D2F9;
}
afx-file-view afx-tree-view .afx-tree-view-folder-open:before{
content: "\f07c";
font-family: "FontAwesome";
color:#76D2F9;
font-size: 16px;
}
afx-file-view afx-tree-view .afx-tree-view-item:before{
content: "\f016";
font-family: "FontAwesome";
font-size: 16px;
font-style: normal;
font-weight: normal;
}
@ -110,14 +96,10 @@ afx-file-view afx-tree-view div.afx_tree_item_selected, afx-file-view afx-tree-v
background-color: transparent;
}
afx-file-view afx-tree-view li.itemname{
padding:3px;
padding-right: 5px;
}
afx-file-view afx-tree-view div.afx_tree_item_selected .itemname{
afx-file-view afx-tree-view div.afx_tree_item_selected ul{
background-color: #116cd6;
color:white;
border-radius: 3px;
border-radius: 0x;
}
afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{

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

@ -1,29 +1,18 @@
afx-list-view > div.list-container > ul li{
padding: 5px;
padding-top:3px;
padding-bottom: 3px;
padding-right: 10px;
background-color: white;
}
afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li{
afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li{
background-color:#f5F5F5;
}
afx-list-view i.closable{
width: 16px;
height: 16px;
}
afx-list-view i.closable:before{
font-size: 10px;
margin-left: 10px;
color: #414339;
}
afx-list-view > div.list-container > ul li > i {
margin-right: 3px;
afx-list-view.dropdown > div.list-container > ul li:hover{
background-color: #dcdcdc;
color: #414339;
}
afx-list-view > div.list-container > ul > afx-list-item > li.selected{
afx-list-view > div.list-container > ul > .afx-list-item li.selected{
background-color: #116cd6;
color:white;
}
@ -32,37 +21,15 @@ afx-list-view.dropdown > div.list-container > ul{
border:1px solid #a6a6a6;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
border-radius: 3px;
max-height: 150px;
background-color: white;
border-top-left-radius: 0px;
z-index: 10;
}
afx-list-view.dropdown div.list-container div{
afx-list-view.dropdown{
color: #414339;
padding-top:3px;
padding-bottom: 3px;
border:1px solid #a6a6a6;
border-radius: 3px;
background-color: transparent;
height: 17px;
}
afx-list-view.dropdown div.list-container div > afx-label{
padding-left:3px;
}
afx-list-view.dropdown div.list-container div:before {
content: "\f107";
font-family: "FontAwesome";
font-size: 11px;
font-style: normal;
color: #414339;
position: absolute;
top:25%;
right: 5px;
}
afx-list-view.dropdown > div.list-container > ul li:hover{
background-color: #dcdcdc;
color: #414339;
}
afx-list-view ul.complex-content{
padding: 0;
@ -79,14 +46,15 @@ afx-list-view > div.list-container > ul li.selected ul.complex-content li{
color:white;
}
afx-list-view div.button_container afx-button{
margin-right: 2px;
}
afx-list-view div.button_container afx-button button{
border-radius: 0;
padding-left:5px;
padding-top:1px;
padding-bottom: 1px;
padding-right: 5px;
}
afx-list-view .afx-list-item li afx-label.description i.label-text
{
font-size: 13px;
padding-left: 10px;
}

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{
color:white;
}
@ -20,14 +11,6 @@ afx-menu afx-menu ul {
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
background-color: #e7e7e7;
}
afx-menu ul li /*, afx-menu ul >afx-menu-entry > li*/{
padding-left: 5px;
padding-right: 5px;
}
afx-menu afx-menu li{
min-width: 150px;
width: calc(100% - 10px);
}
afx-menu li:hover {
background-color: #2786F3;
@ -37,13 +20,7 @@ afx-menu li:hover > a {
}
afx-menu afx-menu .afx_submenu:before, afx-menu ul.context .afx_submenu:before{
content: "\f054";
font-family: "FontAwesome";
font-size: 10px;
right:5px;
color: #414339;
position:absolute;
top:25%;
}
afx-menu ul.context{
@ -53,11 +30,3 @@ afx-menu afx-menu .afx_submenu:before, afx-menu ul.context .afx_submenu:before
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
background-color: #e7e7e7;
}
afx-menu ul.context li{
min-width: 150px;
width: calc(100% - 10px);
}
afx-menu afx-label span {
height: 22px !important;
}

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

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

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

@ -11,9 +11,18 @@ afx-slider div.progress {
}
afx-slider div.dragpoint {
width: 15px;
height: 15px;
border:1px solid #6b6b6b;
border-radius: 15px;
background-color:#e6e6e6;
}
afx-slider div.dragpoint::before
{
content: "\f0d7";
font-family: "FontAwesome";
position: absolute;
bottom: -9px;
left: 0;
right: 0;
text-align: center;
color:#868686;
}

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

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

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{
background-color: #116cd6;
color:white;

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

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

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

@ -14,6 +14,9 @@ afx-app-window ul.afx-window-top{
padding: 0;
width: 100%;
padding:0;
display: flex;
flex-direction: row;
height: 40px;
}
afx-app-window ul.loading::before{
@ -33,10 +36,12 @@ afx-app-window ul.loading::before {
afx-app-window ul.afx-window-top li{
list-style: none;
}
afx-app-window ul li.afx-window-title{
float:none;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
afx-app-window div.afx-window-content
@ -81,8 +86,31 @@ afx-app-window div.afx-window-overlay {
background-color: transparent;
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 5px;
right: 5px;
top: 42px;
}
afx-app-window div.afx-window-wrapper > afx-stack-menu.context {
top: 42px;
left: 5px;
}
afx-app-window ul.afx-window-top afx-button button{
width: 40px;
height: 40px;
font-size: 22px;
margin-bottom: 0;
padding:0px;
background-color: transparent;
border:0;
border-radius: 0;
}
afx-app-window ul.afx-window-top afx-button afx-label i.icon-style{
width: 24px;
height: 24px;
margin-left: 2px;
margin-bottom: 0px;
border:0;
}

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

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

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

@ -1,5 +1,22 @@
afx-apps-dock{
float: left;
position: absolute;
display: flex;
flex-direction: row;
overflow: hidden;
}
afx-apps-dock afx-button button{
width: 40px;
height: 35px;
font-size: 22px;
margin-bottom: 0;
padding:0px;
background-color: transparent;
border:0;
border-radius: 0;
}
afx-apps-dock afx-button afx-label i.icon-style{
width: 26px;
height: 26px;
margin-left: 2px;
margin-bottom: 0px;
border:0;
}

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

@ -39,6 +39,7 @@ afx-file-view afx-tree-view{
margin:0;
overflow: hidden;
background-color: transparent;
padding-left: 5px;
}
afx-file-view afx-tree-view .afx_tree_item_odd{
@ -57,4 +58,47 @@ afx-file-view div.treecontainer{
overflow: auto;
padding:0;
margin:0;
}
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
font-size: 22px;
}
afx-file-view afx-tree-view .afx-tree-view-folder-open:before{
font-size: 22px;
}
afx-file-view afx-tree-view .afx-tree-view-item:before{
font-size: 22px;
}
afx-file-view afx-grid-view i.file:before{
font-size: 21px;
font-style: normal;
font-weight: normal;
}
afx-file-view afx-grid-view i.dir:before{
font-size: 22px;
font-style: normal;
font-weight: normal;
}
afx-file-view afx-tree-view li.itemname{
padding-left: 10px;
padding-right: 5px;
}
afx-file-view afx-label.status{
font-size: 13px;
height: 24px;
display: flex;
width: 100%;
}
afx-file-view afx-label.status span{
white-space: nowrap;
width: 100%;
text-align: right;
}
afx-file-view afx-label.status i.label-text
{
padding-right: 5px;
}

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;
-webkit-user-select:none;
cursor:default;
min-height: 25px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 5px;
}
afx-grid-view .grid_row_header afx-grid-cell{
@ -9,6 +14,11 @@ afx-grid-view .grid_row_header afx-grid-cell{
-webkit-user-select:none;
cursor:default;
font-weight: bold;
min-height: 25px;
display: flex;
padding: 5px;
flex-direction: column;
justify-content: center;
}
afx-grid-view {
@ -16,5 +26,21 @@ afx-grid-view {
}
afx-grid-view afx-grid-cell afx-label {
display: inline-block;
display: flex;
}
afx-grid-view .grid_row_header afx-grid-cell[sort = "asc"] span::before
{
content: "\F574";
font-family: "bootstrap-icons";
font-weight: normal;
font-style: normal;
}
afx-grid-view .grid_row_header afx-grid-cell[sort = "desc"] span::before
{
content: "\F57B";
font-family: "bootstrap-icons";
font-weight: normal;
font-style: normal;
}

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

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

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

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

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{
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;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
width: 40px;
}
afx-nspinner input{
margin: 0;
height: 100%;
width: calc(100% - 40px);
flex: 1;
}
afx-nspinner ul li{
display: block;
display: flex;
padding:0;
margin: 0;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
}
afx-nspinner ul li.incr i:before{
content: "\f0d8";
font-family: "FontAwesome";
font-style: normal;
font-size: 20px;
}
afx-nspinner ul li.decr i:before{
content: "\f0d7";
font-family: "FontAwesome";
font-style: normal;
font-size: 20px;
}

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

@ -20,4 +20,5 @@ afx-slider div.progress {
afx-slider div.dragpoint {
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;
}

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

@ -2,17 +2,26 @@
afx-sys-panel{
padding:0;
margin: 0;
position: absolute;
bottom: 0;
width: 100%;
}
afx-sys-panel > div{
width: 100%;
margin:0;
padding: 0;
position:absolute;
display: flex;
flex-direction: row;
height: 35px;
}
afx-sys-panel afx-overlay
{
width: 400px;
bottom: 35px;
overflow: hidden;
margin: 0;
left: 0;
right: 0;
}
afx-sys-panel > div.loading::before{
background-color: orangered;
@ -24,7 +33,7 @@ afx-sys-panel > div.loading::before{
afx-sys-panel > div.loading::before {
right: 0;
bottom:0;
top:0;
animation: sys-loading 1s linear infinite;
}
@ -59,12 +68,10 @@ afx-sys-panel > div.loading::before {
afx-sys-panel .afx-panel-os-menu {
padding:0;
margin: 0;
float:left;
margin-right: 5px;
}
afx-sys-panel .afx-panel-os-stray{
float:right;
position: relative;
}
@ -83,13 +90,6 @@ afx-sys-panel afx-menu.afx-panel-os-stray afx-menu afx-menu{
top:-4px;
}
afx-sys-panel afx-overlay
{
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
{
width: 100%;
@ -98,8 +98,45 @@ afx-sys-panel afx-hbox[data-id="btlist"] afx-button button
border: 0px;
}
afx-sys-panel afx-list-view[data-id="applist"] afx-label span,
afx-sys-panel afx-list-view[data-id="catlist"] afx-label span
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container {
margin: 0 auto;
}
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul
{
white-space: nowrap;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li{
/*display: block;*/
width: 70px;
text-align: center;
font-size: 40px;
justify-content: normal !important;
}
afx-sys-panel afx-list-view[data-id="applist"] i{
display: block;
width: 100%;
}
afx-sys-panel afx-list-view[data-id="applist"] i.label-text{
word-break: break-word;
font-size: 14px;
}
afx-sys-panel afx-list-view[data-id="applist"] i.icon-style {
width: 40px;
height: 40px;
}
afx-sys-panel afx-list-view[data-id="applist"] afx-label span
{
flex-direction: column;
}
afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover {
background-color: transparent;
}
afx-sys-panel afx-list-view[data-id="applist"]> div.list-container > ul .afx-list-item:nth-child(even) li
{
background-color: transparent;
}

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

@ -7,12 +7,26 @@ afx-tab-bar afx-list-view {
padding:0;
margin:0;
}
afx-tab-bar afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li
afx-tab-bar afx-list-view > div.list-container > ul .afx-list-item:nth-child(even) li,
afx-tab-bar afx-list-view > div.list-container > ul li
{
background-color: transparent;
padding-left: 10px;
padding-right: 10px;
}
afx-tab-bar afx-list-view > div.list-container > ul li{
float:left;
afx-tab-bar[dir="vertical"] afx-list-view > div.list-container
{
overflow: hidden;
}
afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container
{
overflow: hidden;
}
afx-tab-bar afx-list-view > div.list-container > ul li afx-label i.label-text
{
white-space: nowrap;
}

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

@ -15,6 +15,14 @@ afx-tree-view li{
list-style: none;
margin:0;
padding: 0;
min-height: 35px;
display: flex;
flex-direction: column;
justify-content: center;
}
afx-tree-view li.itemname
{
padding-left: 10px;
}
afx-tree-view div{
-webkit-user-select:none;
@ -28,8 +36,19 @@ afx-tree-view i.icon-style {
afx-tree-view .afx-tree-view-folder-open:before{
content: "\f147";
font-family: "FontAwesome";
font-size: 22px;
}
afx-tree-view .afx-tree-view-folder-close:before{
content: "\f196";
font-family: "FontAwesome";
font-size: 22px;
}
afx-tree-view div{
padding-left:3px;
padding-right: 3px;
}
afx-tree-view i.icon-style {
width: 24px;
height: 24px;
}

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

@ -4,6 +4,16 @@ html,body{
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none;
font-size: 14px;
}
#desktop > div > ul afx-list-item {
width: 70px;
padding:3px;
}
#desktop > div > ul afx-list-item li
{
padding: 3px;
}
body
{
@ -28,7 +38,8 @@ body
#workspace {
width: 100%;
position: absolute;
bottom: 0;
top: 0;
bottom: 35px;
}
#desktop{
@ -39,6 +50,9 @@ body
user-select:none;
cursor: default;
padding:0px;
overflow: hidden;
top:0;
left: 0;
}
#desktop > div > ul afx-list-item {
display:block;