You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@isis.apache.org by da...@apache.org on 2015/03/30 17:44:02 UTC
[33/59] [abbrv] isis git commit: ISIS-789: adding
example/application/neoapp
http://git-wip-us.apache.org/repos/asf/isis/blob/fa30a76a/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/fonts/fontawesome-webfont.ttf
----------------------------------------------------------------------
diff --git a/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/fonts/fontawesome-webfont.ttf b/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/fonts/fontawesome-webfont.ttf
new file mode 100644
index 0000000..5cd6cff
Binary files /dev/null and b/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/fonts/fontawesome-webfont.ttf differ
http://git-wip-us.apache.org/repos/asf/isis/blob/fa30a76a/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/fonts/fontawesome-webfont.woff
----------------------------------------------------------------------
diff --git a/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/fonts/fontawesome-webfont.woff b/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/fonts/fontawesome-webfont.woff
new file mode 100644
index 0000000..9eaecb3
Binary files /dev/null and b/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/fonts/fontawesome-webfont.woff differ
http://git-wip-us.apache.org/repos/asf/isis/blob/fa30a76a/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/gh-fork-ribbon.css
----------------------------------------------------------------------
diff --git a/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/gh-fork-ribbon.css b/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/gh-fork-ribbon.css
new file mode 100644
index 0000000..5806121
--- /dev/null
+++ b/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/gh-fork-ribbon.css
@@ -0,0 +1,140 @@
+/*!
+ * "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
+ * https://github.com/simonwhitaker/github-fork-ribbon-css
+*/
+
+/* Left will inherit from right (so we don't need to duplicate code) */
+.github-fork-ribbon {
+ /* The right and left classes determine the side we attach our banner to */
+ position: absolute;
+
+ /* Add a bit of padding to give some substance outside the "stitching" */
+ padding: 2px 0;
+
+ /* Set the base colour */
+ background-color: #a00;
+
+ /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
+ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+ background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+ background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+
+ /* Add a drop shadow */
+ -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+ box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+
+ /* Set the font */
+ font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+ z-index: 9999;
+ pointer-events: auto;
+}
+
+.github-fork-ribbon a,
+.github-fork-ribbon a:hover {
+ /* Set the text properties */
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-align: center;
+
+ /* Set the geometry. If you fiddle with these you'll also need
+ to tweak the top and right values in .github-fork-ribbon. */
+ width: 200px;
+ line-height: 20px;
+
+ /* Set the layout properties */
+ display: inline-block;
+ padding: 2px 0;
+
+ /* Add "stitching" effect */
+ border-width: 1px 0;
+ border-style: dotted;
+ border-color: #fff;
+ border-color: rgba(255, 255, 255, 0.7);
+}
+
+.github-fork-ribbon-wrapper {
+ width: 150px;
+ height: 150px;
+ position: absolute;
+ overflow: hidden;
+ top: 0;
+ z-index: 9999;
+ pointer-events: none;
+}
+
+.github-fork-ribbon-wrapper.fixed {
+ position: fixed;
+}
+
+.github-fork-ribbon-wrapper.left {
+ left: 0;
+}
+
+.github-fork-ribbon-wrapper.right {
+ right: 0;
+}
+
+.github-fork-ribbon-wrapper.left-bottom {
+ position: fixed;
+ top: inherit;
+ bottom: 0;
+ left: 0;
+}
+
+.github-fork-ribbon-wrapper.right-bottom {
+ position: fixed;
+ top: inherit;
+ bottom: 0;
+ right: 0;
+}
+
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+ top: 42px;
+ right: -43px;
+
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
+ top: 42px;
+ left: -43px;
+
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+
+
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
+ top: 80px;
+ left: -43px;
+
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
+ top: 80px;
+ right: -43px;
+
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
http://git-wip-us.apache.org/repos/asf/isis/blob/fa30a76a/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/images/maze-black.png
----------------------------------------------------------------------
diff --git a/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/images/maze-black.png b/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/images/maze-black.png
new file mode 100644
index 0000000..99a49c2
Binary files /dev/null and b/example/application/neoapp/webapp/src/main/webapp/cy2neo/styles/images/maze-black.png differ
http://git-wip-us.apache.org/repos/asf/isis/blob/fa30a76a/example/application/neoapp/webapp/src/main/webapp/images/spinning-icon.gif
----------------------------------------------------------------------
diff --git a/example/application/neoapp/webapp/src/main/webapp/images/spinning-icon.gif b/example/application/neoapp/webapp/src/main/webapp/images/spinning-icon.gif
new file mode 100644
index 0000000..75e3b1e
Binary files /dev/null and b/example/application/neoapp/webapp/src/main/webapp/images/spinning-icon.gif differ
http://git-wip-us.apache.org/repos/asf/isis/blob/fa30a76a/example/application/neoapp/webapp/src/main/webapp/scripts/alchemy/alchemy-white.css
----------------------------------------------------------------------
diff --git a/example/application/neoapp/webapp/src/main/webapp/scripts/alchemy/alchemy-white.css b/example/application/neoapp/webapp/src/main/webapp/scripts/alchemy/alchemy-white.css
new file mode 100644
index 0000000..c48f614
--- /dev/null
+++ b/example/application/neoapp/webapp/src/main/webapp/scripts/alchemy/alchemy-white.css
@@ -0,0 +1,698 @@
+@-webkit-keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 25% {
+ opacity: .3;
+ }
+
+ 50% {
+ opacity: .66;
+ }
+
+ 75% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 25% {
+ opacity: .3;
+ }
+
+ 50% {
+ opacity: .66;
+ }
+
+ 75% {
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes pulse {
+ 0% {
+ text-shadow: 0 0 10px rgba(255,255,255,0.2),0 0 12px rgba(255,255,255,0.2),0 0 16px rgba(255,255,255,0.2);
+ }
+
+ 25% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 20px rgba(255,255,255,0.2),0 0 6px rgba(104,185,254,0.7),0 0 10px rgba(104,185,254,0.7);
+ }
+
+ 50% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 20px rgba(255,255,255,0.2),0 0 8px rgba(104,185,254,0.7),0 0 10px rgba(104,185,254,0.7),0 0 15px rgba(104,185,254,0.7);
+ }
+
+ 75% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 25px rgba(255,255,255,0.2),0 0 8px rgba(104,185,254,0.7),0 0 12px rgba(104,185,254,0.7),0 0 15px rgba(104,185,254,0.7),0 0 20px rgba(104,185,254,0.7);
+ }
+}
+
+@keyframes pulse {
+ 0% {
+ text-shadow: 0 0 10px rgba(255,255,255,0.2),0 0 12px rgba(255,255,255,0.2),0 0 16px rgba(255,255,255,0.2);
+ }
+
+ 25% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 20px rgba(255,255,255,0.2),0 0 6px rgba(104,185,254,0.7),0 0 10px rgba(104,185,254,0.7);
+ }
+
+ 50% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 20px rgba(255,255,255,0.2),0 0 8px rgba(104,185,254,0.7),0 0 10px rgba(104,185,254,0.7),0 0 15px rgba(104,185,254,0.7);
+ }
+
+ 75% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 25px rgba(255,255,255,0.2),0 0 8px rgba(104,185,254,0.7),0 0 12px rgba(104,185,254,0.7),0 0 15px rgba(104,185,254,0.7),0 0 20px rgba(104,185,254,0.7);
+ }
+}
+
+@-webkit-keyframes slide-in {
+ 0% {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+ }
+
+ 100% {
+ -webkit-transform: translate(0%, 0);
+ transform: translate(0%, 0);
+ }
+}
+
+@keyframes slide-in {
+ 0% {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+ }
+
+ 100% {
+ -webkit-transform: translate(0%, 0);
+ transform: translate(0%, 0);
+ }
+}
+
+@-webkit-keyframes slide-out {
+ 0% {
+ -webkit-transform: translate(0%, 0);
+ transform: translate(0%, 0);
+ }
+
+ 100% {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+ }
+}
+
+@keyframes slide-out {
+ 100% {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+ }
+}
+
+svg {
+ background: white;
+ position: absolute;
+ left: 0;
+ cursor: -webkit-grab;
+ height: 100%;
+ width: 100%;
+ color: #333;
+}
+
+.edge path {
+ fill: none;
+}
+
+.edge .edge-handler {
+ stroke: transparent;
+ fill: none;
+}
+
+.edge text {
+ display: none;
+ fill: white;
+ font-weight: 200;
+ text-anchor: middle;
+ z-index: 1000;
+ text-shadow: 1px 1px #333, -1px 1px #333, 1px -1px #333, -1px -1px #333;
+}
+
+.edge.active text {
+ display: none;
+ fill: white;
+ font-weight: 200;
+ text-anchor: middle;
+ z-index: 1000;
+ text-shadow: 1px 1px #333, -1px 1px #333, 1px -1px #333, -1px -1px #333;
+}
+
+.edge.active:hover,
+.edge.active.selected {
+ cursor: pointer;
+}
+
+.edge.active:hover text,
+.edge.active.selected text {
+ display: block;
+}
+
+#zoom-controls {
+ background-color: rgba(0,0,0,0.3);
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ box-shadow: 0 0 5px rgba(255,255,255,0.3);
+ margin-top: 10%;
+ z-index: 5;
+ position: relative;
+ display: block;
+ width: 55px;
+}
+
+#zoom-controls #zoom-in,
+#zoom-controls #zoom-out,
+#zoom-controls #zoom-reset {
+ padding: 12px;
+ margin: 0;
+ width: 100%;
+}
+
+#zoom-controls #zoom-in i,
+#zoom-controls #zoom-out i,
+#zoom-controls #zoom-reset i {
+ color: #E89619;
+}
+
+#zoom-controls #zoom-in:hover,
+#zoom-controls #zoom-out:hover,
+#zoom-controls #zoom-reset:hover {
+ background-color: rgba(255,255,255,0.2);
+}
+
+#zoom-controls #zoom-in:active,
+#zoom-controls #zoom-out:active,
+#zoom-controls #zoom-reset:active {
+ border: none;
+}
+
+.fa-caret-right,
+.fa-caret-down {
+ margin: 0 5px;
+ color: #68b9fe;
+}
+
+#search {
+ margin-top: 2em;
+ margin-bottom: 1em;
+ padding: .5em 1em;
+ width: 100%;
+}
+
+#search span {
+ vertical-align: bottom;
+}
+
+#search input {
+ background-color: transparent;
+ border: thin dashed #68B9FE;
+ font-size: 20px;
+ padding-left: 0.5em;
+ margin-top: -1px;
+}
+
+#search input::-webkit-input-placeholder {
+ color: white;
+}
+
+#search input:-moz-placeholder {
+ color: white;
+}
+
+#search input::-moz-placeholder {
+ color: white;
+}
+
+#search input:-ms-input-placeholder {
+ color: white;
+}
+
+#search .search-icon {
+ height: 22px;
+ background-color: transparent;
+ border: thin dashed #68B9FE;
+ color: white;
+}
+
+#stats {
+ padding: 0.5em 1em;
+ background-color: transparent;
+ border-bottom: thin dashed #68b9fe;
+}
+
+#stats #stats-header {
+ padding: 10px;
+}
+
+#stats #all-stats {
+ color: white;
+ border-radius: none;
+ border: none;
+ background: transparent;
+ overflow: auto;
+}
+
+#stats #all-stats li {
+ padding: 3px;
+}
+
+#stats #node-stats-graph,
+#stats #edge-stats-graph {
+ height: 250px;
+}
+
+#stats #node-stats-graph svg,
+#stats #edge-stats-graph svg {
+ opacity: .6;
+ background: transparent;
+}
+
+#stats #node-stats-graph text,
+#stats #edge-stats-graph text {
+ font-size: 16px;
+ fill: white;
+ font-weight: 200;
+ text-anchor: middle;
+ z-index: 1000;
+}
+
+#stats #node-stats-graph .no-data,
+#stats #edge-stats-graph .no-data {
+ margin: 30px 0;
+ color: #68b9fe;
+}
+
+#stats .badge {
+ border-radius: 0;
+ height: 100%;
+ background-color: rgba(104,185,254,0.6);
+}
+
+#editor {
+ padding: 0.5em 1em;
+ background-color: transparent;
+ border-bottom: thin dashed #68b9fe;
+}
+
+#editor h3 {
+ padding: 10px;
+}
+
+#editor #element-options {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ cursor: pointer;
+ margin-top: 10px;
+ margin-left: 2%;
+ color: white;
+}
+
+#editor #element-options .node-property,
+#editor #element-options #node-add-property {
+ display: -webkit-inline-flex;
+ display: inline-flex;
+ margin: 4px 0;
+ width: 100%;
+}
+
+#editor #element-options .property-value,
+#editor #element-options #node-add-property #add-property #node-add-prop-value {
+ border: thin rgba(255,255,255,0.2) solid;
+ border-left: none;
+ background-color: black;
+ color: white;
+ width: 100%;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+#editor #element-options .property-name,
+#editor #element-options #node-add-property #add-property #node-add-prop-key {
+ text-align: center;
+ font-weight: 200;
+ cursor: default;
+ background: #2E2E2E;
+ border: thin transparent solid;
+ color: #68b9fe;
+ border-right: none;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+#editor #element-options #node-add-property #add-property {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-grow: 2;
+ flex-grow: 2;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+}
+
+#editor #element-options #node-add-property #add-property #node-add-prop-value {
+ text-align: center;
+ width: 100%;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 4px;
+ border: thin rgba(255,255,255,0.2) solid;
+}
+
+#editor #element-options #node-add-property #add-property #node-add-prop-key {
+ cursor: text;
+ width: 100%;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 0;
+}
+
+#editor #element-options input[type="submit"],
+#editor #element-options #update-properties {
+ color: #68b9fe;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ width: auto;
+ background: rgba(255,255,255,0.1);
+ border: thin solid #68b9fe;
+ text-align: center;
+}
+
+#editor #element-options input[type="submit"]:active,
+#editor #element-options #update-properties:active,
+#editor #element-options input[type="submit"]:focus,
+#editor #element-options #update-properties:focus {
+ outline: none;
+}
+
+#editor #element-options input[type="submit"]:hover,
+#editor #element-options #update-properties:hover {
+ color: white;
+ border: thin solid white;
+}
+
+#editor #element-options #update-properties {
+ border-radius: 4px;
+ padding: 10px;
+ width: 100%;
+ margin-bottom: 20px;
+}
+
+#editor #editor-interactions.active {
+ color: #68b9fe;
+}
+
+#editor #editor-interactions.inactive {
+ color: white;
+}
+
+#editor #node-editor.enabled {
+ -webkit-animation: fadeIn 1s linear;
+ animation: fadeIn 1s linear;
+}
+
+#control-dash-wrapper {
+ font-family: 'Source Sans Pro', Helvetica, sans-serif;
+ letter-spacing: .05em;
+ height: inherit;
+ z-index: inherit;
+ padding: 0;
+}
+
+#control-dash-wrapper.initial {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+}
+
+#control-dash-wrapper.initial #dash-toggle {
+ color: #68b9fe;
+ -webkit-animation: 4s pulse linear;
+ animation: 4s pulse linear;
+}
+
+#control-dash-wrapper.off-canvas {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+ -webkit-animation: slide-out .75s linear;
+ animation: slide-out .75s linear;
+}
+
+#control-dash-wrapper.off-canvas #dash-toggle {
+ color: #68b9fe;
+ -webkit-animation: 4s pulse linear;
+ animation: 4s pulse linear;
+}
+
+#control-dash-wrapper.on-canvas {
+ -webkit-animation: slide-in .75s ease-in-out;
+ animation: slide-in .75s ease-in-out;
+}
+
+#control-dash-wrapper.on-canvas * {
+ box-shadow: none !important;
+}
+
+#control-dash-wrapper.on-canvas #dash-toggle {
+ color: rgba(104,185,254,0.6);
+}
+
+#control-dash-wrapper.on-canvas #dash-toggle:hover {
+ color: #68b9fe;
+ -webkit-animation: 4s pulse linear;
+ animation: 4s pulse linear;
+}
+
+#control-dash-wrapper #control-dash {
+ overflow-x: hidden;
+ overflow-y: scroll;
+ background-color: rgba(0,0,0,0.3);
+ padding: 0;
+ height: inherit;
+ z-index: 5;
+}
+
+#control-dash-wrapper #control-dash h3 {
+ display: inline;
+ margin: 0;
+}
+
+#control-dash-wrapper #dash-toggle {
+ z-index: 5;
+ background-color: rgba(0,0,0,0.3);
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ box-shadow: 0 0 5px rgba(255,255,255,0.3);
+ position: absolute;
+ left: 0;
+ top: 50%;
+ font-size: 2.2em;
+ color: rgba(255,255,255,0.2);
+ padding: 10px;
+}
+
+#control-dash-wrapper button {
+ border-radius: 0;
+ border: none;
+ background-color: transparent;
+}
+
+#control-dash-wrapper button:active {
+ border: none;
+}
+
+#control-dash-wrapper h3 {
+ font-weight: 200;
+ margin-top: 10px;
+ color: white;
+ cursor: pointer;
+ vertical-align: top;
+}
+
+#control-dash-wrapper li {
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ border-radius: 0;
+}
+
+.node {
+ cursor: pointer;
+}
+
+.node text.root {
+ font-size: 32px;
+}
+
+.node text {
+ display: none;
+ fill: white;
+ font-weight: 200;
+ text-anchor: middle;
+ z-index: 1000;
+ text-shadow: 1px 1px #333, -1px 1px #333, 1px -1px #333, -1px -1px #333;
+}
+
+.node.active {
+ opacity: 1;
+}
+
+.node.active.selected text {
+ display: block;
+}
+
+.node.active:hover text {
+ display: block;
+}
+
+#filters {
+ padding: 0.5em 1em;
+ background-color: transparent;
+ border-bottom: thin dashed #68b9fe;
+ color: white;
+}
+
+#filters form {
+ width: 100%;
+}
+
+#filters #filter-header {
+ padding: 10px;
+}
+
+#filters #filter-relationships,
+#filters #filter-nodes {
+ background-color: transparent;
+ display: inline-block;
+ width: 45%;
+ margin-left: 2%;
+ overflow: auto;
+ text-align: center;
+ vertical-align: top;
+}
+
+#filters #filter-relationships #filter-node-header,
+#filters #filter-relationships #filter-rel-header,
+#filters #filter-nodes #filter-node-header,
+#filters #filter-nodes #filter-rel-header {
+ margin: 10px 0;
+ cursor: pointer;
+ background-color: transparent;
+ border: none;
+ border-radius: 0;
+ width: 100%;
+}
+
+#filters #filter-relationships #filter-node-header h4,
+#filters #filter-relationships #filter-rel-header h4,
+#filters #filter-nodes #filter-node-header h4,
+#filters #filter-nodes #filter-rel-header h4 {
+ font-weight: 200;
+ display: inline;
+ color: white;
+}
+
+#filters #filter-relationships #filter-node-header:active,
+#filters #filter-relationships #filter-rel-header:active,
+#filters #filter-nodes #filter-node-header:active,
+#filters #filter-nodes #filter-rel-header:active {
+ border: none;
+ box-shadow: none;
+}
+
+#filters #filter-relationships #rel-dropdown,
+#filters #filter-relationships #node-dropdown,
+#filters #filter-nodes #rel-dropdown,
+#filters #filter-nodes #node-dropdown {
+ margin: 20px 0;
+ border-radius: none;
+ border: none;
+ background: transparent;
+}
+
+#filters #filter-relationships #rel-dropdown li,
+#filters #filter-relationships #node-dropdown li,
+#filters #filter-nodes #rel-dropdown li,
+#filters #filter-nodes #node-dropdown li {
+ padding: 5px;
+}
+
+#filters #filter-relationships #rel-dropdown li:hover,
+#filters #filter-relationships #node-dropdown li:hover,
+#filters #filter-nodes #rel-dropdown li:hover,
+#filters #filter-nodes #node-dropdown li:hover {
+ background-color: rgba(255,255,255,0.2);
+}
+
+#filters .disabled {
+ color: rgba(255,255,255,0.5);
+}
+
+#filters .disabled:hover {
+ color: #68b9fe;
+}
+
+.alchemy {
+ position: relative;
+}
+
+.alchemy #search form {
+ z-index: 2;
+ display: inline;
+ margin-left: 100px;
+}
+
+.alchemy #add-tag {
+ width: 300px;
+ display: inline-block;
+}
+
+.alchemy #tags input {
+ max-width: 220px;
+}
+
+.alchemy #tags-list {
+ padding: 0;
+}
+
+.alchemy #tags-list .icon-remove-sign {
+ cursor: pointer;
+}
+
+.alchemy #tags-list li {
+ display: inline-block;
+ margin-top: 5px;
+}
+
+.alchemy #tags-list span {
+ background-color: #ccc;
+ color: #333;
+ border-radius: 10em;
+ display: inline-block;
+ padding: 1px 6px;
+}
+
+.alchemy #filter-nodes label,
+.alchemy #filter-relationships label {
+ font-weight: normal;
+ margin-right: 1em;
+}
+
+.alchemy .clear {
+ clear: both;
+}
+
+.alchemy text {
+ font-weight: 200;
+ text-anchor: middle;
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/isis/blob/fa30a76a/example/application/neoapp/webapp/src/main/webapp/scripts/alchemy/alchemy.css
----------------------------------------------------------------------
diff --git a/example/application/neoapp/webapp/src/main/webapp/scripts/alchemy/alchemy.css b/example/application/neoapp/webapp/src/main/webapp/scripts/alchemy/alchemy.css
new file mode 100644
index 0000000..6571ef0
--- /dev/null
+++ b/example/application/neoapp/webapp/src/main/webapp/scripts/alchemy/alchemy.css
@@ -0,0 +1,714 @@
+@-webkit-keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 25% {
+ opacity: .3;
+ }
+
+ 50% {
+ opacity: .66;
+ }
+
+ 75% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 25% {
+ opacity: .3;
+ }
+
+ 50% {
+ opacity: .66;
+ }
+
+ 75% {
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes pulse {
+ 0% {
+ text-shadow: 0 0 10px rgba(255,255,255,0.2),0 0 12px rgba(255,255,255,0.2),0 0 16px rgba(255,255,255,0.2);
+ }
+
+ 25% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 20px rgba(255,255,255,0.2),0 0 6px rgba(104,185,254,0.7),0 0 10px rgba(104,185,254,0.7);
+ }
+
+ 50% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 20px rgba(255,255,255,0.2),0 0 8px rgba(104,185,254,0.7),0 0 10px rgba(104,185,254,0.7),0 0 15px rgba(104,185,254,0.7);
+ }
+
+ 75% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 25px rgba(255,255,255,0.2),0 0 8px rgba(104,185,254,0.7),0 0 12px rgba(104,185,254,0.7),0 0 15px rgba(104,185,254,0.7),0 0 20px rgba(104,185,254,0.7);
+ }
+}
+
+@keyframes pulse {
+ 0% {
+ text-shadow: 0 0 10px rgba(255,255,255,0.2),0 0 12px rgba(255,255,255,0.2),0 0 16px rgba(255,255,255,0.2);
+ }
+
+ 25% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 20px rgba(255,255,255,0.2),0 0 6px rgba(104,185,254,0.7),0 0 10px rgba(104,185,254,0.7);
+ }
+
+ 50% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 20px rgba(255,255,255,0.2),0 0 8px rgba(104,185,254,0.7),0 0 10px rgba(104,185,254,0.7),0 0 15px rgba(104,185,254,0.7);
+ }
+
+ 75% {
+ text-shadow: 0 0 12px rgba(255,255,255,0.2),0 0 15px rgba(255,255,255,0.2),0 0 25px rgba(255,255,255,0.2),0 0 8px rgba(104,185,254,0.7),0 0 12px rgba(104,185,254,0.7),0 0 15px rgba(104,185,254,0.7),0 0 20px rgba(104,185,254,0.7);
+ }
+}
+
+@-webkit-keyframes slide-in {
+ 0% {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+ }
+
+ 100% {
+ -webkit-transform: translate(0%, 0);
+ transform: translate(0%, 0);
+ }
+}
+
+@keyframes slide-in {
+ 0% {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+ }
+
+ 100% {
+ -webkit-transform: translate(0%, 0);
+ transform: translate(0%, 0);
+ }
+}
+
+@-webkit-keyframes slide-out {
+ 0% {
+ -webkit-transform: translate(0%, 0);
+ transform: translate(0%, 0);
+ }
+
+ 100% {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+ }
+}
+
+@keyframes slide-out {
+ 100% {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+ }
+}
+
+svg {
+ position: absolute;
+ left: 0;
+ cursor: -webkit-grab;
+ height: 100%;
+ width: 100%;
+ color: #333;
+}
+
+.node {
+ cursor: pointer;
+}
+
+.node text.root {
+ font-size: 32px;
+}
+
+.node text {
+ display: none;
+ fill: white;
+ font-weight: 200;
+ text-anchor: middle;
+ z-index: 1000;
+ text-shadow: 1px 1px #333, -1px 1px #333, 1px -1px #333, -1px -1px #333;
+}
+
+.node.active {
+ opacity: 1;
+}
+
+.node.active.selected text {
+ display: block;
+}
+
+.node.active:hover text {
+ display: block;
+}
+
+defs #arrow path {
+ stroke: #CCC;
+ stroke-opacity: 0.2;
+ fill: #CCC;
+ opacity: 1;
+}
+
+.edge text {
+ stroke-width: 0;
+}
+
+.edge .edge-handler {
+ fill: none;
+ stroke: none;
+}
+
+.edge .edge-line {
+ fill: none;
+}
+
+.edge.active text {
+ display: none;
+ fill: white;
+ font-weight: 200;
+ text-anchor: middle;
+ text-shadow: 1px 1px #333, -1px 1px #333, 1px -1px #333, -1px -1px #333;
+ z-index: 1000;
+}
+
+.edge.active:hover,
+.edge.active.selected {
+ cursor: pointer;
+}
+
+.edge.active:hover text,
+.edge.active.selected text {
+ display: block;
+}
+
+.edge.active.highlight text {
+ display: block;
+}
+
+#zoom-controls {
+ background-color: transparent;
+ background-image: url("images/maze-black.png");
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ box-shadow: 0 0 5px rgba(255,255,255,0.3);
+ margin-top: 10%;
+ z-index: 5;
+ position: relative;
+ display: block;
+ width: 55px;
+}
+
+#zoom-controls #zoom-in,
+#zoom-controls #zoom-out,
+#zoom-controls #zoom-reset {
+ padding: 12px;
+ margin: 0;
+ width: 100%;
+}
+
+#zoom-controls #zoom-in i,
+#zoom-controls #zoom-out i,
+#zoom-controls #zoom-reset i {
+ color: #E89619;
+}
+
+#zoom-controls #zoom-in:hover,
+#zoom-controls #zoom-out:hover,
+#zoom-controls #zoom-reset:hover {
+ background-color: rgba(255,255,255,0.2);
+}
+
+#zoom-controls #zoom-in:active,
+#zoom-controls #zoom-out:active,
+#zoom-controls #zoom-reset:active {
+ border: none;
+}
+
+.fa-caret-right,
+.fa-caret-down,
+.fa-search {
+ margin: 0 5px;
+ color: #e89619;
+}
+
+#search {
+ margin-top: 2em;
+ margin-bottom: 1em;
+ padding: .5em 1em;
+ width: 100%;
+}
+
+#search span {
+ vertical-align: bottom;
+}
+
+#search input {
+ background-color: black;
+ border: none;
+ font-size: 20px;
+ color: white;
+ padding-left: 0.5em;
+}
+
+#search .search-icon {
+ height: 22px;
+ background-color: #000;
+ border-color: #000;
+ border-right-color: #111;
+}
+
+#stats {
+ padding: 0.5em 1em;
+ background-color: transparent;
+ border-bottom: thin dashed #e89619;
+}
+
+#stats #stats-header {
+ padding: 10px;
+}
+
+#stats #all-stats {
+ color: white;
+ border-radius: none;
+ border: none;
+ background: transparent;
+ overflow: auto;
+}
+
+#stats #all-stats li {
+ padding: 3px;
+}
+
+#stats #node-stats-graph,
+#stats #edge-stats-graph {
+ height: 250px;
+}
+
+#stats #node-stats-graph svg,
+#stats #edge-stats-graph svg {
+ opacity: .6;
+ background: transparent;
+}
+
+#stats #node-stats-graph text,
+#stats #edge-stats-graph text {
+ font-size: 16px;
+ fill: white;
+ font-weight: 200;
+ text-anchor: middle;
+ z-index: 1000;
+}
+
+#stats #node-stats-graph .no-data,
+#stats #edge-stats-graph .no-data {
+ margin: 30px 0;
+ color: #e89619;
+}
+
+#stats .badge {
+ border-radius: 0;
+ height: 100%;
+ background-color: rgba(104,185,254,0.6);
+}
+
+#editor {
+ padding: 0.5em 1em;
+ background-color: transparent;
+ border-bottom: thin dashed #e89619;
+}
+
+#editor h3 {
+ padding: 10px;
+}
+
+#editor #element-options {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ cursor: pointer;
+ margin-top: 10px;
+ margin-left: 2%;
+ color: white;
+}
+
+#editor #element-options .property,
+#editor #element-options #add-property-form {
+ display: -webkit-inline-flex;
+ display: inline-flex;
+ margin: 4px 0;
+ width: 100%;
+}
+
+#editor #element-options .property-value,
+#editor #element-options #add-property-form #add-property #add-prop-value {
+ border: thin rgba(255,255,255,0.2) solid;
+ border-left: none;
+ background-color: black;
+ color: white;
+ width: 100%;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+#editor #element-options .property-name,
+#editor #element-options #add-property-form #add-property #add-prop-key {
+ text-align: center;
+ font-weight: 200;
+ cursor: default;
+ background: #2E2E2E;
+ border: thin transparent solid;
+ color: #e89619;
+ border-right: none;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+#editor #element-options input[type="submit"],
+#editor #element-options #update-properties {
+ color: #e89619;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ width: auto;
+ background: rgba(255,255,255,0.1);
+ border: thin solid #e89619;
+ text-align: center;
+}
+
+#editor #element-options input[type="submit"]:active,
+#editor #element-options #update-properties:active,
+#editor #element-options input[type="submit"]:focus,
+#editor #element-options #update-properties:focus {
+ outline: none;
+}
+
+#editor #element-options input[type="submit"]:hover,
+#editor #element-options #update-properties:hover {
+ color: white;
+ border: thin solid white;
+}
+
+#editor #element-options #update-properties {
+ border-radius: 4px;
+ padding: 10px;
+ width: 100%;
+ margin-bottom: 20px;
+}
+
+#editor #element-options #add-property-form #add-property {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-grow: 2;
+ flex-grow: 2;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+}
+
+#editor #element-options #add-property-form #add-property #add-prop-value {
+ text-align: center;
+ width: 100%;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 4px;
+ border: thin rgba(255,255,255,0.2) solid;
+}
+
+#editor #element-options #add-property-form #add-property #add-prop-key {
+ cursor: text;
+ width: 100%;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 0;
+}
+
+#editor #editor-interactions.active {
+ color: #e89619;
+}
+
+#editor #editor-interactions.inactive {
+ color: white;
+}
+
+#editor #node-editor.enabled,
+#editor #edge-editor.enabled {
+ -webkit-animation: fadeIn 1s linear;
+ animation: fadeIn 1s linear;
+}
+
+#control-dash-wrapper {
+ font-family: 'Source Sans Pro', Helvetica, sans-serif;
+ letter-spacing: .05em;
+ height: inherit;
+ z-index: inherit;
+ padding: 0;
+}
+
+#control-dash-wrapper.initial {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+}
+
+#control-dash-wrapper.initial #dash-toggle {
+ color: #e89619;
+ -webkit-animation: 4s pulse linear;
+ animation: 4s pulse linear;
+}
+
+#control-dash-wrapper.off-canvas {
+ -webkit-transform: translate(-100%, 0);
+ transform: translate(-100%, 0);
+ -webkit-animation: slide-out .75s linear;
+ animation: slide-out .75s linear;
+}
+
+#control-dash-wrapper.off-canvas #dash-toggle {
+ color: #e89619;
+ -webkit-animation: 4s pulse linear;
+ animation: 4s pulse linear;
+}
+
+#control-dash-wrapper.on-canvas {
+ -webkit-animation: slide-in .75s ease-in-out;
+ animation: slide-in .75s ease-in-out;
+}
+
+#control-dash-wrapper.on-canvas * {
+ box-shadow: none !important;
+}
+
+#control-dash-wrapper.on-canvas #dash-toggle {
+ color: rgba(232,150,25,0.6);
+}
+
+#control-dash-wrapper.on-canvas #dash-toggle:hover {
+ color: #e89619;
+ -webkit-animation: 4s pulse linear;
+ animation: 4s pulse linear;
+}
+
+#control-dash-wrapper #control-dash {
+ overflow-x: hidden;
+ overflow-y: scroll;
+ background-color: transparent;
+ background-image: url("images/maze-black.png");
+ padding: 0;
+ height: inherit;
+ z-index: 5;
+}
+
+#control-dash-wrapper #control-dash h3 {
+ display: inline;
+ margin: 0;
+}
+
+#control-dash-wrapper #dash-toggle {
+ z-index: 5;
+ background-color: transparent;
+ background-image: url("images/maze-black.png");
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ box-shadow: 0 0 5px rgba(255,255,255,0.3);
+ position: absolute;
+ left: 0;
+ top: 50%;
+ font-size: 2.2em;
+ color: rgba(255,255,255,0.2);
+ padding: 10px;
+}
+
+#control-dash-wrapper button {
+ border-radius: 0;
+ border: none;
+ background-color: transparent;
+}
+
+#control-dash-wrapper button:active {
+ border: none;
+}
+
+#control-dash-wrapper h3 {
+ font-weight: 200;
+ margin-top: 10px;
+ color: white;
+ cursor: pointer;
+ vertical-align: top;
+}
+
+#control-dash-wrapper li {
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ border-radius: 0;
+}
+
+#clustering {
+ padding: 0.5em 1em;
+ cursor: pointer;
+ color: white;
+ border-bottom: thin dashed #E89619;
+}
+
+#clustering #cluster_control_header,
+#clustering #cluster-key-container {
+ padding: 10px 10px 0 10px;
+}
+
+#clustering #cluster-key {
+ color: #333;
+ background-color: #000;
+ border-radius: 4px;
+ border: thin solid #333;
+ text-align: center;
+ display: inline-block;
+ width: 100%;
+}
+
+#filters {
+ padding: 0.5em 1em;
+ background-color: transparent;
+ border-bottom: thin dashed #e89619;
+ color: white;
+}
+
+#filters form {
+ width: 100%;
+}
+
+#filters #filter-header {
+ padding: 10px;
+}
+
+#filters #filter-relationships,
+#filters #filter-nodes {
+ background-color: transparent;
+ display: inline-block;
+ width: 45%;
+ margin-left: 2%;
+ overflow: auto;
+ text-align: center;
+ vertical-align: top;
+}
+
+#filters #filter-relationships #filter-node-header,
+#filters #filter-relationships #filter-rel-header,
+#filters #filter-nodes #filter-node-header,
+#filters #filter-nodes #filter-rel-header {
+ margin: 10px 0;
+ cursor: pointer;
+ background-color: transparent;
+ border: none;
+ border-radius: 0;
+ width: 100%;
+}
+
+#filters #filter-relationships #filter-node-header h4,
+#filters #filter-relationships #filter-rel-header h4,
+#filters #filter-nodes #filter-node-header h4,
+#filters #filter-nodes #filter-rel-header h4 {
+ font-weight: 200;
+ display: inline;
+ color: white;
+}
+
+#filters #filter-relationships #filter-node-header:active,
+#filters #filter-relationships #filter-rel-header:active,
+#filters #filter-nodes #filter-node-header:active,
+#filters #filter-nodes #filter-rel-header:active {
+ border: none;
+ box-shadow: none;
+}
+
+#filters #filter-relationships #rel-dropdown,
+#filters #filter-relationships #node-dropdown,
+#filters #filter-nodes #rel-dropdown,
+#filters #filter-nodes #node-dropdown {
+ margin: 20px 0;
+ border-radius: none;
+ border: none;
+ background: transparent;
+}
+
+#filters #filter-relationships #rel-dropdown li,
+#filters #filter-relationships #node-dropdown li,
+#filters #filter-nodes #rel-dropdown li,
+#filters #filter-nodes #node-dropdown li {
+ padding: 5px;
+}
+
+#filters #filter-relationships #rel-dropdown li:hover,
+#filters #filter-relationships #node-dropdown li:hover,
+#filters #filter-nodes #rel-dropdown li:hover,
+#filters #filter-nodes #node-dropdown li:hover {
+ background-color: rgba(255,255,255,0.2);
+}
+
+#filters .disabled {
+ color: rgba(255,255,255,0.5);
+}
+
+#filters .disabled:hover {
+ color: #fdc670;
+}
+
+.alchemy {
+ position: relative;
+}
+
+.alchemy #search form {
+ z-index: 2;
+ display: inline;
+ margin-left: 100px;
+}
+
+.alchemy #add-tag {
+ width: 300px;
+ display: inline-block;
+}
+
+.alchemy #tags input {
+ max-width: 220px;
+}
+
+.alchemy #tags-list {
+ padding: 0;
+}
+
+.alchemy #tags-list .icon-remove-sign {
+ cursor: pointer;
+}
+
+.alchemy #tags-list li {
+ display: inline-block;
+ margin-top: 5px;
+}
+
+.alchemy #tags-list span {
+ background-color: #ccc;
+ color: #333;
+ border-radius: 10em;
+ display: inline-block;
+ padding: 1px 6px;
+}
+
+.alchemy #filter-nodes label,
+.alchemy #filter-relationships label {
+ font-weight: normal;
+ margin-right: 1em;
+}
+
+.alchemy .clear {
+ clear: both;
+}
+
+.alchemy text {
+ font-weight: 200;
+ text-anchor: middle;
+}
\ No newline at end of file