Merge pull request #28 from datasci4health/development

Development

src/adonisjs/public/author/css/author.css

@@ -5,6 +5,10 @@ body {
     font-size: 14pt;
 }
 
+div {
+   box-sizing: border-box;
+}
+
 .std-border {
    border: 1px solid gray;
    border-radius: 5px;
@@ -57,7 +61,7 @@ body {
    width: 100%;
    height: 90%;
    max-height: 90%;
-   flex: auto;
+   flex: 90%;
    display: flex;
 }
 
@@ -110,7 +114,6 @@ body {
    border: 3px solid black;
    border-radius: 5px;
    margin: 10px;
-
 }
 
 .sty-editable-asset:hover {

src/adonisjs/public/author/css/properties.css

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+
+.styp-properties-panel {
+   flex: 30%;
+   min-width: 20%;
+   height: 100%;
+   overflow: scroll;
+   display: flex;
+   flex-direction: column;
+   padding: 5px;
+}
+
+.styp-field-row {
+   width: 100%;
+   display: flex;
+   flex-direction: row;
+   flex-wrap: nowrap;
+}
+
+.styp-field-label {
+   font-weight: bold;
+   background-color: lightgray;
+   flex: 25%;
+   font-size: 12pt;
+}
+
+.styp-field-value {
+   flex: 75%;
+   font-size: 12pt;
+}
+
+.styp-field-highlight {
+   border-style: dashed;
+   border-width: 5px;
+   border-color: blue;
+}

src/adonisjs/public/author/index.html

@@ -5,6 +5,7 @@
    <title>Authoring Environment</title>
 
    <link rel="stylesheet" href="css/author.css">
+   <link rel="stylesheet" href="css/properties.css">
    <!--
    <link rel="stylesheet" href="../themes/classic/css/presentation.css">
    <link rel="stylesheet" href="../themes/classic/css/templates.css">
@@ -45,6 +46,8 @@
    <script src="../lib/d3.v5.min.js"></script>
 
    <script src="js/dcc-author-server-proxy.js"></script>
+   <script src="js/panels.js"></script>
+   <script src="js/properties.js"></script>
    <script src="js/navigator.js"></script>
    <script src="js/author.js"></script>
 </head>
@@ -65,11 +68,12 @@
          <div id="navigation-block" class="sty-navigation-block std-border">
             <div id="navigation-panel" class="sty-navigation-panel"></div>
             <div id="navigator-expansion" class="sty-navigation-expansion">
-               <dcc-trigger id="button-expand" action="control/navigator/expand" label="Expand" image="icons/icon-expand.svg"></dcc-trigger>
-               <dcc-trigger id="button-retract" action="control/navigator/retract" label="Retract" image="icons/icon-retract.svg" style="display:none"></dcc-trigger>
+               <dcc-trigger id="button-expand-nav" action="control/navigator/expand" label="Expand" image="icons/icon-expand.svg"></dcc-trigger>
+               <dcc-trigger id="button-retract-nav" action="control/navigator/retract" label="Retract" image="icons/icon-retract.svg" style="display:none"></dcc-trigger>
             </div>
          </div>
          <div id="knot-panel" class="sty-knot-panel std-border"></div>
+         <div id="properties-panel" class="styp-properties-panel std-border" style="display:none"></div>
       </div>
    </div>
 </body>