First attempt to create a panel based windows system
Change-Id: I2b6fb4cb147518d661dbccb3bd5f8e093b63bf55
diff --git a/dev/demo/buttongroup.html b/dev/demo/buttongroup.html
index 9a26ed1..73050b5 100644
--- a/dev/demo/buttongroup.html
+++ b/dev/demo/buttongroup.html
@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html>
<head>
- <title>Hint demo</title>
+ <title>Panel and ButtonGroup demo</title>
<meta charset="utf-8" />
<script src="../js/lib/require.js" async="async"></script>
<link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
</head>
<body>
- <nav id="mainButton" style="position: absolute; top: 300px"></nav>
+ <nav id="mainButton" style="position: absolute; width: 100%; top: 150px"></nav>
</body>
<script>
requirejs.config({
@@ -18,17 +18,21 @@
});
-require(['buttongroup'], function (btnClass) {
- btns = btnClass.create();
- btns.add('Meta',['meta'], function () {
+require(['buttongroup', 'panel','view'], function (btnClass, panelClass, viewClass) {
+ var panel = panelClass.create();
+ var actions = panel.actions;
+ actions.add('Meta',['meta'], function () {
console.log(this.button.classList.contains('meta'));
+ view = viewClass.create();
+ panel.add(view);
});
- var list = btns.addList('More', ['list']);
+ var list = actions.addList('More', ['list']);
list.readItems([
['cool', 'cool', function (e, action) { console.log('really' + this.action()) }],
['very cool', 'veryCool', function (e, action) { console.log('very cool') }]
]);
- document.getElementById('mainButton').appendChild(btns.element());
+
+ document.getElementById('mainButton').appendChild(panel.element());
});
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index 59d2e83..3576867 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -184,6 +184,9 @@
var that = this;
+ // TODO:
+ // Introduce panel object here!
+
// Add meta button
var refLine = element.querySelector("p.ref");
@@ -274,6 +277,9 @@
*/
info : function () {
+ // TODO:
+ // Rename info() to panel()
+
// Create match info
if (this._info === undefined)
this._info = infoClass.create(this);
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 628659f..655535f 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -3,7 +3,7 @@
*/
/*
* TODO:
- * Create a "views" object, that is the parent of this
+ * Create a "panel" object, that is the parent of this
* class and supports a simple .add() method to add views
* to an element.
*/
@@ -60,34 +60,6 @@
/**
- * Open the information view,
- * if closed, otherwise close.
- */
- /*
- toggle : function () {
-
- var elem = this._match.element();
-
- if (this.opened == true) {
- elem.removeChild(
- this.element()
- );
- this.opened = false;
- }
- else {
- // Append element to match
- elem.appendChild(
- this.element()
- );
- this.opened = true;
- };
-
- return this.opened;
- },
- */
-
-
- /**
* Retrieve and parse snippet for table
* representation
*/
@@ -419,6 +391,9 @@
},
// Add action button
+ // TODO:
+ // These are view-buttons that should be added to
+ // the view and not to the panel!
_addButton : function (buttonType, element, cb) {
// TODO: Unless existent
var actions = document.createElement('ul');
diff --git a/dev/js/src/panel.js b/dev/js/src/panel.js
new file mode 100644
index 0000000..5aa96ad
--- /dev/null
+++ b/dev/js/src/panel.js
@@ -0,0 +1,95 @@
+/**
+ * Create a panel for a certain aspect of the system, like
+ * the result, a match, or the VC.
+ */
+define(['buttongroup', 'util'], function (buttonGroupClass) {
+
+ return {
+
+ // TODO:
+ // Support classes
+ create : function () {
+ return Object.create(this)._init();
+ },
+
+ _init : function () {
+ // ...
+ this.views = [];
+
+
+ /**
+ * Main action buttons for the panel,
+ * may be at the bottom (for matches)
+ * or as tabs (for the result).
+ */
+ this.actions = buttonGroupClass.create(['action', 'panel']);
+ return this;
+ },
+
+ /**
+ * The element of the panel
+ */
+ element : function () {
+ if (this._element)
+ return this._element;
+
+ // Create panel element
+ var e = document.createElement('div');
+ e.classList.add('panel');
+
+ e.appendChild(this.actions.element());
+
+ this._element = e;
+ return e;
+ },
+
+
+ /**
+ * Add a view to the panel
+ */
+ add : function (view) {
+
+ // Add view to views list
+ this.views.push(view);
+
+ // Append element to panel element
+
+ this.element().appendChild(
+ view.element()
+ );
+
+ view.panel = this;
+ },
+
+ /**
+ * Delete a closed view from panel
+ */
+ delView : function (view) {
+ for (i in this.views) {
+ if (this.views[i] === view) {
+ this.views[i] = undefined;
+ }
+ }
+ },
+
+ /**
+ * Elements before the action buttons
+ */
+ beforeActions : function (element) {
+ if (arguments.length > 0)
+ this._beforeActions = element;
+
+ return this._beforeActions;
+ },
+
+ /**
+ * Element after the action buttons
+ */
+ afterActions : function (element) {
+ if (arguments.length > 0)
+ this._afterActions = element;
+
+ return this._afterActions;
+ }
+ }
+});
diff --git a/dev/js/src/view.js b/dev/js/src/view.js
new file mode 100644
index 0000000..2eb5dd0
--- /dev/null
+++ b/dev/js/src/view.js
@@ -0,0 +1,55 @@
+/**
+ * Create a view that can be added to a panel,
+ * like a tree view or the metadata view.
+ */
+
+define(['buttongroup', 'util'], function (buttonGroupClass) {
+
+ return {
+
+ // TODO:
+ // Support classes
+ create : function () {
+ return Object.create(this)._init();
+ },
+
+ _init : function () {
+ // ..
+ this.panel = undefined;
+
+ // The buttonclass is bind to the view
+ this.actions = buttonGroupClass.create(['action', 'view']).bind(this);
+ this.actions.add('close', ['button-icon','close'], function (e) {
+ this.close();
+ });
+
+ return this;
+ },
+
+ /**
+ * Element of the view
+ */
+ element : function () {
+ if (this._element)
+ return this._element;
+
+ // Create panel element
+ var e = document.createElement('div');
+ e.classList.add('view');
+
+ e.appendChild(this.actions.element());
+
+ this._element = e;
+ return e;
+ },
+
+ /**
+ * Close the view.
+ */
+ close : function () {
+ var e = this.element();
+ e.parentNode.removeChild(e);
+ this.panel.delView(this);
+ }
+ };
+});
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
index dea337d..acd3094 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/main/buttongroup.scss
@@ -7,31 +7,6 @@
.button-group {
> span {
cursor: pointer;
- box-shadow: $choose-box-shadow;
- font-size: 9pt;
- line-height: 1.5em;
- padding: 0 4px;
- display: inline-block;
- @include choose-item;
- border-style: solid;
- border-width: $border-size 0;
- &:hover {
- @include choose-hover;
- }
- &:first-child {
- border: {
- left-width: $border-size;
- top-left-radius: $standard-border-radius;
- bottom-left-radius: $standard-border-radius;
- }
- }
- &:last-child {
- border: {
- right-width: $border-size;
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
- }
- }
&.button-icon {
font-family: 'FontAwesome';
> span {
@@ -41,6 +16,34 @@
}
}
+.button-group:not(.view) > span {
+ box-shadow: $choose-box-shadow;
+ font-size: 9pt;
+ line-height: 1.5em;
+ padding: 0 4px;
+ display: inline-block;
+ @include choose-item;
+ border-style: solid;
+ border-width: $border-size 0;
+ &:hover {
+ @include choose-hover;
+ }
+ &:first-child {
+ border: {
+ left-width: $border-size;
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ }
+ }
+ &:last-child {
+ border: {
+ right-width: $border-size;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+}
+
ul.button-group-list {
border-top-right-radius: 8px;
z-index: 150;
@@ -54,3 +57,31 @@
border-top-right-radius: 5px;
}
}
+
+
+.button-group.view {
+ display: block;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 20;
+ margin: 0;
+ padding: 0;
+ width: $right-match-distance;
+ > span {
+ border-width: 0;
+ text-decoration:none;
+ text-align: center;
+ font-style: normal;
+
+ &.download::after {
+ font-family: 'FontAwesome';
+ content: $fa-download;
+ }
+
+ &.close::after {
+ font-family: 'FontAwesome';
+ content: $fa-close;
+ }
+ }
+}
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 40ef483..cfb3791 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -12,6 +12,7 @@
@import "alertify"; // Styling alerts
@import "intro"; // Intro page
@import "buttongroup"; // Button groups
+@import "panel"; // Base panel system
main {
margin: {
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index f2ed006..334ac74 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -235,6 +235,8 @@
}
}
+// TODO:
+// Probably obsolete now, as it will become part of the panel system
div.matchinfo ul.action.image {
display: block;
position: absolute;
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
new file mode 100644
index 0000000..25d541b
--- /dev/null
+++ b/dev/scss/main/panel.scss
@@ -0,0 +1,26 @@
+@charset "utf-8";
+@import "../util";
+
+div.panel {
+ position: relative;
+ width: 100%;
+ display: block;
+ padding-top: $border-size;
+ background-color: $dark-orange;
+ border: {
+ style: solid;
+ color: $dark-orange;
+ width: 0;
+ }
+}
+
+div.view {
+ position: relative;
+ display: block;
+ min-height: 40px;
+ background-color: $middle-green;
+ width: 100%;
+ .button-group {
+ color: white;
+ }
+}