mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-04 13:41:38 -04:00
Improve display of folder path when deeply nested
It’s a bit rudimentary to only show the current place in the hierarchy and the parent. You lose a sense of how deep you are. But we can’t just show the full path, because it can be arbitrarily long. So what this commit does is show the full path, but truncates the display of any items. Further-up than the current folder or its parent. This also helps disambiguate between folders and templates, because folders are always shown with the folder icon. This probably won’t affect many teams, because we don’t anticipate a lot of deep nesting.
This commit is contained in:
Chris Hill-Scott
BIN
app/assets/images/folder-black-bold.png
Normal file
BIN
app/assets/images/folder-black-bold.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
11
app/assets/images/folder-black-bold.svg
Normal file
11
app/assets/images/folder-black-bold.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 26 20" style="enable-background:new 0 0 26 20;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#DEE0E2;}
|
||||
.st1{fill:#0B0C0C;}
|
||||
</style>
|
||||
<path class="st0" d="M1.2,18.8V1.3h8.4l1.5,4h13.7v13.5H1.2z"/>
|
||||
<path class="st1" d="M8.8,2.5l0.9,2.4l0.6,1.6h13.2v11h-21v-15H8.8 M10.5,0H0v20h26V4H12L10.5,0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 588 B |
BIN
app/assets/images/folder-blue-bold-hover.png
Normal file
BIN
app/assets/images/folder-blue-bold-hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
11
app/assets/images/folder-blue-bold-hover.svg
Normal file
11
app/assets/images/folder-blue-bold-hover.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 26 20" style="enable-background:new 0 0 26 20;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#DEE0E2;}
|
||||
.st1{fill:#2B8CC4;}
|
||||
</style>
|
||||
<path class="st0" d="M1.2,18.8V1.3h8.4l1.5,4h13.7v13.5H1.2z"/>
|
||||
<path class="st1" d="M8.8,2.5l0.9,2.4l0.6,1.6h13.2v11h-21v-15H8.8 M10.5,0H0v20h26V4H12L10.5,0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 588 B |
@@ -5,10 +5,13 @@
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
margin-bottom: -$gutter;
|
||||
padding-bottom: $gutter;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-colour;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
// Use box shadow instead of outline to avoid buggy outline
|
||||
@@ -86,23 +89,35 @@
|
||||
|
||||
&-folder {
|
||||
|
||||
a:first-child {
|
||||
display: inline-block;
|
||||
padding-left: 40px;
|
||||
background-image: file-url('folder-blue-bold.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 20px;
|
||||
background-position: 0px 2px;
|
||||
|
||||
display: inline-block;
|
||||
text-indent: 40px;
|
||||
background-image: file-url('folder-blue-bold.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 20px;
|
||||
background-position: 0px 2px;
|
||||
@include ie-lte(8) {
|
||||
background-image: file-url('folder-blue-bold.png');
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
background-image: file-url('folder-blue-bold-hover.svg');
|
||||
|
||||
@include ie-lte(8) {
|
||||
background-image: file-url('folder-blue-bold.png');
|
||||
background-image: file-url('folder-blue-bold-hover.png');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-template {
|
||||
a {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&-empty {
|
||||
color: $secondary-text-colour;
|
||||
padding: $gutter-half 0 $gutter-one-third 0;
|
||||
@@ -139,31 +154,60 @@
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 5px 0 0 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 38px auto;
|
||||
background-position: 0 1px;
|
||||
background-size: auto 20px;
|
||||
background-position: 0px 2px;
|
||||
min-height: 30px;
|
||||
|
||||
}
|
||||
|
||||
&-folder {
|
||||
|
||||
padding: 0 0 0 40px;
|
||||
background-image: file-url('folder-black-bold.svg');
|
||||
|
||||
@include ie-lte(8) {
|
||||
background-image: file-url('folder-black-bold.png');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-folder-truncated {
|
||||
width: 0;
|
||||
padding: 0 0 0 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-folder-root-truncated {
|
||||
max-width: 1.4em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
padding-top: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
&.folder-heading-folder {
|
||||
|
||||
padding: 5px 0 0 60px;
|
||||
background-image: file-url('folder-blue.svg');
|
||||
background-image: file-url('folder-blue-bold.svg');
|
||||
max-width: 33%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@include ie-lte(8) {
|
||||
background-image: file-url('folder-blue.png');
|
||||
background-image: file-url('folder-blue-bold.png');
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: file-url('folder-blue-bold-hover.svg');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-colour;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -173,7 +217,7 @@
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: $secondary-text-colour;
|
||||
padding: 5px 4px 0 5px;
|
||||
padding: 0 4px 0 5px;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
@@ -181,7 +225,7 @@
|
||||
&-manage-link {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding: ($gutter - 2px) 0 0 0;
|
||||
padding: ($gutter - 7px) 0 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -377,14 +377,12 @@ class Service():
|
||||
if folder['id'] is None:
|
||||
return [folder]
|
||||
|
||||
return [
|
||||
self.get_template_folder(folder['parent_id']),
|
||||
folder,
|
||||
return self.get_template_folder_path(folder['parent_id']) + [
|
||||
self.get_template_folder(folder['id'])
|
||||
]
|
||||
|
||||
def get_template_path(self, template):
|
||||
return [
|
||||
self.get_template_folder(template['folder']),
|
||||
return self.get_template_folder_path(template['folder']) + [
|
||||
template,
|
||||
]
|
||||
|
||||
|
||||
@@ -14,13 +14,18 @@
|
||||
<h1 class="heading-medium folder-heading">
|
||||
{% for folder in folders %}
|
||||
{% if loop.last and not link_current_item %}
|
||||
<span class="folder-heading-folder">{{ folder.name }}</span>
|
||||
{% if folder.template_type or not folder.id %}
|
||||
<span class="folder-heading-template">{{ folder.name }}</span>
|
||||
{% else %}
|
||||
<span class="folder-heading-folder">{{ folder.name }}</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if folder.id %}
|
||||
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type, template_folder_id=folder.id) }}" class="folder-heading-folder">{{ folder.name }}</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
|
||||
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type, template_folder_id=folder.id) }}" class="folder-heading-folder {% if loop.index < (loop.length - 1) %}folder-heading-folder-truncated{% endif %}" title="{{ folder.name }}">{{ folder.name }}</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type) }}">Templates</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
|
||||
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type) }}" class="{% if loop.length > 2 %}folder-heading-folder-root-truncated{% endif %}">Templates</a>
|
||||
{% endif %}
|
||||
{% if not loop.last %}{{ folder_path_separator() }}{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</h1>
|
||||
|
||||
@@ -21,18 +21,18 @@
|
||||
value=item.id,
|
||||
) }}
|
||||
{% endif %}
|
||||
<h2 class="message-name {% if item.is_folder or (item.ancestors and not item.is_folder) %}template-list-folder{% endif %}">
|
||||
<h2 class="message-name">
|
||||
{% for ancestor in item.ancestors %}
|
||||
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}">
|
||||
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="template-list-folder">
|
||||
{{ ancestor.name }}
|
||||
</a> <span class="message-name-separator">/</span>
|
||||
{% endfor %}
|
||||
{% if item.is_folder %}
|
||||
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}">
|
||||
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="template-list-folder">
|
||||
<span class="live-search-relevant">{{ item.name }}</span>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}">
|
||||
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="template-list-template">
|
||||
<span class="live-search-relevant">{{ item.name }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user