1 <% if (options.show_top_bar) { %> |
1 <% if (options.show_top_bar) { %> |
2 <div class="Rk-TopBar"> |
2 <div class="Rk-TopBar"> |
3 <div class="loader"></div> |
3 <div class="loader"></div> |
4 <% if (!options.editor_mode) { %> |
4 <% if (!options.editor_mode) { %> |
5 <h2 class="Rk-PadTitle"> |
5 <h2 class="Rk-PadTitle"> |
6 <%- project.get("title") || translate("Untitled project")%> |
6 <%- project.get("title") || translate("Untitled project")%> |
7 </h2> |
7 </h2> |
8 <% } else { %> |
8 <% } else { %> |
9 <input type="text" class="Rk-PadTitle" value="<%- project.get('title') || '' %>" placeholder="<%-translate('Untitled project')%>" /> |
9 <input type="text" class="Rk-PadTitle" value="<%- project.get('title') || '' %>" placeholder="<%-translate('Untitled project')%>" /> |
10 <% } %> |
10 <% } %> |
11 <% if (options.show_user_list) { %> |
11 <% if (options.show_user_list) { %> |
12 <div class="Rk-Users"> |
12 <div class="Rk-Users"> |
13 <div class="Rk-CurrentUser"> |
13 <div class="Rk-CurrentUser"> |
14 <% if (options.show_user_color) { %> |
14 <% if (options.show_user_color) { %> |
15 <div class="Rk-Edit-ColorPicker-Wrapper"> |
15 <div class="Rk-Edit-ColorPicker-Wrapper"> |
16 <span class="Rk-CurrentUser-Color"> |
16 <span class="Rk-CurrentUser-Color"> |
17 <% if (options.user_color_editable) { %> |
17 <% if (options.user_color_editable) { %> |
18 <span class="Rk-Edit-ColorTip"></span> |
18 <span class="Rk-Edit-ColorTip"></span> |
19 <% } %> |
19 <% } %> |
20 </span> |
20 </span> |
21 <% if (options.user_color_editable) { print(colorPicker) } %> |
21 <% if (options.user_color_editable) { print(colorPicker) } %> |
22 </div> |
22 </div> |
23 <% } %> |
23 <% } %> |
24 <span class="Rk-CurrentUser-Name"><unknown user></span> |
24 <span class="Rk-CurrentUser-Name"><unknown user></span> |
25 </div> |
25 </div> |
26 <ul class="Rk-UserList"></ul> |
26 <ul class="Rk-UserList"></ul> |
27 </div> |
27 </div> |
28 <% } %> |
28 <% } %> |
29 <% if (options.home_button_url) {%> |
29 <% if (options.home_button_url) {%> |
30 <div class="Rk-TopBar-Separator"></div> |
30 <div class="Rk-TopBar-Separator"></div> |
31 <a class="Rk-TopBar-Button Rk-Home-Button" href="<%- options.home_button_url %>"> |
31 <a class="Rk-TopBar-Button Rk-Home-Button" href="<%- options.home_button_url %>"> |
32 <div class="Rk-TopBar-Tooltip"> |
32 <div class="Rk-TopBar-Tooltip"> |
33 <div class="Rk-TopBar-Tooltip-Contents"> |
33 <div class="Rk-TopBar-Tooltip-Contents"> |
34 <%- translate(options.home_button_title) %> |
34 <%- translate(options.home_button_title) %> |
35 </div> |
35 </div> |
36 </div> |
36 </div> |
37 </a> |
37 </a> |
38 <% } %> |
38 <% } %> |
39 <% if (options.show_fullscreen_button) { %> |
39 <% if (options.show_fullscreen_button) { %> |
40 <div class="Rk-TopBar-Separator"></div> |
40 <div class="Rk-TopBar-Separator"></div> |
41 <div class="Rk-TopBar-Button Rk-FullScreen-Button"> |
41 <div class="Rk-TopBar-Button Rk-FullScreen-Button"> |
42 <div class="Rk-TopBar-Tooltip"> |
42 <div class="Rk-TopBar-Tooltip"> |
43 <div class="Rk-TopBar-Tooltip-Contents"> |
43 <div class="Rk-TopBar-Tooltip-Contents"> |
44 <%-translate("Full Screen")%> |
44 <%-translate("Full Screen")%> |
45 </div> |
45 </div> |
46 </div> |
46 </div> |
47 </div> |
47 </div> |
48 <% } %> |
48 <% } %> |
49 <% if (options.editor_mode) { %> |
49 <% if (options.editor_mode) { %> |
50 <% if (options.show_addnode_button) { %> |
50 <% if (options.show_addnode_button) { %> |
51 <div class="Rk-TopBar-Separator"></div> |
51 <div class="Rk-TopBar-Separator"></div> |
52 <div class="Rk-TopBar-Button Rk-AddNode-Button"> |
52 <div class="Rk-TopBar-Button Rk-AddNode-Button"> |
53 <div class="Rk-TopBar-Tooltip"> |
53 <div class="Rk-TopBar-Tooltip"> |
54 <div class="Rk-TopBar-Tooltip-Contents"> |
54 <div class="Rk-TopBar-Tooltip-Contents"> |
55 <%-translate("Add Node")%> |
55 <%-translate("Add Node")%> |
56 </div> |
56 </div> |
57 </div> |
57 </div> |
58 </div> |
58 </div> |
59 <% } %> |
59 <% } %> |
60 <% if (options.show_addedge_button) { %> |
60 <% if (options.show_addedge_button) { %> |
61 <div class="Rk-TopBar-Separator"></div> |
61 <div class="Rk-TopBar-Separator"></div> |
62 <div class="Rk-TopBar-Button Rk-AddEdge-Button"> |
62 <div class="Rk-TopBar-Button Rk-AddEdge-Button"> |
63 <div class="Rk-TopBar-Tooltip"> |
63 <div class="Rk-TopBar-Tooltip"> |
64 <div class="Rk-TopBar-Tooltip-Contents"> |
64 <div class="Rk-TopBar-Tooltip-Contents"> |
65 <%-translate("Add Edge")%> |
65 <%-translate("Add Edge")%> |
66 </div> |
66 </div> |
67 </div> |
67 </div> |
68 </div> |
68 </div> |
69 <% } %> |
69 <% } %> |
70 <% if (options.show_export_button) { %> |
70 <% if (options.show_export_button) { %> |
71 <div class="Rk-TopBar-Separator"></div> |
71 <div class="Rk-TopBar-Separator"></div> |
72 <div class="Rk-TopBar-Button Rk-Export-Button"> |
72 <div class="Rk-TopBar-Button Rk-Export-Button"> |
73 <div class="Rk-TopBar-Tooltip"> |
73 <div class="Rk-TopBar-Tooltip"> |
74 <div class="Rk-TopBar-Tooltip-Contents"> |
74 <div class="Rk-TopBar-Tooltip-Contents"> |
75 <%-translate("Download Project")%> |
75 <%-translate("Download Project")%> |
76 </div> |
76 </div> |
77 </div> |
77 </div> |
78 </div> |
78 </div> |
79 <% } %> |
79 <% } %> |
80 <% if (options.show_save_button) { %> |
80 <% if (options.show_save_button) { %> |
81 <div class="Rk-TopBar-Separator"></div> |
81 <div class="Rk-TopBar-Separator"></div> |
82 <div class="Rk-TopBar-Button Rk-Save-Button"> |
82 <div class="Rk-TopBar-Button Rk-Save-Button"> |
83 <div class="Rk-TopBar-Tooltip"> |
83 <div class="Rk-TopBar-Tooltip"> |
84 <div class="Rk-TopBar-Tooltip-Contents"></div> |
84 <div class="Rk-TopBar-Tooltip-Contents"></div> |
85 </div> |
85 </div> |
86 </div> |
86 </div> |
87 <% } %> |
87 <% } %> |
88 <% if (options.show_open_button) { %> |
88 <% if (options.show_open_button) { %> |
89 <div class="Rk-TopBar-Separator"></div> |
89 <div class="Rk-TopBar-Separator"></div> |
90 <div class="Rk-TopBar-Button Rk-Open-Button"> |
90 <div class="Rk-TopBar-Button Rk-Open-Button"> |
91 <div class="Rk-TopBar-Tooltip"> |
91 <div class="Rk-TopBar-Tooltip"> |
92 <div class="Rk-TopBar-Tooltip-Contents"> |
92 <div class="Rk-TopBar-Tooltip-Contents"> |
93 <%-translate("Open Project")%> |
93 <%-translate("Open Project")%> |
94 </div> |
94 </div> |
95 </div> |
95 </div> |
96 </div> |
96 </div> |
97 <% } %> |
97 <% } %> |
98 <% if (options.show_bookmarklet) { %> |
98 <% if (options.show_bookmarklet) { %> |
99 <div class="Rk-TopBar-Separator"></div> |
99 <div class="Rk-TopBar-Separator"></div> |
100 <a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#"> |
100 <a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#"> |
101 <div class="Rk-TopBar-Tooltip"> |
101 <div class="Rk-TopBar-Tooltip"> |
102 <div class="Rk-TopBar-Tooltip-Contents"> |
102 <div class="Rk-TopBar-Tooltip-Contents"> |
103 <%-translate("Renkan \'Drag-to-Add\' bookmarklet")%> |
103 <%-translate("Renkan \'Drag-to-Add\' bookmarklet")%> |
104 </div> |
104 </div> |
105 </div> |
105 </div> |
106 </a> |
106 </a> |
107 <div class="Rk-TopBar-Separator"></div> |
107 <div class="Rk-TopBar-Separator"></div> |
108 <% } %> |
108 <% } %> |
109 <% } else { %> |
109 <% } else { %> |
110 <% if (options.show_export_button) { %> |
110 <% if (options.show_export_button) { %> |
111 <div class="Rk-TopBar-Separator"></div> |
111 <div class="Rk-TopBar-Separator"></div> |
112 <div class="Rk-TopBar-Button Rk-Export-Button"> |
112 <div class="Rk-TopBar-Button Rk-Export-Button"> |
113 <div class="Rk-TopBar-Tooltip"> |
113 <div class="Rk-TopBar-Tooltip"> |
114 <div class="Rk-TopBar-Tooltip-Contents"> |
114 <div class="Rk-TopBar-Tooltip-Contents"> |
115 <%-translate("Download Project")%> |
115 <%-translate("Download Project")%> |
116 </div> |
116 </div> |
117 </div> |
117 </div> |
118 </div> |
118 </div> |
119 <div class="Rk-TopBar-Separator"></div> |
119 <div class="Rk-TopBar-Separator"></div> |
120 <% } %> |
120 <% } %> |
121 <% }; %> |
121 <% }; %> |
122 <% if (options.show_search_field) { %> |
122 <% if (options.show_search_field) { %> |
123 <form action="#" class="Rk-GraphSearch-Form"> |
123 <form action="#" class="Rk-GraphSearch-Form"> |
124 <input type="search" class="Rk-GraphSearch-Field" placeholder="<%- translate('Search in graph') %>" /> |
124 <input type="search" class="Rk-GraphSearch-Field" placeholder="<%- translate('Search in graph') %>" /> |
125 </form> |
125 </form> |
126 <div class="Rk-TopBar-Separator"></div> |
126 <div class="Rk-TopBar-Separator"></div> |
127 <% } %> |
127 <% } %> |
128 </div> |
128 </div> |
129 <% } %> |
129 <% } %> |
130 <div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>"> |
130 <div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>"> |
131 <div class="Rk-Labels"></div> |
131 <div class="Rk-Labels"></div> |
132 <canvas class="Rk-Canvas" <% if (options.resize) { %> resize="" <% } %>></canvas> |
132 <canvas class="Rk-Canvas" <% if (options.resize) { %> resize="" <% } %>></canvas> |
133 <div class="Rk-Notifications"></div> |
133 <div class="Rk-Notifications"></div> |
134 <div class="Rk-Editor"> |
134 <div class="Rk-Editor"> |
135 <% if (options.show_bins) { %> |
135 <% if (options.show_bins) { %> |
136 <div class="Rk-Fold-Bins">«</div> |
136 <div class="Rk-Fold-Bins">«</div> |
137 <% } %> |
137 <% } %> |
138 <% if (options.show_zoom) { %> |
138 <% if (options.show_zoom) { %> |
139 <div class="Rk-ZoomButtons"> |
139 <div class="Rk-ZoomButtons"> |
140 <div class="Rk-ZoomIn" title="<%-translate('Zoom In')%>"></div> |
140 <div class="Rk-ZoomIn" title="<%-translate('Zoom In')%>"></div> |
141 <div class="Rk-ZoomFit" title="<%-translate('Zoom Fit')%>"></div> |
141 <div class="Rk-ZoomFit" title="<%-translate('Zoom Fit')%>"></div> |
142 <div class="Rk-ZoomOut" title="<%-translate('Zoom Out')%>"></div> |
142 <div class="Rk-ZoomOut" title="<%-translate('Zoom Out')%>"></div> |
143 <% if (options.editor_mode && options.save_view) { %> |
143 <% if (options.editor_mode && options.save_view) { %> |
144 <div class="Rk-ZoomSave" title="<%-translate('Zoom Save')%>"></div> |
144 <div class="Rk-ZoomSave" title="<%-translate('Zoom Save')%>"></div> |
145 <% } %> |
145 <% } %> |
146 <% if (options.save_view) { %> |
146 <% if (options.save_view) { %> |
147 <div class="Rk-ZoomSetSaved" title="<%-translate('View saved zoom')%>"></div> |
147 <div class="Rk-ZoomSetSaved" title="<%-translate('View saved zoom')%>"></div> |
148 <% } %> |
148 <% } %> |
149 </div> |
149 </div> |
150 <% } %> |
150 <% } %> |
151 </div> |
151 </div> |
152 </div> |
152 </div> |