aboutsummaryrefslogtreecommitdiff
path: root/design/templates/notes
diff options
context:
space:
mode:
Diffstat (limited to 'design/templates/notes')
-rw-r--r--design/templates/notes/notebook_create.html36
-rw-r--r--design/templates/notes/notebook_detail.html4
-rw-r--r--design/templates/notes/notebook_list.html55
-rw-r--r--design/templates/notes/notes_create.html30
-rw-r--r--design/templates/notes/notes_detail.html34
-rw-r--r--design/templates/notes/notes_list.html54
-rw-r--r--design/templates/notes/notes_listold.html9
-rw-r--r--design/templates/notes/partials/note_list.html6
-rw-r--r--design/templates/notes/partials/notebook_form.html19
9 files changed, 148 insertions, 99 deletions
diff --git a/design/templates/notes/notebook_create.html b/design/templates/notes/notebook_create.html
deleted file mode 100644
index 1386946..0000000
--- a/design/templates/notes/notebook_create.html
+++ /dev/null
@@ -1,36 +0,0 @@
-{% extends 'base.html' %}
-
-{% block extrastyles %}
-<link rel="stylesheet" href="/media/quill.snow.css" />
-<script async src="/media/js/vanilla-picker.min.js"></script>
-{% endblock %}
-{% block content %}
-<main>
- <article class="note-container">
- <form id="new-notebook-form" action="{% url 'notebook-api-list' %}" method="post">
-{% csrf_token %}
-{{ form.non_field_errors }}
-{% for field in form %}
-<fieldset class="{% if field.errors %}error {%endif%}{% if field.name == 'color_hex' %}hide {%endif%}" id="fs-{{field.name}}" >
-{{field.label_tag}}
-{{field}}
-{% if field.errors %}{{field.errors}}{% endif %}
-</fieldset>
-{% endfor %}
-<p id="color-picker"><a href="#">Pick color</a></p>
-<p><input class="btn btn-inline" value="create" type="submit" /></p>
-</form>
- <ul>{% for object in notebook_list %}
- <li>
- <a href="{% url 'notebooks:detail' object.slug %}"><i class="icon-notebook"> </i>{{object.name}}</a>
- </li>
- {%endfor%}</ul>
- </article>
- <aside class="note-list-container">
- {% include "notes/partials/note_sidebar.html" with note_list=note_list %}
- </aside>
- <div class="balance-container">
- </div>
-</main>
-{% endblock %}
-
diff --git a/design/templates/notes/notebook_detail.html b/design/templates/notes/notebook_detail.html
index a0b06a3..73c13ab 100644
--- a/design/templates/notes/notebook_detail.html
+++ b/design/templates/notes/notebook_detail.html
@@ -47,11 +47,11 @@
{% include "notes/partials/note_list.html" with object=object hidecolor=True hidenotebook=True %}
{% endfor %}</ul>
</article>
- <aside class="note-list-container">
+ {%comment%}<aside class="note-list-container">
{% include "notes/partials/note_sidebar.html" with note_list=note_list %}
</aside>
<div class="balance-container">
- </div>
+ </div>{%endcomment%}
</main>
{% endblock %}
{% block jsdomready %}
diff --git a/design/templates/notes/notebook_list.html b/design/templates/notes/notebook_list.html
new file mode 100644
index 0000000..6f25f62
--- /dev/null
+++ b/design/templates/notes/notebook_list.html
@@ -0,0 +1,55 @@
+{% extends 'base.html' %}
+
+{% block extrastyles %}
+<link rel="stylesheet" href="/media/quill.snow.css" />
+<script async src="/media/js/vanilla-picker.min.js"></script>
+{% 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 %}
+ <h1 class="hed-small">Notebooks</h1>
+
+ <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">
+ {% if field.errors %}{{field.errors}}{% endif %}
+ </fieldset>
+ href="{% url 'notebooks:detail' form.instance.slug %}"
+ <h2>{{form.instance.name}}</h2>
+ {% else %}
+ <fieldset>
+ {% if field.field.widget.input_type != 'hidden' %}{{field.label_tag}}{% endif %}
+ {{field}}
+ {% if field.errors %}{{field.errors}}{% endif %}
+ </fieldset>{% endif %}{% endfor %}
+ <input id="i-{{forloop.counter0}}" type="submit" class="btn sm" value="Save" >
+ </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">
+ <div class="color-picker-fieldset" id="color-picker-{{forloop.counter0}}" {% if object.color_rgb %}style="background-color: {{object.color_rgb}}; border: none;"{%endif%}>
+ </div>
+ <p><a href="{% url 'notebooks:detail' object.slug %}">{{object.name}}</a></p>
+ <p>{{object.note_count}} notes</p>
+ <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-edit" id="edit-toggle-btn">Edit</a></div>
+ <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-Trash" id="edit-toggle-btn">Trash</a></div>
+ </li>
+ {%endfor%}</ul>
+ {% endcomment %}
+ </article>
+ <!--<aside class="note-list-container">
+ {% include "notes/partials/note_sidebar.html" with note_list=note_list %}
+ </aside>
+ <div class="balance-container">
+ </div>-->
+</main>
+{% endblock %}
+
diff --git a/design/templates/notes/notes_create.html b/design/templates/notes/notes_create.html
index 9ca4111..1b39632 100644
--- a/design/templates/notes/notes_create.html
+++ b/design/templates/notes/notes_create.html
@@ -22,10 +22,10 @@
</div>
{% endif %}
{% endfor %}
-<p><input class="btn btn-inline" value="submit" type="submit" /></p>
+<p><input class="btn btn-inline note-save" value="Save" type="submit" /></p>
</form>
</article>
- <aside class="note-list-container">
+ <!--<aside class="note-list-container">
<div class="svg-wrapper"><svg class="svg-icon-arrow">
<svg viewBox="0 0 16 13" id="shape-double-arrow" width="100%" height="100%"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="Showing-post-info" transform="translate(-297.000000, -105.000000)" stroke="currentColor"><g transform="translate(305.000000, 111.500000) scale(-1, 1) rotate(-180.000000) translate(-305.000000, -111.500000) translate(297.000000, 105.000000)"><path d="M2.20710678,6.5 L6.85355339,1.85355339 L7.20710678,1.5 L6.5,0.792893219 L6.14644661,1.14644661 L1.14644661,6.14644661 L1.05805826,6.23483496 L0.792893219,6.5 L1.14644661,6.85355339 L6.14644661,11.8535534 L6.5,12.2071068 L7.20710678,11.5 L6.85355339,11.1464466 L2.20710678,6.5 Z" id="Combined-Shape"></path><path d="M10.2071068,6.5 L14.8535534,1.85355339 L15.2071068,1.5 L14.5,0.792893219 L14.1464466,1.14644661 L9.14644661,6.14644661 L9.05805826,6.23483496 L8.79289322,6.5 L9.14644661,6.85355339 L14.1464466,11.8535534 L14.5,12.2071068 L15.2071068,11.5 L14.8535534,11.1464466 L10.2071068,6.5 Z" id="Combined-Shape"></path></g></g></g></svg>
</svg></div>
@@ -41,31 +41,21 @@
</div>
</aside>
<div class="balance-container">
- </div>
+ </div>-->
</main>
+<div class="overlay-content hide" id="js-overlay-notebook">
+ {% include 'notes/partials/notebook_form.html' with form=notebook_form %}
+</div>
{% endblock %}
{% block jsinclude %}
-<script src="/media/js/highlight.pack.js"></script>
-<script src="/media/js/quill.min.js"></script>
+<script async src="/media/js/choices.min.js"></script>
+<script async src="/media/js/vanilla-picker.min.js"></script>
+<script async src="/media/js/highlight.pack.js"></script>
+<script async src="/media/js/quill.min.js"></script>
{% endblock %}
<script>
{% block jsdomready %}
- var note_text = document.getElementById('id_body_text');
- note_text.innerHTML = "q";
- var plaintext = document.getElementById("fs-body_text");
- plaintext.classList.add('hide')
- initQuill("#note-body");
- var form = document.getElementById('new-note-form');
- console.log(form);
- form.onsubmit = function() {
- var note_qjson = document.getElementById('id_body_qjson');
- note_qjson.innerHTML= JSON.stringify(window.quill.getContents());
- var note_html = document.getElementById('id_body_html');
- note_html.innerHTML = window.quill.root.innerHTML;
- var note_text = document.getElementById('id_body_text');
- note_text.innerHTML = window.quill.getText();
- };
{% endblock %}
</script>
diff --git a/design/templates/notes/notes_detail.html b/design/templates/notes/notes_detail.html
index b2ddbc3..26bff03 100644
--- a/design/templates/notes/notes_detail.html
+++ b/design/templates/notes/notes_detail.html
@@ -2,16 +2,18 @@
{% block extrastyles %}
<link rel="stylesheet" href="/media/quill.snow.css" />
{% endblock %}
+{% block bodyclass %}note-detail{% endblock %}
{% block content %}
<main>
<article class="note-container">
<form action="" method="post" id="note-edit-form">{% csrf_token %}
<header class="note-header">
<div class="note-header-left">
-
<div class="flex-wrapper">
<div class="notebook">
- <a id="n-link" href="{% url 'notebooks:detail' object.slug %}"><span id="n-box" class="color-box" style="background-color: {{object.notebook.color_rgb}}"></span><span id="n-name">{{object.notebook}}</span></a>
+ {% if object.notebook %}<a id="n-link" href="{{object.notebook.get_absolute_url}}"><span id="n-box" class="color-box" style="background-color: {{object.notebook.color_rgb}}"></span><span id="n-name">{{object.notebook}}</span></a>
+ {%else %}<span id="n-link" href="{{object.notebook.get_absolute_url}}"><span id="n-box" class="color-box" style="background-color: {{object.notebook.color_rgb}}"></span><span id="n-name">{{object.notebook}}</span></span>
+ {%endif%}
<div id="notebook-edit" class="hide">
<span class="error">{{ form.notebook.errors }}</span>
{{form.notebook}}
@@ -24,7 +26,7 @@
<span class="tag-wrapper" data-bg-color="#{{tag.color_color_rgb}};" >{{tag}}</span>
</a>{%endfor%}
</div>
- <div id="tags-edit" class="hide">
+ <div id="t-edit" class="hide">
<span class="error">{{ form.notebook.errors }}</span>
{{form.tags}}
</div>
@@ -40,12 +42,16 @@
</div>
</header>
<div class="edit-btn-wrapper"><button class="hide btn btn-hollow" id="edit-toggle-btn">Edit</button></div>
+ <fieldset id="fs-url" class="url-field hide">
+ {{form.url.label_tag}}
+ {{form.url}}
+ </fieldset>
<h1 id="note-title" class="note-title">{{object.title}}</h1>
<div id="q-container" class="inactive"><div id="note-body">{% if object.body_html %}{{object.body_html|safe}}{%else%}{{object.body_text}}{%endif%}</div></div>
<input id="btn-js-hide" type="submit" class="btn sm" value="Save" >
</form>
</article>
- <aside class="note-list-container">
+ <!--<aside class="note-list-container">
<div class="svg-wrapper"><svg class="svg-icon-arrow">
<svg viewBox="0 0 16 13" id="shape-double-arrow" width="100%" height="100%"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="Showing-post-info" transform="translate(-297.000000, -105.000000)" stroke="currentColor"><g transform="translate(305.000000, 111.500000) scale(-1, 1) rotate(-180.000000) translate(-305.000000, -111.500000) translate(297.000000, 105.000000)"><path d="M2.20710678,6.5 L6.85355339,1.85355339 L7.20710678,1.5 L6.5,0.792893219 L6.14644661,1.14644661 L1.14644661,6.14644661 L1.05805826,6.23483496 L0.792893219,6.5 L1.14644661,6.85355339 L6.14644661,11.8535534 L6.5,12.2071068 L7.20710678,11.5 L6.85355339,11.1464466 L2.20710678,6.5 Z" id="Combined-Shape"></path><path d="M10.2071068,6.5 L14.8535534,1.85355339 L15.2071068,1.5 L14.5,0.792893219 L14.1464466,1.14644661 L9.14644661,6.14644661 L9.05805826,6.23483496 L8.79289322,6.5 L9.14644661,6.85355339 L14.1464466,11.8535534 L14.5,12.2071068 L15.2071068,11.5 L14.8535534,11.1464466 L10.2071068,6.5 Z" id="Combined-Shape"></path></g></g></g></svg>
</svg></div>
@@ -59,26 +65,18 @@
</li>
{% endfor %}</ul>
</div>
- </aside>
- <div class="balance-container">
- </div>
+ </aside>-->
</main>
+<div class="overlay-content hide" id="js-overlay-notebook">
+ {% include 'notes/partials/notebook_form.html' with form=notebook_form %}
+</div>
{% endblock %}
{% block jsinclude %}
+<script async src="/media/js/vanilla-picker.min.js"></script>
<script src="/media/js/highlight.pack.js"></script>
<script src="/media/js/quill.min.js"></script>
-<script>
-document.addEventListener('readystatechange', event => {
- if (event.target.readyState === "interactive") {
- //initLoader();
- }
- else if (event.target.readyState === "complete") {
- initQuill("#note-body");
- }
-});
-</script>
{% endblock %}
{% block jsdomready %}
-window.url = "{% url 'notes-api-detail' object.pk %}";
+
{%endblock%}
diff --git a/design/templates/notes/notes_list.html b/design/templates/notes/notes_list.html
index 393cf89..5ef067a 100644
--- a/design/templates/notes/notes_list.html
+++ b/design/templates/notes/notes_list.html
@@ -2,33 +2,65 @@
{% block content %}
<main>
- <article class="note-container">
- <h1>Notes {% if tags|length == 1%} tagged {% for tag in tags%}{{tag}}{%endfor%}{%endif%}</h1>
- {% if tags|length >= 1%}<div>Tagged with: {% for tag in tags%}<a href="{{tag|slugify}}">{{tag}}</a>{%endfor%}</div>{%endif%}
+ <div class="note-container">
+ <div class="note-hed-wrapper">
+ <h1 class="note-hed">Notes</h1>
+ {% 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">
+<option placeholder>This is a placeholder</option>
+ {% for object in notebook_list %}
+ <option value="{{object.name}}" id="">{{object.name}}</option>
+ {% endfor %}
+</select>{%endcomment%}
+
<ul class="list-note-preview">{% for object in object_list %}
{% include "notes/partials/note_list.html" with object=object %}
{% endfor %}</ul>
- </article>{% if tags|length >= 1%}
- <aside class="note-list-container">
+ </div>{% if tags|length >= 1%}
+ {%comment%}<aside class="note-list-container">
<div class="svg-wrapper"><svg class="svg-icon-arrow">
<svg viewBox="0 0 16 13" id="shape-double-arrow" width="100%" height="100%"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="Showing-post-info" transform="translate(-297.000000, -105.000000)" stroke="currentColor"><g transform="translate(305.000000, 111.500000) scale(-1, 1) rotate(-180.000000) translate(-305.000000, -111.500000) translate(297.000000, 105.000000)"><path d="M2.20710678,6.5 L6.85355339,1.85355339 L7.20710678,1.5 L6.5,0.792893219 L6.14644661,1.14644661 L1.14644661,6.14644661 L1.05805826,6.23483496 L0.792893219,6.5 L1.14644661,6.85355339 L6.14644661,11.8535534 L6.5,12.2071068 L7.20710678,11.5 L6.85355339,11.1464466 L2.20710678,6.5 Z" id="Combined-Shape"></path><path d="M10.2071068,6.5 L14.8535534,1.85355339 L15.2071068,1.5 L14.5,0.792893219 L14.1464466,1.14644661 L9.14644661,6.14644661 L9.05805826,6.23483496 L8.79289322,6.5 L9.14644661,6.85355339 L14.1464466,11.8535534 L14.5,12.2071068 L15.2071068,11.5 L14.8535534,11.1464466 L10.2071068,6.5 Z" id="Combined-Shape"></path></g></g></g></svg>
</svg></div>
<div class="">
<ul class="list-note-preview">{% for obj in notes_list %}
<li>
- <a href="{% url 'notes:detail' obj.slug obj.pk %}">
+ <a href="{{obj.get_absolute_url}}">
<h4>{{obj.title}}</h4>
<div class="note-preview">{{obj.body_text|truncatewords:12}}</div>
</a>
</li>
{% endfor %}</ul>
</div>
- </aside>
+ </aside>{%endcomment%}
{%else%}
- <div class="balance-container-left">
- </div>
+ <!--<div class="balance-container-left">
+ </div>-->
{%endif%}
- <div class="balance-container">
- </div>
+ <!--<div class="balance-container">
+ </div>-->
</main>
{% endblock %}
diff --git a/design/templates/notes/notes_listold.html b/design/templates/notes/notes_listold.html
deleted file mode 100644
index 8066369..0000000
--- a/design/templates/notes/notes_listold.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends 'base.html' %}
-{% block content %}
-<main>
- <h1> Notes</h1>
- <ul>{% for obj in object_list %}
- <li><a href="{% url 'notes:note-detail' user.username obj.slug %}">{{obj}}</a></li>
- {% endfor %}</ul>
-</main>
-{% endblock %}
diff --git a/design/templates/notes/partials/note_list.html b/design/templates/notes/partials/note_list.html
index 0c91b34..9ba4689 100644
--- a/design/templates/notes/partials/note_list.html
+++ b/design/templates/notes/partials/note_list.html
@@ -1,11 +1,11 @@
-<li {% if object.notebook and not hidecolor %}class="notebook-colored" style="border-left-color: {{object.notebook.color_rgb}};" {% endif %} >
- <a href="{% url 'notes:detail' object.slug object.pk %}">
+<li {% if object.notebook and not hidecolor %}class="notebook-colored" style="border-left-color: {{object.notebook.color_rgba}};" {% endif %} >
+ <a href="{{object.get_absolute_url}}">
<h4>{{object.title}}</h4>
<div class="note-preview">{{object.body_text|truncatewords:36}}</div>
</a>
<div class="flex-wrapper">{% if object.notebook and not hidenotebook %}
<div class="notebook">
- <a href="{% url 'notebooks:detail' object.slug %}"><span class="color-box" style="background-color: {{object.notebook.color_rgb}}"></span>{{object.notebook}}</a>
+ <a href="{{object.notebook.get_absolute_url}}"><span class="color-box" style="background-color: {{object.notebook.color_rgb}}"></span>{{object.notebook}}</a>
</div>{% endif %}
<div class="tags">tags: {% for tag in object.tags.all %}
<a href="{% url 'notes:tags' tag.slug %}">
diff --git a/design/templates/notes/partials/notebook_form.html b/design/templates/notes/partials/notebook_form.html
new file mode 100644
index 0000000..fae6c40
--- /dev/null
+++ b/design/templates/notes/partials/notebook_form.html
@@ -0,0 +1,19 @@
+<form id="nb-create-form" action="{% url 'notebook-api-list' %}" 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' %}
+ <fieldset class="fe-color-picker color-picker-fieldset block" id="color-picker" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}>
+ {{field.label_tag}}
+ <input type="text" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb">
+ {% if field.errors %}{{field.errors}}{% endif %}
+ </fieldset>{% else %}
+ {%if field.name != 'owner' %}<fieldset class="nb-{{field.name}}">
+ {{field.label_tag}}
+ {{field}}
+ {% if field.errors %}{{field.errors}}{% endif %}
+ </fieldset>{%else%}{{field}}{% endif %}{%endif%}
+ {% endfor %}
+ <h1 class="notebook-title" id="nb-title">{{object.name}}</h1>
+ </div>
+ <input id="notebook-form-submit" type="submit" class="btn sm" value="Save" >
+ </form>
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2025-02-20 18:58:16 +0000