From be0bb4e123240ac3ce02431b974c82f8f05d843b Mon Sep 17 00:00:00 2001
From: luxagraf <sng@luxagraf.net>
Date: Wed, 9 Jan 2019 13:29:17 -0600
Subject: latest changes

---
 design/templates/notes/notebook_detail.html        | 18 ++-----
 design/templates/notes/notebook_list.html          | 63 +++++++++++++++++-----
 design/templates/notes/notes_detail.html           |  3 +-
 design/templates/notes/notes_list.html             | 40 ++++----------
 design/templates/notes/partials/list_header.html   | 19 +++++++
 design/templates/notes/partials/notebook_form.html |  4 +-
 6 files changed, 86 insertions(+), 61 deletions(-)
 create mode 100644 design/templates/notes/partials/list_header.html

(limited to 'design/templates/notes')

diff --git a/design/templates/notes/notebook_detail.html b/design/templates/notes/notebook_detail.html
index 37c8f8a..49717ca 100644
--- a/design/templates/notes/notebook_detail.html
+++ b/design/templates/notes/notebook_detail.html
@@ -7,14 +7,15 @@
 {% block content %}
 <main>
     <article class="note-container single-col">
+         {% include "notes/partials/list_header.html" with notebook_list=notebook_list tag_list=tag_list %}
         <div class="flex-wrapper">
             {% if object.name != 'Trash'%}
         <form id="nb-edit-form" action="{% url 'notebook-api-detail' object.pk %}" method="PATCH">{% csrf_token %}
             {{ form.non_field_errors }}
             <div class="flex-wrapper flex-inner">
                 {% for field in form %}{% if field.name == 'color_rgb' %}
-                <fieldset class="color-picker-fieldset" id="color-picker" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}>
-                    <input type="text" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb">
+                <fieldset class="color-picker-fieldset" id="color-picker" {% if object.color_rgb %}style="background-color: {{object.color_rgb}}; border: none;"{%endif%}>
+                    <input type="text" name="color_rgb" value="{{object.color_rgb}}" maxlength="20" id="id_color_rgb">
                     {% if field.errors %}{{field.errors}}{% endif %}
                 </fieldset>{% else %}
                 <fieldset class="hide">
@@ -33,19 +34,6 @@
         {%endif%}
         </div>
 
-        <form id="new-note-form" action="{% url 'notebook-api-list' %}" method="post" class="hide">
-            <label>Create a new notebook</label>
-            {% csrf_token %}
-            {{ form.non_field_errors }}
-            {% for field in form %}
-            <fieldset class="" id="fs-{{field.name}}" >
-                {{field.label_tag}}
-                {{field}}
-                {% if field.errors %}{{field.errors}}{% endif %}
-            </fieldset>
-                {% endfor %}
-                <p><input id="btn-js-hide" class="btn btn-inline" value="create" type="submit" /></p>
-        </form>
             <ul class="list-note-preview">{% for object in object.note_set.all %}
                 {% include "notes/partials/note_list.html" with object=object hidecolor=True hidenotebook=True %}
             {% endfor %}</ul>
diff --git a/design/templates/notes/notebook_list.html b/design/templates/notes/notebook_list.html
index 6f25f62..5f1220f 100644
--- a/design/templates/notes/notebook_list.html
+++ b/design/templates/notes/notebook_list.html
@@ -6,32 +6,69 @@
 {% endblock %}
 {% block content %}
 <main>
-    <article class="note-container">
-        <h2 class="hed-small top-margin-0">Add a Notebook</h2>
-        {% include 'notes/partials/notebook_form.html' with form=form %}
+    <article id="nb-list-home" class="note-container">
+    <div class="flex-wrapper">
     <h1 class="hed-small">Notebooks</h1>
-
+    <a class="circle plus small-circle modal-open push-top" href="/nb/" id="add_id_notebook" data-modal-hed-class="notebook" data-modal-hed="Add a New Notebook">New</a>
+    </div>
+            {% if messages %}
+                <ul class="messages">
+                    {% for message in messages %}
+                        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+                            {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
+                        </li>
+                    {% endfor %}
+                </ul>
+            {% endif %}
+        <div id="notebook-wrapper">
+        {% include 'notes/partials/notebook_form.html' with form=form url='' %}
+        </div>
     <ul class="nb-list">{% for form in notebook_form_list %}
         <li class="nb-list-item">
-            <form action="{% url 'notebook-api-detail'  form.instance.id %}" method="PUT">{% for field in form %}{% if field.name == 'color_rgb' %}
-                <fieldset class="color-picker-fieldset" id="color-picker-{{forloop.parentloop.counter0}}" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}>
-                    <input type="text" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb">
+            <form action="{% url 'notebooks:update' form.instance.slug %}" method="POST" name="create" data-method="POST" data-action="">{% csrf_token %}
+                {% for field in form %}{% if field.name == 'color_rgb' %}
+                <div class="flex-wrapper">
+                <fieldset class="fe-color-picker color-picker-fieldset " id="color-picker-{{forloop.parentloop.counter0}}" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}>
+                    <input type="text" class="input-color-rgb" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb-{{forloop.parentloop.counter0}}">
                     {% if field.errors %}{{field.errors}}{% endif %}
                 </fieldset>
-                href="{% url 'notebooks:detail' form.instance.slug %}"
-                <h2>{{form.instance.name}}</h2>
-                {% else %}
+                <h2 class="nb-name"><a href="{% url 'notebooks:detail' form.instance.slug %}">{{form.instance.name}}</a></h2>
+                <button type="submit" value="trash" class="btn-hollow trash float-right" name="trash">Move to Trash</button>
+                </div>
+                {% elif field.name == 'name' %}
                 <fieldset>
+                    <label for="id_name-{{forloop.parentloop.counter0}}">Notebook Name:</label>
+                    <input type="text" name="name" value="{{form.instance.name}}" maxlength="250" required id="id_name-{{forloop.parentloop.counter0}}">
+                </fieldset>
+                {% else %}
                     {% if field.field.widget.input_type != 'hidden' %}{{field.label_tag}}{% endif %}
                     {{field}}
                     {% if field.errors %}{{field.errors}}{% endif %}
-                </fieldset>{% endif %}{% endfor %}
+                {% endif %}{% endfor %}
                 <input id="i-{{forloop.counter0}}" type="submit" class="btn sm" value="Save" >
+                
+                <div class="row-wrapper">
+                    <p>{{form.instance.note_count}} notes{% if form.instance.note_count > 5 %}, most recent:{%endif%}</p>
+                    {% if form.instance.note_count > 0 %}<ul id="n-list-{{forloop.counter0}}" class="n-list{% if form.instance.note_count > 5 %} slideup{%endif%}">{% for note in form.instance.note_set.all %}
+                        <li><a href="{{note.get_absolute_url}}">{{note.title}}</a></li>
+                        {%endfor%}
+                        {% if form.instance.note_count > 5 %}<li class="more"><button type="button" class="btn btn-small btn-more button" id="more-button-{{forloop.counter0}}">More</button></li>{%endif%}
+                    </ul>{%endif%}
+                    {% if form.instance.tag_list %}<div class="tags">Common tags: <ul class="inline">{% for tag in form.instance.tag_list %}
+                        <li class="inline"><a href="{% url 'notes:tags' tag.slug %}">
+                                <span class="tag-wrapper" data-bg-color="#{{tag.color_hex}};" >{{tag|title}}</span>
+                            </a></li>
+                            {%endfor%}</div>{%endif%}
+                    <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-edit float-right" id="edit-toggle-btn-{{forloop.counter0}}">Edit</a></div>
+                </div>
             </form>
-            <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-edit" id="edit-toggle-btn-{{forloop.counter0}}">Edit</a></div>
-            <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-trash" id="trash-btn-{{forloop.counter0}}">Trash</a></div>
         </li>
         {%endfor%}</ul>
+
+
+
+
+
     {% comment %}
     <ul class="nb-list">{% for object in notebook_list %}
         <li class="nb-list-item">
diff --git a/design/templates/notes/notes_detail.html b/design/templates/notes/notes_detail.html
index cce13b7..0099f3d 100644
--- a/design/templates/notes/notes_detail.html
+++ b/design/templates/notes/notes_detail.html
@@ -69,7 +69,8 @@
     </aside>-->
 </main>
 <div class="overlay-content hide" id="js-overlay-notebook">
-    {% include 'notes/partials/notebook_form.html' with form=notebook_form %}
+    {% url 'notebook-api-list' as create_url %}
+    {% include 'notes/partials/notebook_form.html' with form=notebook_form url=create_url %}
 </div>
 {% endblock %}
 
diff --git a/design/templates/notes/notes_list.html b/design/templates/notes/notes_list.html
index 94e82ec..0799a1c 100644
--- a/design/templates/notes/notes_list.html
+++ b/design/templates/notes/notes_list.html
@@ -1,42 +1,20 @@
 {% extends 'base.html' %}
-
 {% block content %}
 <main>
     <div class="note-container">
+    {% include "notes/partials/list_header.html" with notebook_list=notebook_list tag_list=tag_list %}
         <div class="note-hed-wrapper">
             <h1 class="note-hed">Notes</h1>
             {% if messages %}
-                <ul class="messages">
-                    {% for message in messages %}
-                        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
-                            {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
-                        </li>
-                    {% endfor %}
-                </ul>
+            <ul class="messages">
+                {% for message in messages %}
+                    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+                        {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
             {% endif %}
             {% if tags|length >= 1%}<h2 class="note-subhed">Tagged with: {% for tag in tags%}<a href="{{tag.slug}}">{{tag.name}}</a>{%endfor%}</h2>{%endif%}
-
-            <h6 class="bottom-margin-0 inline-block"><button id="notebook-drop-btn" class="btn btn-light btn-drop-menu">Notebooks</button></h6>
-            <div id="notebook-drop-menu" class="dropmenu dropmenu-search">
-                    <div class="dropmenu-search-wrapper"> 
-                    <input class="search" autocapitalize="off" autocorrect="off" type="text" autocomplete="off" tabindex="-1" spellcheck="false" placeholder="Search..." id="notebook-input" data-list="#notebook-list" >
-                        <!--<svg class="fa d-icon d-icon-search svg-icon filter-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#search"></use></svg>-->
-                    </div>
-                    <ul class="list dropmenu-list list-style-none notebook-list" id="notebook-list">{% for object in notebook_list %}
-                        <li ><a class="name" href="{{object.get_absolute_url}}">{{object.name}} - {{object.note_count}}</a></li>
-                    {%endfor%}</ul>
-            </div>
-
-            <h6 class="bottom-margin-0 inline-block"><button id="tags-drop-btn" class="btn btn-light btn-drop-menu">Tags</button></h6>
-            <div id="tags-drop-menu" class="dropmenu dropmenu-search">
-                <div class="dropmenu-search-wrapper"> 
-                    <input class="search" autocapitalize="off" autocorrect="off" type="text" autocomplete="off" tabindex="-1" spellcheck="false" placeholder="Search..." id="tags-input" data-list="#tags-list" >
-                    <!--<svg class="fa d-icon d-icon-search svg-icon filter-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#search"></use></svg>-->
-                </div>
-                <ul class="list dropmenu-list list-style-none notebook-list" id="tags-list">{% for object in tag_list %}
-                    <li><a href="{{object.get_absolute_url}}">{{object.name}} - {{object.note_count}}</a></li>
-                {%endfor%}</ul>
-            </div>
         </div>
         {%comment%}        <label for="choices-single-default">Default</label>
 <select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
@@ -73,3 +51,5 @@
     </div>-->
 </main>
 {% endblock %}
+{% block jsdomready %}
+{% endblock %}
diff --git a/design/templates/notes/partials/list_header.html b/design/templates/notes/partials/list_header.html
new file mode 100644
index 0000000..5d0edc1
--- /dev/null
+++ b/design/templates/notes/partials/list_header.html
@@ -0,0 +1,19 @@
+{% block jsinclude %}
+    <script>
+    window.nbdata = [ {%spaceless%}{% for object in notebook_list %} {value: '{{object.get_absolute_url}}', label: '<span class="color-box" style="background-color: {{object.color_rgb}}"></span><span class="strong nb-name">{{object.name}}</span> x {{object.note_count}}' },{%endfor%} {value: '/nb/', label: '<span class="strong nb-name">All Notebooks</span>', selected: true, },{%endspaceless%}
+    ]
+    window.tagdata = [ {% for object in tag_list %} {value: '{{object.get_absolute_url}}', label: '{% if object.color_rgb %}<span class="color-box" style="background-color: {{object.color_rgb}}"></span>{%endif%}<span class="strong nb-name">{{object.name}}</span> x {{object.note_count}}' },{%endfor%} {value: '/t/', label: '<span class="strong nb-name">All Tags</span>', selected: true, },
+    ]
+    </script>
+<script src="/media/js/choices.min.js"></script>
+{%endblock%}
+        <div id="list-header">
+            <div id="choices-container" class="flex-wrapper">
+                <ul class="list dropmenu-list list-style-none notebook-list" id="notebook-list">{% for object in notebook_list %}
+                    <li ><a class="name" href="{{object.get_absolute_url}}"><span class="color-box" style="background-color: {{object.color_rgb}}"></span><span class="strong nb-name">{{object.name}}</span> x {{object.note_count}}</a></li>
+                {%endfor%}</ul>
+                <ul class="list dropmenu-list list-style-none notebook-list" id="tags-list">{% for object in tag_list %}
+                    <li><a href="{{object.get_absolute_url}}">{% if object.color_rgb %}<span class="color-box" style="background-color: {{object.color_rgb}}"></span>{%endif%}<span class="strong nb-name">{{object.name}}</span> x {{object.note_count}}</a></li>
+                {%endfor%}</ul>
+            </div>
+        </div>
diff --git a/design/templates/notes/partials/notebook_form.html b/design/templates/notes/partials/notebook_form.html
index fae6c40..1e51e9c 100644
--- a/design/templates/notes/partials/notebook_form.html
+++ b/design/templates/notes/partials/notebook_form.html
@@ -1,4 +1,4 @@
-<form id="nb-create-form" action="{% url 'notebook-api-list' %}" method="POST">{% csrf_token %}
+<form id="nb-create-form" action="{{url}}" method="POST">{% csrf_token %}
     <div class="alert" id="non-field-errors">{{ form.non_field_errors }}</div>
             <div class="flex-wrapper flex-inner">
                 {% for field in form %}{% if field.name == 'color_rgb' %}
@@ -15,5 +15,5 @@
                     {% endfor %}
                     <h1 class="notebook-title" id="nb-title">{{object.name}}</h1>
             </div>
-                <input id="notebook-form-submit" type="submit" class="btn sm" value="Save" >
+                <input id="notebook-form-submit" name="create" type="submit" class="btn sm" value="Save" >
         </form>
-- 
cgit v1.2.3