From de1bd373f49c91576d5b64cd7e60b2d9f87b7f52 Mon Sep 17 00:00:00 2001 From: LeXofLeviafan Date: Sun, 25 Aug 2024 20:31:19 +0200 Subject: [PATCH] [jarun#753] migrate to Bootstrap v4 --- bukuserver/README.md | 2 +- bukuserver/bookmarklet.js | 2 +- bukuserver/server.py | 2 +- bukuserver/static/bukuserver/css/list.css | 4 ++ bukuserver/static/bukuserver/css/modal.css | 2 +- bukuserver/static/bukuserver/js/page_size.js | 24 ++++++------ .../templates/bukuserver/bookmark_create.html | 1 + .../bukuserver/bookmark_create_modal.html | 3 +- .../templates/bukuserver/bookmark_edit.html | 5 ++- .../bukuserver/bookmark_edit_modal.html | 1 + .../templates/bukuserver/bookmarklet.url | 2 +- bukuserver/templates/bukuserver/home.html | 28 +++++++------- bukuserver/templates/bukuserver/lib.html | 33 +++++++++++++--- .../templates/bukuserver/statistic.html | 38 +++++++++---------- bukuserver/templates/bukuserver/tag_edit.html | 1 + .../templates/bukuserver/tags_list.html | 6 ++- bukuserver/views.py | 9 +++-- tests/test_views.py | 8 ++-- 18 files changed, 100 insertions(+), 71 deletions(-) create mode 100644 bukuserver/static/bukuserver/css/list.css diff --git a/bukuserver/README.md b/bukuserver/README.md index b3b8f849..c8dc92e5 100644 --- a/bukuserver/README.md +++ b/bukuserver/README.md @@ -118,7 +118,7 @@ The following are os env config variables available for bukuserver. | DISABLE_FAVICON | disable bookmark [favicons](https://wikipedia.org/wiki/Favicon) | boolean [default: `true`] ([here's why](#why-favicons-are-disabled-by-default))| | OPEN_IN_NEW_TAB | url link open in new tab | boolean [default: `false`] | | REVERSE_PROXY_PATH | reverse proxy path | string | -| THEME | [GUI theme](https://bootswatch.com/3) | string [default: `default`] (`slate` is a good pick for dark mode) | +| THEME | [GUI theme](https://bootswatch.com/4) | string [default: `default`] (`slate` is a good pick for dark mode) | | LOCALE | GUI language (partial support) | string [default: `en`] | Note: `BUKUSERVER_` is the common prefix (_every variable starts with it_). diff --git a/bukuserver/bookmarklet.js b/bukuserver/bookmarklet.js index e0b126d4..644526fc 100644 --- a/bukuserver/bookmarklet.js +++ b/bukuserver/bookmarklet.js @@ -16,4 +16,4 @@ url = "{{url}}" + "?url=" + encodeURIComponent(url) + "&title=" + encodeURIComponent(title) + "&description=" + encodeURIComponent(desc); -window.open(url, '_blank', 'menubar=no, height=600, width=800, toolbar=no, scrollbars=yes, status=no, dialog=1'); +window.open(url, '_blank', 'menubar=no, height=700, width=800, toolbar=no, scrollbars=yes, status=no, dialog=1'); diff --git a/bukuserver/server.py b/bukuserver/server.py index 205c3273..cbbb62fa 100644 --- a/bukuserver/server.py +++ b/bukuserver/server.py @@ -120,7 +120,7 @@ def shell_context(): app.jinja_env.filters['netloc'] = lambda x: urlparse(x).netloc # pylint: disable=no-member admin = Admin( - app, name='buku server', template_mode='bootstrap3', + app, name='buku server', template_mode='bootstrap4', index_view=views.CustomAdminIndexView( template='bukuserver/home.html', url='/' ) diff --git a/bukuserver/static/bukuserver/css/list.css b/bukuserver/static/bukuserver/css/list.css new file mode 100644 index 00000000..96ff9cb2 --- /dev/null +++ b/bukuserver/static/bukuserver/css/list.css @@ -0,0 +1,4 @@ +/* overriding icon-button text color with theme color */ +form.icon button { + color: inherit; +} diff --git a/bukuserver/static/bukuserver/css/modal.css b/bukuserver/static/bukuserver/css/modal.css index 20de439b..764e50d9 100644 --- a/bukuserver/static/bukuserver/css/modal.css +++ b/bukuserver/static/bukuserver/css/modal.css @@ -5,7 +5,7 @@ body.modal-open { /* limit dialog height with a scrollbox */ .modal-content { - max-height: calc(100vh - 60px); + max-height: calc(100vh - 3.5rem); display: flex; flex-direction: column; } diff --git a/bukuserver/static/bukuserver/js/page_size.js b/bukuserver/static/bukuserver/js/page_size.js index 23612d36..98ae3d81 100644 --- a/bukuserver/static/bukuserver/js/page_size.js +++ b/bukuserver/static/bukuserver/js/page_size.js @@ -1,20 +1,18 @@ $(document).ready(function() { const SIZES = [20, 50, 100]; // hardcoded list; see page_size_form in admin/model/layout.html let pageSize = url => new URL(url || location.host).searchParams.get('page_size'); - $(`.actions-nav .dropdown-menu`).each(function () { - let _sizes = $(`li a`, this).map(function () {return pageSize(this.href)}).get(); + $(`.nav.nav-tabs .dropdown-menu`).each(function () { + let _sizes = $(`a.dropdown-item`, this).map(function () {return pageSize(this.href)}).get(); if (SIZES.every((x, i) => x == _sizes[i])) - $(`li`, this).last().clone().each(function () { - $('a', this).text("custom").attr('href', `#`).on('click', () => { - let page = prompt(`Set custom page size (empty for default)`, pageSize(location) || ''); - if (Number(page) || (page == "")) { - let search = new URL(location).searchParams; - (page ? search.set('page_size', page) : search.delete('page_size')); - location.search = search; - } else if (page != null) - alert(`Invalid page size: "${page}"`); - return false; - }); + $('a', this).last().clone().text("custom").attr('href', `#`).on('click', () => { + let page = prompt(`Set custom page size (empty for default)`, pageSize(location) || ''); + if (Number(page) || (page == "")) { + let search = new URL(location).searchParams; + (page ? search.set('page_size', page) : search.delete('page_size')); + location.search = search; + } else if (page != null) + alert(`Invalid page size: "${page}"`); + return false; }).appendTo(this); }) }); diff --git a/bukuserver/templates/bukuserver/bookmark_create.html b/bukuserver/templates/bukuserver/bookmark_create.html index 974da099..8906a686 100644 --- a/bukuserver/templates/bukuserver/bookmark_create.html +++ b/bukuserver/templates/bukuserver/bookmark_create.html @@ -6,6 +6,7 @@ {{ buku.limit_navigation_if_popup() }} {{ buku.script('bookmark.js') }} {{ buku.fetch_checkbox() }} + {{ buku.horizontal_form(excluding_popups=True) }} {{ buku.focus() }} {{ buku.link_saved() }} {% endblock %} diff --git a/bukuserver/templates/bukuserver/bookmark_create_modal.html b/bukuserver/templates/bukuserver/bookmark_create_modal.html index 30c6e45f..645c3680 100644 --- a/bukuserver/templates/bukuserver/bookmark_create_modal.html +++ b/bukuserver/templates/bukuserver/bookmark_create_modal.html @@ -10,6 +10,7 @@ {% block tail %} {{ super() }} {{ buku.script('bookmark.js') }} - {{ buku.fetch_checkbox() }} + {{ buku.fetch_checkbox(modal=True) }} + {{ buku.horizontal_form() }} {{ buku.focus('.modal-body') }} {% endblock %} diff --git a/bukuserver/templates/bukuserver/bookmark_edit.html b/bukuserver/templates/bukuserver/bookmark_edit.html index 82d5ff89..f8824f9e 100644 --- a/bukuserver/templates/bukuserver/bookmark_edit.html +++ b/bukuserver/templates/bukuserver/bookmark_edit.html @@ -7,7 +7,7 @@ {% block edit_form %} {{ super() }} -
+ {% if csrf_token %} @@ -23,7 +23,8 @@ {{ super() }} {{ buku.limit_navigation_if_popup() }} {{ buku.script('bookmark.js') }} + + {{ buku.horizontal_form(excluding_popups=True) }} {{ buku.focus() }} {{ buku.link_saved() }} - {% endblock %} diff --git a/bukuserver/templates/bukuserver/bookmark_edit_modal.html b/bukuserver/templates/bukuserver/bookmark_edit_modal.html index 3ddf6484..ac491a62 100644 --- a/bukuserver/templates/bukuserver/bookmark_edit_modal.html +++ b/bukuserver/templates/bukuserver/bookmark_edit_modal.html @@ -4,5 +4,6 @@ {% block tail %} {{ super() }} {{ buku.script('bookmark.js') }} + {{ buku.horizontal_form() }} {{ buku.focus('.modal-body') }} {% endblock %} diff --git a/bukuserver/templates/bukuserver/bookmarklet.url b/bukuserver/templates/bukuserver/bookmarklet.url index d692019b..23446b66 100644 --- a/bukuserver/templates/bukuserver/bookmarklet.url +++ b/bukuserver/templates/bukuserver/bookmarklet.url @@ -1 +1 @@ -javascript:void%20function(){var%20e=location.href,t=document.title.trim()||%22%22,o=document.getSelection().toString().trim()||(document.querySelector(%22meta[name$=description%20i],%20meta[property$=description%20i]%22)||{}).content||%22%22;o.length%3E4e3%26%26(o=o.substr(0,4e3)+%22...%22,alert(%22The%20selected%20text%20is%20too%20long,%20it%20will%20be%20truncated.%22)),e=%22{{url}}%3Furl=%22+encodeURIComponent(e)+%22%26title=%22+encodeURIComponent(t)+%22%26description=%22+encodeURIComponent(o),window.open(e,%22_blank%22,%22menubar=no,%20height=600,%20width=800,%20toolbar=no,%20scrollbars=yes,%20status=no,%20dialog=1%22)}(); +javascript:void%20function(){var%20e=location.href,t=document.title.trim()||%22%22,o=document.getSelection().toString().trim()||(document.querySelector(%22meta[name$=description%20i],%20meta[property$=description%20i]%22)||{}).content||%22%22;o.length%3E4e3%26%26(o=o.substr(0,4e3)+%22...%22,alert(%22The%20selected%20text%20is%20too%20long,%20it%20will%20be%20truncated.%22)),e=%22{{url}}%3Furl=%22+encodeURIComponent(e)+%22%26title=%22+encodeURIComponent(t)+%22%26description=%22+encodeURIComponent(o),window.open(e,%22_blank%22,%22menubar=no,%20height=700,%20width=800,%20toolbar=no,%20scrollbars=yes,%20status=no,%20dialog=1%22)}(); diff --git a/bukuserver/templates/bukuserver/home.html b/bukuserver/templates/bukuserver/home.html index afe1c414..590ce8fa 100644 --- a/bukuserver/templates/bukuserver/home.html +++ b/bukuserver/templates/bukuserver/home.html @@ -9,18 +9,17 @@ {% block menu_links %} {{ super() }} - -
+ +
- + {% endblock %} {% block body %} {{ super() }} -
-
+

BUKU

Bookmark manager like a text-based mini-web

@@ -28,21 +27,21 @@

BUKU

Tags Statistics

-
+
{{ form.keyword.label }} - {{ form.keyword(class_='form-control', style='display: inline; width: auto') }} + {{ form.keyword(class_='form-control d-inline', style='width: auto') }}
-
-
{{form.deep()}} {{form.deep.label}}
-
{{form.regex()}} {{form.regex.label}}
+
+
{{form.deep()}} {{form.deep.label}}
+
{{form.regex()}} {{form.regex.label}}
- +
-
-

Bookmarklet: +

+

Bookmarklet: ✚ Add to Buku
@@ -50,7 +49,7 @@

BUKU

-
+
Location Bar (keyboard-only) shortcut
in Firefox:
@@ -70,6 +69,5 @@

BUKU

-
{% endblock %} diff --git a/bukuserver/templates/bukuserver/lib.html b/bukuserver/templates/bukuserver/lib.html index 4fe43eec..3ad9ab0a 100644 --- a/bukuserver/templates/bukuserver/lib.html +++ b/bukuserver/templates/bukuserver/lib.html @@ -17,8 +17,9 @@ {% macro limit_navigation_if_popup() %} {% endmacro %} @@ -31,17 +32,37 @@ {% endif %} {% endmacro %} -{% macro fetch_checkbox(checked=True) %} +{% macro fetch_checkbox(checked=True, modal=False) %} +{% endmacro %} + +{% macro horizontal_form(excluding_popups=False) %} + {% endmacro %} {% macro details_formatting(prefix='') %} {% endmacro %} diff --git a/bukuserver/templates/bukuserver/statistic.html b/bukuserver/templates/bukuserver/statistic.html index 9bcc105b..fbebcd00 100644 --- a/bukuserver/templates/bukuserver/statistic.html +++ b/bukuserver/templates/bukuserver/statistic.html @@ -16,23 +16,23 @@ {% endblock %} {% block body %} -
-
+
+ Data created {{ datetime_text }} - +

Netloc

{% if netlocs %} -
+
{% if netlocs.cropped %} - {% endif %} @@ -65,12 +65,12 @@

Netloc

- +
- - +
+ @@ -98,14 +98,14 @@

Tag

{% if tags %} -
+
{% if tags.cropped %} - {% endif %} @@ -140,12 +140,12 @@

Tag

- +
-
Rank Netloc
- +
+ @@ -171,14 +171,14 @@

Title (common)

{% if titles %} -
+
{% if titles.cropped %} - {% endif %} @@ -213,12 +213,12 @@

Title (common)

- +
-
Rank Tag
- +
+ @@ -248,7 +248,7 @@ {{ super() }} {{ buku.script('Chart.js') }} diff --git a/bukuserver/templates/bukuserver/tag_edit.html b/bukuserver/templates/bukuserver/tag_edit.html index 3af48c9c..93e2ec49 100644 --- a/bukuserver/templates/bukuserver/tag_edit.html +++ b/bukuserver/templates/bukuserver/tag_edit.html @@ -3,5 +3,6 @@ {% block tail %} {{ super() }} + {{ buku.horizontal_form() }} {{ buku.focus() }} {% endblock %} diff --git a/bukuserver/templates/bukuserver/tags_list.html b/bukuserver/templates/bukuserver/tags_list.html index 84459020..33cb9e4f 100644 --- a/bukuserver/templates/bukuserver/tags_list.html +++ b/bukuserver/templates/bukuserver/tags_list.html @@ -8,8 +8,10 @@ {% block model_menu_bar_before_filters %} {{ super() }} - -
  • {{ _gettext('Refresh') }}
    • + +
  • + {{ _gettext('Refresh') }} +
    • {% endblock %} {% block tail %} diff --git a/bukuserver/views.py b/bukuserver/views.py index b0b31cac..190ad303 100644 --- a/bukuserver/views.py +++ b/bukuserver/views.py @@ -135,7 +135,7 @@ def _list_entry(self, context: Any, model: Namespace, name: str) -> Markup: if netloc and self.url_render_mode != 'netloc' and url_for_index_view_netloc: tag_links += [link(f'netloc:{netloc}', url_for_index_view_netloc, badge='success')] for tag in filter(None, model.tags.split(',')): - tag_links += [link(tag, get_index_view_url(flt0_tags_contain=tag.strip()), badge='default')] + tag_links += [link(tag, get_index_view_url(flt0_tags_contain=tag.strip()), badge='secondary')] res += [f'
    {"".join(tag_links)}
    '] description = model.description and f'
    {escape(model.description)}
    ' if description: @@ -146,7 +146,7 @@ def _list_entry(self, context: Any, model: Namespace, name: str) -> Markup: def get_detail_value(self, context, model, name): value = super().get_detail_value(context, model, name) if name == 'tags': - tags = (link(s.strip(), url_for('bookmark.index_view', flt0_tags_contain=s.strip()), badge='default') + tags = (link(s.strip(), url_for('bookmark.index_view', flt0_tags_contain=s.strip()), badge='secondary') for s in (value or '').split(',') if s.strip()) return Markup(f'
    {"".join(tags)}
    ') if name == 'url': @@ -179,7 +179,7 @@ def get_detail_value(self, context, model, name): edit_modal_template = "bukuserver/bookmark_edit_modal.html" edit_template = "bukuserver/bookmark_edit.html" named_filter_urls = True - extra_css = ['/static/bukuserver/css/' + it for it in ('bookmark.css', 'modal.css')] + extra_css = ['/static/bukuserver/css/' + it for it in ('bookmark.css', 'modal.css', 'list.css')] extra_js = ['/static/bukuserver/js/' + it for it in ('page_size.js', 'last_page.js')] last_page = expose('/last-page')(last_page) @@ -432,6 +432,7 @@ def _name_formatter(self, _, model, name): } list_template = 'bukuserver/tags_list.html' edit_template = "bukuserver/tag_edit.html" + extra_css = ['/static/bukuserver/css/list.css'] extra_js = ['/static/bukuserver/js/' + it for it in ('page_size.js', 'last_page.js')] last_page = expose('/last-page')(last_page) @@ -628,7 +629,7 @@ def format_value(field, bookmark, spacing=''): def link(text, url, new_tab=False, html=False, badge=''): target = ('' if not new_tab else ' target="_blank"') - cls = ('' if not badge else f' class="btn label label-{badge}"') + cls = ('' if not badge else f' class="btn badge badge-{badge}"') return f'{text if html else escape(text)}' def sorted_counter(keys, *, min_count=0): diff --git a/tests/test_views.py b/tests/test_views.py index 9e843656..9c353264 100644 --- a/tests/test_views.py +++ b/tests/test_views.py @@ -149,7 +149,7 @@ def test_bookmarklet_view(bukudb, client, exists, uri, tab, args): response = client.get('/bookmarklet', query_string=query, follow_redirects=True) dom = assert_response(response, uri, argnames=args) - assert dom.xpath(f'//ul{xpath_cls("nav nav-tabs")}/li{xpath_cls("active")}/a/text()') == [tab] + assert dom.xpath(f'//ul{xpath_cls("nav nav-tabs")}//a{xpath_cls("nav-link active")}/text()') == [tab] assert dom.xpath('//input[@name="link"]/@value') == [query['url']] assert bool(dom.xpath('//input[@name="id"]')) == exists @@ -308,9 +308,9 @@ def test_env_entry_render_params(bukudb, app, client, mode, favicons, new_tab): target = '' if not new_tab else ' target="_blank"' icon = '' if not favicons else f' ' prefix = f'' if mode == 'netloc': assert cell == f'{prefix} ({netloc}){suffix}' @@ -367,7 +367,7 @@ def test_env_reverse_proxy_path(proxy_path, client): def test_env_theme(theme, client): dom = assert_response(client.get('/'), '/') assert dom.xpath('//head/link[@rel="stylesheet"][starts-with(@href, $href)]', - href=f'/static/admin/bootstrap/bootstrap3/swatch/{theme or "default"}/bootstrap.min.css?') + href=f'/static/admin/bootstrap/bootstrap4/swatch/{theme or "default"}/bootstrap.min.css?') _DICT = {
    Rank Title
    {icon}{title}' - tags = [f'{s}' for s in _tags] + tags = [f'{s}' for s in _tags] netloc_tag = ('' if mode == 'netloc' else - f'netloc:{netloc}') + f'netloc:{netloc}') suffix = f'
    {netloc_tag}{"".join(tags)}
    {desc}