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

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

Browse Source 
- Redesign the core UI API and tags to support Mobile devices
- Add new StackMenu tag
- Support touch events handling on touch devices
- Redesign File and Setting to work on mobile
- Improve Anouncement API
- Rework on default themes
This commit is contained in:
DanyLE 2022-12-08 14:50:38 +01:00 committed by Dany LE
parent 13969511a5
commit cd294f58a6
83 changed files with 2417 additions and 1039 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Makefile
View File

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