Add some css for frontend

6fa0bbda · Jonas Blatt · 56184f2c · 6fa0bbda · 6fa0bbda · 6fa0bbda
Commit 6fa0bbda authored 5 years ago by Jonas Blatt
--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/img/download.png
+++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/img/download.png
--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/img/upload.png
+++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/img/upload.png
--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css
+++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css
+/** General configuration */
 html, body {
-  height: 100%;
  padding: 0;
-  margin: 0;
-  font-size: 10pt;
+  font-size: 11pt;
+}
+
+h1 {
+  font-weight: 400;
+  line-height: 1.2;
+  font-size: 1.8em;
+  font-family: Impact, Charcoal, sans-serif;
+  margin-top: 8px;
+  color: #0b3004;
 }

 h2 {
  margin: 10px;
 }

-input {
-  color: blue;
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  border-radius: 2px;
+  color: #0b3004;
+  cursor: pointer;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  height: 35px;
+  outline: none;
+  padding-left: 5px;
+}
+
+select option {
+  color: #000;
+}
+
+select optgroup {
+  color: #111;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+select:focus::-ms-value {
+  background-color: transparent;
+}
+
+.clickable {
+  box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, .3);
+}
+
+.clickable:hover {
+  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
 }

-#dmn-file-upload {
-  width: 100%;
+.clickable:active {
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .3);
+}
+
+/** Top-line configuration */
+
+.dmn-root {
+  margin: -2px;
 }

+.dmn-top {
+  height: 60px;
+  padding-left: 6px;
+  padding-top: 6px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.dmn-top-item {
+  flex-grow: 20;
+}
+
+.dmn-top-item > input {
+  display: none;
+}
+
+.dmn-top-item > label {
+  height: 52px;
+  border: 2px solid #0b3004;
+  border-radius: 5px;
+  display: block;
+  background-size: cover;
+  background-position: center;
+}
+
+.dmn-upload {
+  flex-grow: 1;
+  border: 2px black;
+}
+
+.dmn-upload > label {
+  background-image: url("img/upload.png");
+  width: 50px;
+}
+
+.dmn-download {
+  flex-grow: 1;
+}
+
+.dmn-download > label {
+  background-image: url("img/download.png");
+  width: 50px;
+}
+
+/** Verifier configuration */
+
+#dmn-verifier-header {
+  padding: 3px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+#dmn-button-verify {
+  flex-grow: 1;
+  max-width: 90px;
+  height: 35px;
+  background: white;
+  border-radius: 2px;
+}
+
+.dmn-verifier-header-item {
+  margin: 8px 15px;
+}
+
+.dmn-verifier-select {
+  position: relative;
+  flex-grow: 4;
+}
+
+
 .dmn-ERROR {
  list-style-image: url("img/ERROR.png");
 }

--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/index.html
+++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/index.html
@@ -18,17 +18,30 @@
  <link href="css/dmnEditorTabs.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
-<input id="dmn-file-upload" type="file">
-<button id="dmn-file-download">Download</button>
-<div id="content-dmn">
-  <div class="editor-parent">
-    <div class="editor-container"></div>
-    <div class="editor-tabs"></div>
+<div class="dmn-root">
+  <div class="dmn-top">
+    <div class="dmn-top-item dmn-upload">
+      <label class="clickable" for="dmn-file-upload">
+      </label>
+      <input id="dmn-file-upload" type="file"/>
+    </div>
+    <div class="dmn-top-item dmn-download">
+      <label class="clickable" for="dmn-file-download">
+      </label>
+      <input id="dmn-file-download" type="button"/>
+    </div>
+    <div class="dmn-top-item">
+      <h1>Verification for Decision Modeling Notation</h1>
+    </div>
  </div>
+  <div id="content-dmn">
+    <div class="editor-parent">
+      <div class="editor-container"></div>
+      <div class="editor-tabs"></div>
+    </div>
+  </div>
+  <div id="root-dmn-verifier"></div>
 </div>
-<div id="root-dmn-verifier"></div>
-</div>
-
 <!-- load jquery -->
 <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js" type="text/javascript"></script>
 <!-- load dmn modeler -->

--- a/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js
+++ b/dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js
@@ -9,14 +9,20 @@ let verifierResults = {};

 function cleanDmnVerifierRoot() {
  let $root = $('#root-dmn-verifier').empty();
-  $root.append($(`
-    <button id="button-dmn-verify" onClick="checkVerifications()">
-    Get verifications</button>
+  let $header = $(`      
+      <div id="dmn-verifier-header">
+  `);
+  $header.append($(`
+    <button class="clickable dmn-verifier-header-item" id="dmn-button-verify" onClick="checkVerifications()">
+    Verify</button>
  `));
+  $root.append($header);
+  $root.append($(`<div id="dmn-verifier-content">`));
  return $root;
 }

 function checkVerifications() {
+  cleanDmnVerifierRoot();
  getVerifications();
 }

@@ -64,10 +70,11 @@ function getVerifications() {
 }

 function renderDmnVerifierOptions() {
-  // reset div
-  let $root = cleanDmnVerifierRoot();
+  let $header = $('#dmn-verifier-header');
  let $select = $(`
-    <select name="verifier" id="verifier" onchange="renderVerifierResult(this)">
+    <select name="verifier" id="verifier"
+      class="dmn-verifier-header-item dmn-verifier-select clickable"
+      onchange="renderVerifierResult(this)">
  `);
  $select.append($(`<option>Select a verifier</option>`));
  let currentOpt = '';
@@ -86,8 +93,7 @@ function renderDmnVerifierOptions() {
    }
    $curGroup.append(renderSelectEntry(verifierResults.verifier[i]));
  }
-  $root.append($select);
-  $root.append($(`<div id="verifier-entries">`));
+  $header.append($select);
 }

 /**
@@ -108,7 +114,7 @@ function renderSelectEntry(verifier) {
 */
 function renderVerifierResult(verifierSelect) {
  let verifier = findVerifierByName(verifierSelect.value);
-  let $verifierEntries = $('#verifier-entries');
+  let $verifierEntries = $('#dmn-verifier-content');
  $verifierEntries.empty();
  if (verifier !== undefined) {
    $verifierEntries.append($(`