index.html 5.09 KB
Newer Older
Adam Feuer's avatar
Adam Feuer committed
1
<!DOCTYPE html>
Matija Obreza's avatar
Matija Obreza committed
2

Adam Feuer's avatar
Adam Feuer committed
3
<head>
Maxym Borodenko's avatar
Webpack  
Maxym Borodenko committed
4
  <meta charset="utf-8">
Adam Feuer's avatar
Adam Feuer committed
5
</head>
Maxym Borodenko's avatar
Maxym Borodenko committed
6

Matija Obreza's avatar
Matija Obreza committed
7 8 9
<body>
  <div class="flexcontainer">
    <div class="menubar">
Matija Obreza's avatar
Matija Obreza committed
10 11 12 13 14 15 16
      <div class="top-bar">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Diversity Trees</li>
            <li>
              <a href="#">Load tree</a>
              <ul class="menu vertical" id="existing-trees">
17 18
                <!-- Filled -->
                <!-- <li><a href="#" class="load-tree" x-url="wheat.json">Wheat #1</a></li>
Matija Obreza's avatar
Matija Obreza committed
19
                <li><a href="#" class="load-tree">TBD</a></li>
20
                <li><a href="#" class="load-tree">TBD</a></li> -->
Matija Obreza's avatar
Matija Obreza committed
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
              </ul>
            </li>
            <li>
              <a href="#">Current tree</a>
              <ul class="menu vertical">
                <li><a href="#" id="resetBtn">New tree / Clear</a></li>
                <li>
                  <a href="#" id="downloadJsonBtn">Download tree</a>
                  <a id="downloadAnchorElem" style="display:none"></a>
                </li>
                <li><a href="#" id="importJsonBtn">Upload tree</a>
                  <input type="file" id="selectFiles" value="Import" accept=".json" />
                </li>
              </ul>
            </li>
          </ul>
Matija Obreza's avatar
Matija Obreza committed
37
        </div>
Matija Obreza's avatar
Matija Obreza committed
38 39 40 41 42 43
        <div class="top-bar-right">
          <ul class="menu">
            <li><a href="#" id="instructionsBtn">Help</a></li>
            <!-- <li><input type="search" placeholder="Search"></li>
            <li><button type="button" class="button">Search</button></li> -->
          </ul>
Matija Obreza's avatar
Matija Obreza committed
44 45
        </div>
      </div>
Matija Obreza's avatar
Matija Obreza committed
46 47 48 49 50
    </div>
    <div class="maincontent">
      <div id="tree-container"></div>
    </div>
  </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
51

Matija Obreza's avatar
Matija Obreza committed
52
  <div id="RenameNodeModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
Maxym Borodenko's avatar
Maxym Borodenko committed
53 54
    <h2 id="modalTitle">Rename Node</h2>
    <form id="RenameNodeForm">
Matija Obreza's avatar
Matija Obreza committed
55 56
      <div class="row">
        <div class="large-12 columns">
Matija Obreza's avatar
Matija Obreza committed
57 58 59 60
          <label>
              Node name
              <input type="text" class="inputName" id='RenameNodeName' placeholder="node name"/>
          </label>
Maxym Borodenko's avatar
Maxym Borodenko committed
61
        </div>
Matija Obreza's avatar
Matija Obreza committed
62 63 64 65
      </div>
      <div class="row">
        <div class="large-8 columns">
          &nbsp;
Adam Feuer's avatar
Adam Feuer committed
66
        </div>
Matija Obreza's avatar
Matija Obreza committed
67
        <div class="large-4 columns">
Matija Obreza's avatar
Matija Obreza committed
68
          <a href="#" data-close class="button info closeModal">Cancel</a>
Matija Obreza's avatar
Matija Obreza committed
69 70 71
          <a href="#" class="button success">Rename</a>
        </div>
      </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
72
    </form>
Matija Obreza's avatar
Matija Obreza committed
73
    <a class="close-button" data-close aria-label="Close">&#215;</a>
Matija Obreza's avatar
Matija Obreza committed
74
  </div>
Adam Feuer's avatar
Adam Feuer committed
75

Matija Obreza's avatar
Matija Obreza committed
76
  <div id="CreateNodeModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
Maxym Borodenko's avatar
Maxym Borodenko committed
77 78
    <h2 id="modalTitle">Create Node</h2>
    <form id="CreateNodeForm">
Matija Obreza's avatar
Matija Obreza committed
79 80 81
      <div class="row">
        <div class="large-12 columns">
          <label>Node name
Maxym Borodenko's avatar
Maxym Borodenko committed
82
                    <input type="text" class="inputName" id='CreateNodeName' placeholder="node name"/>
Adam Feuer's avatar
Adam Feuer committed
83
                </label>
Maxym Borodenko's avatar
Maxym Borodenko committed
84
        </div>
Matija Obreza's avatar
Matija Obreza committed
85 86 87 88 89 90
      </div>
      <div class="row">
        <div class="large-8 columns">
          &nbsp;
        </div>
        <div class="large-4 columns">
Matija Obreza's avatar
Matija Obreza committed
91
          <a href="#" data-close class="button info closeModal">Cancel</a>
Matija Obreza's avatar
Matija Obreza committed
92
          <a href="#" class="button success">Create</a>
Adam Feuer's avatar
Adam Feuer committed
93
        </div>
Matija Obreza's avatar
Matija Obreza committed
94
      </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
95
    </form>
Matija Obreza's avatar
Matija Obreza committed
96
    <a class="close-button" data-close aria-label="Close">&#215;</a>
Matija Obreza's avatar
Matija Obreza committed
97
  </div>
Adam Feuer's avatar
Adam Feuer committed
98

Matija Obreza's avatar
Matija Obreza committed
99
  <div id="InstructionsModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
Matija Obreza's avatar
Matija Obreza committed
100
    <h2 id="modalTitle">How to use the interactive tree editor</h2>
Matija Obreza's avatar
Matija Obreza committed
101
    <div class="text">
Matija Obreza's avatar
Matija Obreza committed
102
      <h3>Uploading the tree</h2>
Matija Obreza's avatar
Matija Obreza committed
103
      <p>
Matija Obreza's avatar
Matija Obreza committed
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
        Go to <b>Current tree</b> drop-down menu, select choose file, choose JSON file with tree stucture that you want to upload, click on upload tree from the same drop-down menu, the tree should appear on the screen, you may have to zoom in or out to see it better.
      </p>

      <h3>Saving your tree</h3>
      <p>
        Once you finished editing the tree you can save your work by clicking on the download tree button on the <b>Current tree</b> drop-down menu. If you are working on a large tree we recommend to save your tree few times while you are working on it.
      </p>

      <h3>Navigation and actions</h3>
      <p>
        <b>Right-click on a tree node</b> to get the menu for renaming the node, deleting the node and creating children nodes.
      </p>

      <p>
        <b>Dragging</b> can be performed on any node other than root. Dropping can be done on any node.
      </p>

      <p>
        <b>Panning</b> can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.
      </p>

      <p>
        <b>Zooming</b> is performed by either double clicking on an empty part of the SVG or by scrolling the mouse-wheel. To Zoom out hold shift when double-clicking.
      </p>

      <p>
        <b>Expanding and collapsing of nodes</b> is achieved by clicking on the desired node.
      </p>

      <p>
        <b>Do not refresh the page while you are editing the tree to avoid that the current tree is cleared.</b>
Matija Obreza's avatar
Matija Obreza committed
135 136
      </p>
    </div>
Matija Obreza's avatar
Matija Obreza committed
137
    <a class="close-button" data-close aria-label="Close">&#215;</a>
Matija Obreza's avatar
Matija Obreza committed
138 139
  </div>

Adam Feuer's avatar
Adam Feuer committed
140
</body>
Matija Obreza's avatar
Matija Obreza committed
141

Adam Feuer's avatar
Adam Feuer committed
142
</html>