jabmap/index.html at 653fc129a80d64e2cf219a8ed1a0753072de5d73 · JabRef/jabmap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>JabMap</title>
  <link rel="stylesheet" href="src/jsmind/style/jsmind.css" />
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    nav.navbar {
      flex-shrink: 0;
    }

    #jsmind_container {
      flex-grow: 1;
      overflow: auto;
    }

    .dropdown-item .shortcut {
      color: #6c757d;
      font-size: 0.9em;
      margin-left: 1rem;
    }
  </style>
</head>

<body>
  <!--Navbar with Buttons-->
  <nav class="navbar bg-body-tertiary">
    <div class="container-fluid">
      <div class = "d-flex align-items-start" style="flex-basis: 33%; max-width: 33%;">
        <!--JabMap title-->
        <a class="navbar-brand" href="#">JabMap</a>

        <!--Save and Load Buttons-->
        <button id="saveBtn" class="btn btn-light me-2" type="button" data-bs-toggle="tooltip" title="Save">
          <i class="bi bi-save"></i> Save
        </button>
        <button id="openBtn" class="btn btn-light me-2" type="button" data-bs-toggle="modal" title="Open" data-bs-target="#selectMindmapModal">
          <i class="bi bi-folder2-open"></i> Open
        </button>
        <!--Debug button-->
        <button id="printMapToConsoleBtn" class="btn btn-light me-2" type="button" data-bs-toggle="tooltip" title="Debug">
          Debug
        </button>
      </div>

      <!--Editor buttons-->
      <div class="d-flex justify-content-center" style="flex-basis: 33%; max-width: 33%;">
          <!--Button class explanation: class = "btn color theme margin to the right (me-2)"-->
          <!--Undo Button-->
          <button id="undoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Undo">
            <i class="bi bi-arrow-counterclockwise"></i>
          </button>
          <!--Redo Button-->
          <button id="redoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Redo">
            <i class="bi bi-arrow-clockwise"></i>
          </button>
          <!--New Topic (sibling node) Button-->
          <button id="newSiblingBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New sibling node">
            <i class="bi bi-node-plus-fill"></i>
          </button>
          <!--New Subtopic (child node) Button (icon rotated 90 degrees)-->
          <button id="newChildBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New child node">
            <i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"></i>
          </button>

          <!--Tags Dropdown-->
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle me-2" type="button" id="tagsDropdownMenuButton" data-bs-toggle="dropdown">
              <i class="bi bi-tags"></i>
            </button>
            <div class="dropdown-menu">
              <h6 class="dropdown-header">Icons for nodes</h6>
              <button id="iconCycleBtn" class="dropdown-item d-flex justify-content-between">
                <span>Cycle</span><span class="shortcut">Ctrl + 1</span>
              </button>
              <button id="iconStarBtn" class="dropdown-item d-flex justify-content-between">
                <span>Star</span><span class="shortcut">Ctrl + 2</span>
              </button>
              <button id="iconQuestionBtn" class="dropdown-item d-flex justify-content-between">
                <span>Question</span><span class="shortcut">Ctrl + 3</span>
              </button>
              <button id="iconWarningBtn" class="dropdown-item d-flex justify-content-between">
                <span>Warning</span><span class="shortcut">Ctrl + 6</span>
              </button>
              <button id="iconLightbulbBtn" class="dropdown-item d-flex justify-content-between">
                <span>Lightbulb</span><span class="shortcut">Ctrl + 7</span>
              </button>
              <button id="iconGreenFlagBtn" class="dropdown-item d-flex justify-content-between">
                <span>Green Flag</span><span class="shortcut">Ctrl + 8</span>
              </button>
              <button id="iconRedFlagBtn" class="dropdown-item d-flex justify-content-between">
                <span>Red Flag</span><span class="shortcut">Ctrl + 9</span>
              </button>
            </div>
          </div>

          <!--BibEntry nodes Dropdown-->
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle me-2" id="BibEntryDropdownMenuButton" data-bs-toggle="dropdown">
              <i class="bi bi-file-earmark-text"></i>
            </button>
            <div class="dropdown-menu">
              <h6 class="dropdown-header">New BibEntry node</h6>
              <button id="addBibEntryAsSiblingBtn" class="btn dropdown-item">
                <i class="bi bi-node-plus-fill"> </i> As sibling node
              </button>
              <button id="addBibEntryAsChildBtn" class="btn dropdown-item">
                <i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"> </i> As child node
              </button>
            </div>
          </div>
      </div>
      <div style="flex-basis: 33%; max-width: 33%;"></div>
    </div>
  </nav>

  <!--Required jsMind container-->
  <div id="jsmind_container" style="width:100%;height:100vh;background:#f4f4f4;"></div>

  <!-- Modal for the "Open" dialog-->
  <div class="modal fade" id="selectMindmapModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Choose a JabMap to open</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <select class="form-select" id="openMindmapSelect" size="10"></select>
        </div>
        <div class="modal-footer">
          <button type="button" id="openSelectedMapBtn" class="btn btn-outline-secondary" data-bs-dismiss="modal">
            Open
          </button>
        </div>
      </div>
    </div>
  </div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>