Skip to content

Commit

Permalink
Menu redesign (#282)
Browse files Browse the repository at this point in the history 
* Menu redesign (vertical bar)
* Add title to links and fix tests
  • Loading branch information
@PonteIneptique
PonteIneptique committed May 3, 2022
1 parent bfdd6b6 commit 697f72e
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 71 deletions.
40 changes: 39 additions & 1 deletion app/statics/css/site.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@

body {
padding-bottom: 2em;
}
.table-changed,
.table-changed > th,
.table-changed > td {
Expand Down Expand Up @@ -217,4 +219,40 @@ https://codepen.io/sergiopedercini/pen/jmKdbj/?source=post_page-----------------
}
.px1 {
font-size:0px;
}
.menu-horizontal-group > * {
margin:5px 1rem;
}
.menu-horizontal em {
font-weight: bold;
}
.menu-horizontal .btn-outline-dark {
background-color: #dee2e6;
}
.menu-horizontal .btn-outline-dark:hover {
background-color: #1b1e21;
}
.menu-horizontal .btn-outline-dark.title {
font-weight: bold;
color: #6d7072;
}
.menu-horizontal .title{
font-weight: bold;
color: #6d7072;
}
.menu-horizontal .btn-outline-dark.title:hover {
background-color: #dee2e6;
cursor: default;
color: #6d7072;
}

.btn-circle {
text-align: center;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
font-size: 2em;
padding:0;
border-radius: .75em;
opacity: 80%;
}
6 changes: 4 additions & 2 deletions app/statics/js/folding.panel.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
document.addEventListener("DOMContentLoaded", function() {
/**
* document.addEventListener("DOMContentLoaded", function() {
const resizeButton = document.getElementById("resize-menu");
const menu_class = document.getElementById("left-menu").classList;
const cookieName = "resized-menu";
Expand Down Expand Up @@ -48,4 +49,5 @@ document.addEventListener("DOMContentLoaded", function() {
}
changeExpandIcon(getResizeCookie());
});
});
*/
21 changes: 10 additions & 11 deletions app/templates/layouts/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,18 @@
{% block nav %}
{{ nav.render_nav(current_user, corpora=favorites, control_lists=control_lists) }}
{% endblock %}
{% if corpus %}
<div class="corpus-menu">
{{ nav.quick_nav(corpus) }}
{{ nav.single_corpus_nav(corpus, current_user=current_user) }}
</div>
{% endif %}

<div class="container-fluid" id="main-container">
<div class="row">
{% if corpus or control_list %}
<div class="col bg-light {% if resizedLeftMenu=="true" and corpus %}folded-left-col animated{% else %}col-lg-2{% endif %}" id="left-menu">
{%- if corpus %}
<div class="text-right">
<a class="btn btn-outline-info btn-sm" id="resize-menu"><i class="fa fa-compress"></i></a>
</div>
<div class="corpus-menu">
{{ nav.quick_nav(corpus) }}
{{ nav.single_corpus_nav(corpus, current_user=current_user) }}
</div>
{% elif control_list %}
{% if control_list %}
<div class="col bg-light col-lg-2" id="left-menu">
{%- if control_list %}
{{ control_list_macros.nav_control_list(control_list) }}
{% endif %}
</div>
Expand Down
144 changes: 89 additions & 55 deletions app/templates/macros/nav_macros.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,64 +164,98 @@
{% macro single_corpus_nav(corpus, current_user) %}

{% set visible = corpus.displayed_columns_by_name %}

<header>
<a id="overview_{{corpus.id}}" href="{{url_for("main.corpus_get", corpus_id=corpus.id)}}">
{{corpus.name}}</a>
</header>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="{{url_for("main.preferences", corpus_id=corpus.id)}}">
<div class="menu-link" style="position: fixed; bottom:0; right: 0; z-index: 888;">
<a class="btn btn-circle btn-lg btn-light " href="#corpus-menu" aria-label="Go back to top">
<i class="fa fa-arrow-circle-up"></i>
</a>
</div>
<nav class="container-fluid menu-horizontal" style="background-color: #fdfdfd;" id="corpus-menu">
<hr />
<div class="row align-items-center">
<div class="col-md-1">
<div class="title text-right" ><b>Menu</b></div>
</div>
<div class="col">
<div class="menu-horizontal-group mx-1">
<div class="btn-group btn-group-sm" role="group">
<a class="btn btn-outline-dark title px-2">
Corpus
</a>
<a class="btn btn-outline-dark" title="Get corpus statistics and informations" id="stats_{{corpus.id}}" href="{{url_for("main.corpus_get", corpus_id=corpus.id)}}">
<i class="fa fa-tachometer"></i> Home</a>
<a class="btn btn-outline-dark" title="Manage corpus' settings" href="{{url_for("main.preferences", corpus_id=corpus.id)}}">
<i class="fa fa-cog"></i> Preferences
</a>
</li>
<li>
<a class="nav-link" href="{{url_for("main.corpus_custom_dict", corpus_id=corpus.id)}}">
<i class="fa fa-book"></i> Custom Dictionary
</div>
<div class="btn-group btn-group-sm" role="group">
<a class="btn btn-outline-dark title">
Control List
</a>
</li>
</ul>
Quick links
<ul class="nav flex-column">
<li class="nav-item">
<a id="stats_{{corpus.id}}" class="nav-link" href="{{url_for("main.corpus_get", corpus_id=corpus.id)}}">
<i class="fa fa-tachometer"></i> Statistics</a>
</li>
<li class="nav-item"><a class="nav-link" id="corpus_{{corpus.id}}_search_tokens" href="{{url_for("main.tokens_search_through_fields", corpus_id=corpus.id)}}">
<i class="fa fa-search"></i> Search tokens</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for("main.tokens_correct", corpus_id=corpus.id) }}">
<i class="fa fa-pencil"></i> Correct tokens
</a></li>
<li class="nav-item"> <a class="nav-link" id="bookmark_link" href="{{ url_for("main.corpus_bookmark", corpus_id=corpus.id) }}">
<i class="fa fa-bookmark"></i> Bookmark
</a></li>
<li class="nav-item"><a class="nav-link" href="{{url_for("main.tokens_export", corpus_id=corpus.id)}}">
<i class="fa fa-download"></i> Export tokens</a></li>
<li class="nav-item"><a class="nav-link" href="{{url_for("main.tokens_history", corpus_id=corpus.id)}}">
<i class="fa fa-list"></i> Corrections history</a></li>
<li class="nav-item"><a class="nav-link" href="{{url_for("control_lists_bp.get", control_list_id=corpus.control_lists_id)}}">
<i class="fa fa-cogs"></i> Control List</a></li>
<li class="nav-item"><a class="nav-link" href="{{url_for("main.tokens_edit_history", corpus_id=corpus.id)}}">
<i class="fa fa-calendar-times-o"></i> Editions history</a></li>
{% if corpus.is_owned_by(current_user) or current_user.is_admin() %}
<li class="nav-item"><a class="nav-link" href="{{url_for("main.control_list_switch", corpus_id=corpus.id)}}">
<i class="fa fa-exchange"></i> Switch control list</a></li>
<li class="nav-item"><a class="nav-link" href="{{url_for("main.corpus_delete", corpus_id=corpus.id)}}">
<i class="fa fa-remove"></i> Delete the corpus</a></li>
{% endif %}
</ul>
Correct tokens with
<ul class="nav flex-column">
{% if "lemma" in visible %}
<li class="nav-item"><a class="nav-link" href="{{url_for("main.tokens_correct_unallowed", corpus_id=corpus.id, allowed_type='lemma')}}">Unallowed lemma</a></li>
{% endif %}
{% if "POS" in visible %}
<li class="nav-item"><a class="nav-link" href="{{url_for("main.tokens_correct_unallowed", corpus_id=corpus.id, allowed_type='POS')}}">Unallowed POS</a></li>
{% endif %}
{% if "morph" in visible %}
<li class="nav-item"><a class="nav-link" href="{{url_for("main.tokens_correct_unallowed", corpus_id=corpus.id, allowed_type='morph')}}">Unallowed morph</a></li>
{% endif %}
</ul>
<a class="btn btn-outline-dark" title="Edit values in the control list" href="{{url_for("control_lists_bp.get", control_list_id=corpus.control_lists_id)}}">
<i class="fa fa-cogs"></i> Edit
</a>
{% if corpus.is_owned_by(current_user) or current_user.is_admin() %}
<a class="btn btn-outline-dark" title="Switch for another control list" href="{{url_for("main.control_list_switch", corpus_id=corpus.id)}}">
<i class="fa fa-exchange"></i> Change
</a>
{% endif %}
<a class="btn btn-outline-dark" title="Edit value in the corpus custom dictionary" href="{{url_for("main.corpus_custom_dict", corpus_id=corpus.id)}}">
<i class="fa fa-book"></i> Corpus' Custom Dictionary
</a>
</div>
<a class="btn btn-sm btn-outline-dark" title="Browse editions of the base text" href="{{url_for("main.tokens_edit_history", corpus_id=corpus.id)}}">
<i class="fa fa-calendar-times-o"></i> Text history
</a>
{% if corpus.is_owned_by(current_user) or current_user.is_admin() %}
<a class="btn btn-sm btn-outline-danger float-right" title="Delete the corpus" href="{{url_for("main.corpus_delete", corpus_id=corpus.id)}}">
<i class="fa fa-remove"></i> Delete the corpus (2 steps)
</a>
{% endif %}
</div>
<div class="menu-horizontal-group mx-1">
<a class="btn btn-outline-dark btn-sm" title="Quickly return to a bookmarked token" id="bookmark_link" href="{{ url_for("main.corpus_bookmark", corpus_id=corpus.id) }}">
<i class="fa fa-bookmark"></i> Go to bookmark
</a>
<div class="btn-group btn-group-sm" role="group">
<a class="btn btn-outline-dark title">
Annotations
</a>
<a class="btn btn btn-outline-dark" title="Correct annotations" href="{{ url_for("main.tokens_correct", corpus_id=corpus.id) }}">
<i class="fa fa-pencil"></i> Correct
</a>
<a class="btn btn-outline-dark" title="Search through the corpus and its annotations" id="corpus_{{corpus.id}}_search_tokens" href="{{url_for("main.tokens_search_through_fields", corpus_id=corpus.id)}}">
<i class="fa fa-search"></i> Search
</a>
<a class="btn btn-outline-dark" title="Export annotations" href="{{url_for("main.tokens_export", corpus_id=corpus.id)}}">
<i class="fa fa-download"></i> Export
</a>
<a class="btn btn-outline-dark" title="Browse the annotations' history" href="{{url_for("main.tokens_history", corpus_id=corpus.id)}}">
<i class="fa fa-list"></i> History
</a>
</div>
<div class="btn-group btn-group-sm" role="group">
<a class="btn btn-outline-dark title"><i class="fa fa-pencil"></i> Correct unallowed ...</a>
{% if "lemma" in visible %}
<a class="btn btn-outline-dark" title="Correct annotations with unallowed lemma" href="{{url_for("main.tokens_correct_unallowed", corpus_id=corpus.id, allowed_type='lemma')}}">
lemma
</a>
{% endif %}
{% if "POS" in visible %}
<a class="btn btn-outline-dark" title="Correct annotations with unallowed POS" href="{{url_for("main.tokens_correct_unallowed", corpus_id=corpus.id, allowed_type='POS')}}">
POS
</a>
{% endif %}
{% if "morph" in visible %}
<a class="btn btn-outline-dark" title="Correct annotations with unallowed morphology" href="{{url_for("main.tokens_correct_unallowed", corpus_id=corpus.id, allowed_type='morph')}}">
morphology
</a>
{% endif %}
</div>
</div></div>
</div>
<hr />
</nav>

{% endmacro %}


Expand Down
1 change: 0 additions & 1 deletion app/templates/partials/_head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/noto.css') }}">


<script type="text/javascript" src="{{ url_for('static', filename='js/folding.panel.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/typeahead.js') }}"></script>
Expand Down
2 changes: 1 addition & 1 deletion tests/test_selenium/test_tokens_edit.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ def select_context_around(self, tok_id, max_id=len(WauchierTokens)):
]

def get_history(self):
self.driver_find_element_by_partial_link_text("Editions history").click()
self.driver_find_element_by_css_selector("a[title='Browse editions of the base text']").click()
return [
(
self.element_find_element_by_css_selector(el, ".type").text.strip(),
Expand Down

0 comments on commit 697f72e

Please sign in to comment.