Dodanie planszy ładowania do document_details.html.
[redakcja.git] / platforma / templates / wiki / document_details.html
index ebb7242..ad71c84 100644 (file)
 {% extends "base.html" %}
+{% load toolbar_tags %}
 
 {% block extrahead %}
-    <script src="{{STATIC_URL}}js/lib/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
-    <script src="{{STATIC_URL}}js/lib/jquery.splitter.js" type="text/javascript" charset="utf-8"></script>
+    <link rel="stylesheet" href="{{STATIC_URL}}css/master.css" type="text/css" media="screen" charset="utf-8" />
+    <link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" media="screen" charset="utf-8" />
+    <link rel="stylesheet" href="{{STATIC_URL}}css/jquery.autocomplete.css" type="text/css" media="screen" title="no title" charset="utf-8">
     <script type="text/javascript" charset="utf-8">
-        $(function() {
-            var editor = CodeMirror.fromTextArea('id_text', {
-                parserfile: 'parsexml.js',
-                path: "{{ STATIC_URL }}js/lib/codemirror/",
-                stylesheet: "{{ STATIC_URL }}css/xmlcolors.css",
-                parserConfig: {
-                    useHTMLKludges: false
-                },
-                textWrapping: true,
-                tabMode: 'spaces',
-                indentUnit: 0,
-            });
-            
-            $('#splitter').splitter({
-                type: "v",
-                outline: true,
-                minLeft: 480,
-                sizeRight: 0,
-                anchorToWindow: true,
-                resizeToWidth: true,
-            });
-            
-            $(window).resize(function() {
-                $('iframe').height($(window).height() - $('#tabs').outerHeight());
-            });
-            
-            $(window).resize();
-        });
+        var STATIC_URL = '{{STATIC_URL}}';
     </script>
-    
-    <style type="text/css" media="screen">
-    
-        body {
-            margin: 0;
-        }
-        .vsplitbar {
-            width: 15px;
-            background: #C1C1C1 url(/static/img/gallery.png) no-repeat scroll 2px 2px;
-            border-left: 1px solid #777;
-        }
-        
-        .active {
-            background-color: #DDD;
-        }
-        
-        #splitter {
-/*          height: 200px;*/
-/*          width: 500px;*/
-/*          border: 2px solid #B3B3B3;*/
-        }
-        
-        #sidebar {
-            overflow: auto;
-        }
-        
-        #sidebar {
-            background: #989944;
-        }
-        
-        #tabs {
-            margin: 0;
-            padding: 0;
-            background-color: #C1C1C1;
-            width: 100%;
-            height: 22px;
-            padding-top: 2px;
-            border-bottom: 1px solid #777;
-        }
-        
-        #tabs li {
-            display: block;
-            float: left;
-/*            width: 140px;*/
-            padding: 5px 12px 3px 12px;
-            border: 1px solid #999;
-            -webkit-border-radius: 4px;
-            -webkit-border-bottom-left-radius: 0;
-            -webkit-border-bottom-right-radius: 0;
-            font: 11px Helvetica, Verdana, sans-serif;
-            font-weight: bold;
-            color: #222;
-/*            text-shadow: #CCC 1px 1px 1px;*/
-            height: 13px;
-            background-color: #A2A2A2;
-            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #A2A2A2), to(#C1C1C1));
-/*            -webkit-box-shadow: 2px 0px 2px #888;*/
-            margin-left: 4px;
-            margin-bottom: -1px;
-        }
-        
-        #tabs li.active {
-            background-color: #FFF;
-            background-image: none;
-/*            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #C1C1C1), to(#FFFFFF));            */
-            border-bottom: 1px solid #FFF;
-        }
-    </style>
+    <script src="{{STATIC_URL}}js/lib/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
+    <script src="{{STATIC_URL}}js/jquery.blockui.js" type="text/javascript" charset="utf-8"></script>
+    <script src="{{STATIC_URL}}js/jquery.autocomplete.js" type="text/javascript" charset="utf-8"></script>
+    <script src="{{STATIC_URL}}js/jquery.elastic.js" type="text/javascript" charset="utf-8"></script>
+    <script src="{{STATIC_URL}}js/button_scripts.js" type="text/javascript" charset="utf-8"></script>
+    <script src="{{STATIC_URL}}js/xslt.js" type="text/javascript" charset="utf-8"></script>
+    <script src="{{STATIC_URL}}js/main.js" type="text/javascript" charset="utf-8"></script>
 {% endblock %}
 
 {% block maincontent %}
-    <div id="header">
-        <ol id="tabs">
-            <li>Widok prosty</li>
-            <li class="active">Widok zaawansowany</li>
-        </ol>
-        <div style="clear: both"></div>
-    </div>
-    <div id="splitter">
-        <div id="editor">
-            <form action="{% url wiki.views.document_detail document.name|urlencode %}" method="post" accept-charset="utf-8">
-                {{ form.text }}
-                {#  #}
-                {# <p>Autor: {{ form.author }}</p> #}
-                {# <p>Komentarz: {{ form.comment }}</p> #}
-                {# <p><input type="submit" value="Continue &rarr;"></p> #}
-            </form>
+        <div id="loading-overlay">
+            <div id="loading-message"><img src="{{STATIC_URL}}img/spinner.gif" /><p>Ładowanie</p></div>
         </div>
-
-        <div id="sidebar" style="width: 200px">
-            <p>Cokolwiek tutaj :-)</p>
+        <div id="document-meta" style="display:none">
+        {% for k, v in document.meta.items %}
+            <div class="{{ k }}">{{ v}}</div>
+        {% endfor %}
+        </div>
+        <div id="header">
+            <div id="tools" style="float: right;">Wersja: <span id="document-revision">{{ document.revision }}</span> <button style="margin-left: 6px" id="save-button">Zapisz</button></div>
+            <h1>Platforma</h1>
+            <ol id="tabs">
+                <li id="simple-view-tab"><span id="document-name">{{ document.name }}</span></li>
+                <li id="source-view-tab" class="active">Kod źródłowy</li>
+            </ol>
+            <div style="clear: both"></div>
+        </div>
+        <div id="splitter">
+            <div id="editor">
+                <div id="source-editor">
+                    {% toolbar %}
+                    <textarea name="text" id="id_text">{{ document.plain_text }}</textarea>
+                    <input type="hidden" name="name" value="{{ document.name }}" />
+                    <input type="hidden" name="author" value="annonymous" />
+                    <input type="hidden" name="comment" value="no comment" />
+                    <input type="hidden" name="revision" value="{{ document.revision }}" />
+                </div>
+                <div id="simple-editor" style="display: none">
+                    <div class="toolbar">
+                        <button id="insert-theme-button">Wstaw motyw</button> <button id="insert-annotation-button">Wstaw przypis</button>
+                        <div class="toolbar-end"> </div>
+                    </div>
+                    <div id="html-view" class="htmlview">
+                    </div>
+                </div>
+            </div>
+            <div class="vsplitbar"> </div>
+            <div id="sidebar">
+                <div class="toolbar">
+                    <button class="previous-page">⇽ Poprzednia</button>
+                    <input type="text" size="3" maxlength="3" value="1" class="page-number" />
+                    <button class="next-page">Następna ⇾</button>
+                    <button class="zoom-in">Powiększ</button>
+                    <button class="zoom-out">Pomniejsz</button>
+                    <button class="change-gallery">Zmień galerię</button>
+                    <div class="toolbar-end"> </div>
+                </div>
+                <div class="toolbar" id="change-gallery-toolbar">
+                    <input type="text" value="" class="chosen-gallery" />
+                    <button class="change-gallery-ok">Zmień galerię</button>
+                    <button class="change-gallery-cancel">Anuluj</button>
+                    <div class="toolbar-end"> </div>    
+                </div>
+                <div class="gallery-image">
+                    <img src="" />
+                </div>
+            </div>
+        </div>
+        <div id="save-dialog" style="display: none; text-align: left">
+            <label for="komentarz" style="display: block">Opis zmian:</label>
+            <textarea name="komentarz" id="komentarz" style="display: block; width: 100%"></textarea>
+            <button id="save-ok">Zapisz</button> <button id="save-cancel">Anuluj</button>
         </div>
-    </div>
 {% endblock %}
\ No newline at end of file