")
- .css("width", "23px")
- .appendTo(div);
+ .css("width", "40px")
+ .css("height", "35px")
+ .appendTo(div);
}
-
}
}
@@ -1511,23 +1406,18 @@ namespace OS {
* Scheme definition
*/
KeyValueDialog.scheme = `\
-
-
-
-
-
+
+
-
-
-
-
-
+
+
+
-
-
-
`;
}
}
diff --git a/src/core/tags/CalendarTag.ts b/src/core/tags/CalendarTag.ts
index 9fcf5f9..4e173be 100644
--- a/src/core/tags/CalendarTag.ts
+++ b/src/core/tags/CalendarTag.ts
@@ -113,8 +113,10 @@ namespace OS {
* @memberof CalendarTag
*/
protected mount(): void {
- $(this.refs.prev).on("click",(e) => this.prevmonth());
- $(this.refs.next).on("click",(e) => this.nextmonth());
+ (this.refs.prev as ButtonTag).iconclass = "fa fa-angle-left";
+ (this.refs.next as ButtonTag).iconclass = "fa fa-angle-right";
+ (this.refs.prev as ButtonTag).onbtclick = (e) => this.prevmonth();
+ (this.refs.next as ButtonTag).onbtclick = (e) => this.nextmonth();
const grid = this.refs.grid as GridViewTag;
grid.header = [
{ text: "__(Sun)" },
@@ -319,9 +321,9 @@ namespace OS {
el: "div",
ref: "ctrl",
children: [
- { el: "i", class: "prevmonth", ref: "prev" },
+ { el: "afx-button", class: "prevmonth", ref: "prev" },
{ el: "afx-label", ref: "mlbl" },
- { el: "i", class: "nextmonth", ref: "next" },
+ { el: "afx-button", class: "nextmonth", ref: "next" },
],
},
{ el: "afx-grid-view", ref: "grid" },
diff --git a/src/core/tags/GridViewTag.ts b/src/core/tags/GridViewTag.ts
index a2247ac..ccac5a6 100644
--- a/src/core/tags/GridViewTag.ts
+++ b/src/core/tags/GridViewTag.ts
@@ -1217,7 +1217,6 @@ namespace OS {
.css("top", top + "px")
.css("left", left + "px");
};
-
return this.calibrate();
}
diff --git a/src/core/tags/InputTag.ts b/src/core/tags/InputTag.ts
new file mode 100644
index 0000000..0354e2b
--- /dev/null
+++ b/src/core/tags/InputTag.ts
@@ -0,0 +1,265 @@
+namespace OS {
+ export namespace GUI {
+ export namespace tag {
+ /**
+ * This tag define a basic text input and its behavior
+ *
+ * @export
+ * @class InputTag
+ * @extends {AFXTag}
+ */
+ export class InputTag extends AFXTag {
+
+ /**
+ *Creates an instance of InputTag.
+ * @memberof InputTag
+ */
+ constructor() {
+ super();
+ }
+
+ /**
+ * Set the path to the header icon, the path should be
+ * a VFS file path
+ *
+ * @memberof InputTag
+ */
+ set icon(v: string) {
+ $(this).attr("icon", v);
+ (this.refs.label as LabelTag).icon = v;
+ }
+
+ /**
+ * Set the icon class to the header
+ *
+ * @memberof InputTag
+ */
+ set iconclass(v: string) {
+ $(this).attr("iconclass", v);
+ (this.refs.label as LabelTag).iconclass = v;
+ }
+
+ /**
+ * Alias to header setter/getter
+ *
+ * @memberof InputTag
+ */
+ set text(v: string | FormattedString) {
+ this.label = v;
+ }
+
+ get text(): string | FormattedString {
+ return this.label;
+ }
+
+ /**
+ * Setter: Set the text of the button
+ *
+ * Getter: Get the current button test
+ *
+ * @memberof InputTag
+ */
+ set label(v: string | FormattedString) {
+ (this.refs.label as LabelTag).text = v;
+ }
+
+ get label(): string | FormattedString {
+ return (this.refs.label as LabelTag).text;
+ }
+
+ /**
+ * Setter: Enable or disable the input
+ *
+ * Getter: Get the `enable` property of the input
+ *
+ * @memberof InputTag
+ */
+ set disable(v: boolean) {
+ $(this.refs.area).prop("disabled", v);
+ $(this.refs.input).prop("disabled", v);
+ }
+ get disable(): boolean {
+ return !$(this.input).prop("disabled");
+ }
+
+ /**
+ * Setter: set verbosity of the input
+ *
+ * Getter: Get the current input verbosity
+ *
+ * @memberof InputTag
+ */
+ set verbose(v: boolean) {
+ this.attsw(v, "verbose");
+ this.calibrate();
+ }
+ get verbose(): boolean {
+ return this.hasattr("verbose");
+ }
+
+ /**
+ * JQuery style generic event handling on the input element
+ *
+ * @param {string} enname: JQuery event name
+ * @param {JQuery.TypeEventHandler
} handle: JQuery handle
+ * @memberof InputTag
+ */
+ on(ename: string, handle:JQuery.TypeEventHandler ): void
+ {
+ $(this.input).on(ename, handle);
+ }
+ /**
+ * Manually trigger an event
+ *
+ * @param {string} evt: JQuery event name
+ * @memberof InputTag
+ */
+ trigger(evt: string)
+ {
+ $(this.input).trigger(evt);
+ }
+ /**
+ * Mount the tag
+ *
+ * @protected
+ * @memberof InputTag
+ */
+ protected mount() {
+ // Do nothing
+ }
+ /**
+ * Get the current active input element
+ *
+ * @memberof InputTag
+ */
+ get input(): HTMLInputElement | HTMLTextAreaElement
+ {
+ if(this.verbose)
+ {
+ return this.refs.area as HTMLTextAreaElement;
+ }
+ return this.refs.input as HTMLInputElement;
+ }
+
+ /**
+ * Get/set the current active input value
+ *
+ * @memberof InputTag
+ */
+ get value(): string{
+ return this.input.value;
+ }
+ set value(v: string)
+ {
+ this.input.value = v;
+ }
+ /**
+ * Get/set input type
+ * This only affects the inline input element
+ *
+ * @memberof InputTag
+ */
+ get type(): string{
+ if(this.verbose) return undefined;
+
+ return (this.input as HTMLInputElement).type;
+ }
+ set type(v: string)
+ {
+ if(!this.verbose)
+ {
+ (this.input as HTMLInputElement).type = v;
+ }
+ }
+
+ /**
+ * Get/set input name
+ *
+ * @memberof InputTag
+ */
+ get name(): string{
+ return (this.input as HTMLInputElement).name;
+ }
+ set name(v: string)
+ {
+ (this.input as HTMLInputElement).name = v;
+ }
+
+ /**
+ * Init the tag before mounting
+ *
+ * @protected
+ * @memberof InputTag
+ */
+ protected init(): void {
+ this.disable = false;
+ this.verbose = false;
+ this.type = "text";
+ }
+
+ /**
+ * Re-calibrate the button, do nothing in this tag
+ *
+ * @protected
+ * @memberof InputTag
+ */
+ protected calibrate(): void
+ {
+ $(this.refs.area)
+ .css("width", "100%");
+ $(this.refs.input)
+ .css("width", "100%");
+ if(this.verbose)
+ {
+ $(this.refs.area).show();
+ $(this.refs.input).hide();
+ (this.refs.input as HTMLInputElement).value = "";
+ }
+ else
+ {
+ $(this.refs.area).hide();
+ $(this.refs.input).show();
+ (this.refs.area as HTMLTextAreaElement).value = "";
+ }
+ }
+
+ /**
+ * Update the current tag, do nothing in this tag
+ *
+ * @param {*} [d]
+ * @memberof InputTag
+ */
+ reload(d?: any): void {}
+
+ /**
+ * Button layout definition
+ *
+ * @protected
+ * @returns {TagLayoutType[]}
+ * @memberof InputTag
+ */
+ protected layout(): TagLayoutType[] {
+ return [
+ {
+ el: "afx-label",
+ ref: "label"
+ },
+ {
+ el: "input",
+ ref:"input"
+ },
+ {
+ el: "textarea",
+ ref: "area"
+ },
+ {
+ el: "div"
+ }
+ ];
+ }
+ }
+
+ define("afx-input", InputTag);
+ }
+ }
+}
diff --git a/src/core/tags/LabelTag.ts b/src/core/tags/LabelTag.ts
index 7ca7d38..d60d306 100644
--- a/src/core/tags/LabelTag.ts
+++ b/src/core/tags/LabelTag.ts
@@ -94,6 +94,49 @@ namespace OS {
$(this.refs.i).hide();
}
}
+ /**
+ * set horizontal aligment of the label content
+ *
+ * @param {string} v shall be "left, right, or center"
+ */
+ set halign(v: string)
+ {
+ let align = "center";
+ switch(v)
+ {
+ case "left":
+ align = "flex-start";
+ break;
+ case "right":
+ align = "flex-end";
+ break;
+ default:
+ break;
+ }
+ $(this.refs.container).css("justify-content", align);
+ }
+
+ /**
+ * set horizontal aligment of the label content
+ *
+ * @param {string} v shall be "top, bottom, or center"
+ */
+ set valign(v: string)
+ {
+ let align = "center";
+ switch(v)
+ {
+ case "top":
+ align = "flex-start";
+ break;
+ case "bottom":
+ align = "flex-end";
+ break;
+ default:
+ break;
+ }
+ $(this.refs.container).css("align-items", align);
+ }
/**
* Set the CSS class of the label icon
diff --git a/src/core/tags/TileLayoutTags.ts b/src/core/tags/TileLayoutTags.ts
index 3adb130..3d4456c 100644
--- a/src/core/tags/TileLayoutTags.ts
+++ b/src/core/tags/TileLayoutTags.ts
@@ -22,6 +22,8 @@ namespace OS {
constructor() {
super();
}
+
+ private _padding: number;
/**
* Do nothing
@@ -29,7 +31,9 @@ namespace OS {
* @protected
* @memberof TileLayoutTag
*/
- protected init(): void {}
+ protected init(): void {
+ this.padding = 0;
+ }
/**
* Do nothing
*
@@ -84,6 +88,26 @@ namespace OS {
get dir(): "row" | "column" {
return $(this).attr("dir") as any;
}
+ /**
+ * Setter:
+ *
+ * SET content padding
+ *
+ * Getter:
+ *
+ * Get content padding
+ *
+ * @memberof TileLayoutTag
+ */
+ set padding(v: number)
+ {
+ $(this).attr("padding", v);
+ this._padding = v;
+ }
+ get padding(): number
+ {
+ return this._padding;
+ }
/**
* Mount the element
@@ -95,9 +119,7 @@ namespace OS {
protected mount(): void {
$(this).css("display", "block");
$(this.refs.yield)
- .css("display", "flex")
- .css("width", "100%")
- .css("height", "100%");
+ .css("display", "flex");
this.observable.on("resize", (e) => this.calibrate());
return this.calibrate();
}
@@ -109,6 +131,10 @@ namespace OS {
* @memberof TileLayoutTag
*/
calibrate(): void {
+ $(this.refs.yield)
+ .css("padding", this.padding)
+ .css("width", `${$(this).width() - this.padding*2}px`)
+ .css("height", `${$(this).height() - this.padding*2}px`);
if (this.dir === "row") {
return this.hcalibrate();
}
@@ -128,7 +154,7 @@ namespace OS {
private hcalibrate(): void {
const auto_width = [];
let ocwidth = 0;
- const avaiWidth = $(this).width();
+ const avaiWidth = $(this).width() - this.padding * 2;
$(this.refs.yield)
.children()
.each(function (e) {
@@ -171,7 +197,7 @@ namespace OS {
private vcalibrate(): void {
const auto_height = [];
let ocheight = 0;
- const avaiheight = $(this).height();
+ const avaiheight = $(this).innerHeight() - this.padding * 2;
$(this.refs.yield)
.children()
.each(function (e) {
diff --git a/src/packages/MarketPlace/main.ts b/src/packages/MarketPlace/main.ts
index 313f5fd..baf46aa 100644
--- a/src/packages/MarketPlace/main.ts
+++ b/src/packages/MarketPlace/main.ts
@@ -601,7 +601,7 @@ namespace OS {
const dep = this.checkDependencies(pkgname);
if (dep.notfound.size != 0) {
this.openDialog("TextDialog", {
- disable: true,
+ disable: false,
title: __("Unresolved dependencies"),
value: __(
"Unable to install: The package `{0}` depends on these packages, but they are not found:\n{1}",
diff --git a/src/themes/antos_dark/afx-calendar-view.css b/src/themes/antos_dark/afx-calendar-view.css
index beb7e23..3879712 100644
--- a/src/themes/antos_dark/afx-calendar-view.css
+++ b/src/themes/antos_dark/afx-calendar-view.css
@@ -1,44 +1,11 @@
afx-calendar-view div{
text-align: center;
-
}
-afx-calendar-view > div {
+
+afx-calendar-view > div afx-label i{
font-weight: bold;
}
-afx-calendar-view i.prevmonth, afx-calendar-view i.nextmonth{
- display: inline-block;
- width: 16px;
- height: 16px;
- cursor: pointer;
-}
-afx-calendar-view i.prevmonth{
- margin-right: 20px;
-}
-afx-calendar-view i.nextmonth{
- margin-left: 20px;
-}
-
-afx-calendar-view i.prevmonth:before{
- content: "\f104";
- font-family: "FontAwesome";
- font-size: 16px;
- font-style: normal;
- /*position:absolute;
- top:25%;
- right:5px;*/
-}
-afx-calendar-view i.nextmonth:before{
- content: "\f105";
- font-family: "FontAwesome";
- font-size: 16px;
- font-style: normal;
- margin-left: 20px;
- /*position:absolute;
- top:25%;
- right:5px;*/
-}
-
afx-calendar-view afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
{
diff --git a/src/themes/antos_dark/afx-input.css b/src/themes/antos_dark/afx-input.css
new file mode 100644
index 0000000..9e16c5f
--- /dev/null
+++ b/src/themes/antos_dark/afx-input.css
@@ -0,0 +1,20 @@
+afx-input afx-label
+{
+ font-size: 13px;
+ color: #bb86fc;
+ background-color: #464646;
+}
+
+afx-input input,
+afx-input textarea
+{
+ border-radius: 0;
+ border: 0;
+ border-bottom: 1px solid #262626;
+ background-color: #464646;
+}
+afx-input input:focus,
+afx-input textarea:focus
+{
+ border-bottom: 1px solid #bb86fc;
+}
\ No newline at end of file
diff --git a/src/themes/antos_dark/antos.css b/src/themes/antos_dark/antos.css
index 3391b2f..bc60b87 100644
--- a/src/themes/antos_dark/antos.css
+++ b/src/themes/antos_dark/antos.css
@@ -1,5 +1,4 @@
html,body{
- font-family: "Ubuntu";
color: white;
}
#desktop > div > ul afx-list-item {
@@ -44,14 +43,11 @@ html,body{
input {
outline: none;
padding: 2px;
- height:23px;
border: 1px solid #262626;
background-color:#464646;
color: white;
border-radius: 3px;
box-sizing: border-box;
- font-family: "Ubuntu";
- font-size: 13px;
}
textarea {
diff --git a/src/themes/antos_light/afx-calendar-view.css b/src/themes/antos_light/afx-calendar-view.css
index e295bba..0ed8623 100644
--- a/src/themes/antos_light/afx-calendar-view.css
+++ b/src/themes/antos_light/afx-calendar-view.css
@@ -1,49 +1,11 @@
afx-calendar-view div{
text-align: center;
}
-afx-calendar-view > div {
+
+afx-calendar-view > div afx-label i{
font-weight: bold;
}
-afx-calendar-view i.prevmonth, afx-calendar-view i.nextmonth{
- display: inline-block;
- width: 16px;
- height: 16px;
- cursor: pointer;
-}
-afx-calendar-view i.prevmonth{
- margin-right: 20px;
-}
-afx-calendar-view i.nextmonth{
- margin-left: 20px;
-}
-
-afx-calendar-view i.prevmonth:before{
- content: "\f104";
- font-family: "FontAwesome";
- font-size: 16px;
- font-style: normal;
- /*position:absolute;
- top:25%;
- right:5px;*/
-}
-afx-calendar-view i.nextmonth:before{
- content: "\f105";
- font-family: "FontAwesome";
- font-size: 16px;
- font-style: normal;
- margin-left: 20px;
- /*position:absolute;
- top:25%;
- right:5px;*/
-}
-
-/*
-afx-calendar-view afx-grid-view afx-grid-row.selected{
- background-color: white;
- color:#414339;
-}*/
-
afx-calendar-view afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
{
background-color: transparent;
diff --git a/src/themes/antos_light/afx-input.css b/src/themes/antos_light/afx-input.css
new file mode 100644
index 0000000..a988e62
--- /dev/null
+++ b/src/themes/antos_light/afx-input.css
@@ -0,0 +1,20 @@
+afx-input afx-label
+{
+ font-size: 13px;
+ color: #116cd6;
+ background-color: #f6f6f6;
+}
+
+afx-input input,
+afx-input textarea
+{
+ border-radius: 0;
+ border: 0;
+ border-bottom: 1px solid #a6a6a6;
+ background-color: #f6f6f6;
+}
+afx-input input:focus,
+afx-input textarea:focus
+{
+ border-bottom: 1px solid #116cd6;
+}
\ No newline at end of file
diff --git a/src/themes/antos_light/antos.css b/src/themes/antos_light/antos.css
index 6b14679..5664b88 100644
--- a/src/themes/antos_light/antos.css
+++ b/src/themes/antos_light/antos.css
@@ -1,5 +1,4 @@
html,body{
- font-family: "Ubuntu";
color:#414339;
}
@@ -45,14 +44,11 @@ html,body{
input {
outline: none;
padding: 2px;
- height:23px;
border: 1px solid #a6a6a6;
background-color: #f6F6F6;
color: #414339;
border-radius: 5px;
box-sizing: border-box;
- font-family: "Ubuntu";
- font-size: 13px;
}
textarea {
color: #414339;
diff --git a/src/themes/system/afx-calendar-view.css b/src/themes/system/afx-calendar-view.css
index 16dc2da..30b90dc 100644
--- a/src/themes/system/afx-calendar-view.css
+++ b/src/themes/system/afx-calendar-view.css
@@ -6,5 +6,15 @@ afx-calendar-view afx-grid-view .grid_row_header afx-grid-cell{
border-right: 0;
}
afx-calendar-view afx-label {
- display: inline-block;
+ flex-direction: row;
+ justify-content: center;
+}
+
+afx-calendar-view > div {
+ display: flex;
+ flex-direction: row;
+}
+afx-calendar-view > div > afx-label
+{
+ flex:1;
}
\ No newline at end of file
diff --git a/src/themes/system/afx-input.css b/src/themes/system/afx-input.css
new file mode 100644
index 0000000..1e1183c
--- /dev/null
+++ b/src/themes/system/afx-input.css
@@ -0,0 +1,29 @@
+afx-input {
+ display: flex;
+ flex-direction: column;
+}
+
+afx-input textarea
+{
+ flex: 1;
+ padding-left: 5px;
+ padding-right: 5px;
+}
+afx-input > div
+{
+ flex: 1;
+}
+afx-input[verbose] > div {
+ flex: none;
+ height: 0;
+}
+afx-input input{
+ height: 30px;
+ padding-left: 5px;
+ padding-right: 5px;
+}
+afx-input afx-label
+{
+ padding-left: 3px;
+ padding-top: 5px;
+}
\ No newline at end of file
diff --git a/src/themes/system/antos.css b/src/themes/system/antos.css
index e56e792..4786173 100644
--- a/src/themes/system/antos.css
+++ b/src/themes/system/antos.css
@@ -6,6 +6,7 @@ html,body{
overflow: hidden;
touch-action: none;
font-size: 14px;
+ font-family: "Ubuntu";
}
#desktop > div > ul afx-list-item {
width: 70px;
@@ -73,6 +74,16 @@ body
#systooltip {
z-index: 1000000;
}
+input {
+ font-size: 14px;
+ height: 35px;
+ font-family: "Ubuntu";
+}
+
+textarea {
+ font-family: "Ubuntu";
+ font-size: 14px;
+}
#login_form{
width:300px;