Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Admin theme re-design. #1142

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Admin theme re-design. #1142

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
172cf8e
Admin theme re-design.
xSido Dec 1, 2021
811cc99
Merge pull request #2 from xSido/xSido-design-patch-1
xSido Dec 1, 2021
f8368c0
Centered order, invoice, and support icons in the top right of admin …
BelleNottelling Dec 2, 2021
9830ee8
Merge branch 'boxbilling:master' into master
xSido Dec 4, 2021
9d3218b
Admin theme re-design - fix responsive.
xSido Dec 4, 2021
e666e73
Delete T-71337022308356-2.pdf
xSido Dec 4, 2021
50adfbf
Admin theme re-design - fix stats.
xSido Dec 4, 2021
dcd9361
Merge branch 'boxbilling:master' into master
xSido Dec 4, 2021
068059e
Admin theme re-design - cleanup.
xSido Dec 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11,181 changes: 11,180 additions & 1 deletion src/bb-themes/admin_default/css/min.css
View file
Open in desktop

Large diffs are not rendered by default.

161 changes: 111 additions & 50 deletions src/bb-themes/admin_default/html/layout_default.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,95 +24,156 @@
{% if not admin %}
<script type="text/javascript">$(function(){bb.redirect("{{ 'staff/login'|alink }}");});</script>
{% else %}
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "220px";
document.getElementById("main").style.marginLeft = "220px";
BelleNottelling marked this conversation as resolved.
Show resolved Hide resolved
}

function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
BelleNottelling marked this conversation as resolved.
Show resolved Hide resolved
}
</script>
<script>
function openNav2() {
document.getElementById("mySidebar2").style.width = "200px";
document.getElementById("main2").style.marginRight = "200px";
BelleNottelling marked this conversation as resolved.
Show resolved Hide resolved
}

function closeNav2() {
document.getElementById("mySidebar2").style.width = "0";
document.getElementById("main2").style.marginRight= "0";
BelleNottelling marked this conversation as resolved.
Show resolved Hide resolved
}
</script>
<div id="topNav">
<div class="fixed">
<div class="wrapper">
<div class="welcome">
<a href="{{ 'staff/profile'|alink }}" title=""><img src="{{ profile.email|gravatar }}?size=20" alt="{{ profile.name }}" /></a><span>{% trans 'Hi,' %} {{ profile.name }}!</span>
{% set languages = guest.extension_languages %}
{% if languages|length > 1 %}
<span>
<select name="lang" class="language_selector" style="background-color: #262b2f; color:white;">
{% for lang in languages %}
<option value="{{ lang }}" class="lang_{{ lang }}">{{ lang|trans }}</option>
{% endfor %}
</select>
</span>
{% endif %}
<button class="openbtn" onclick="openNav()">☰ </button>
</div>
<div class="userNav">
<ul>
<li>
<a href="{{ 'staff/profile'|alink }}" title=""><img src="{{ profile.email|gravatar }}?size=20" alt="{{ profile.name }}" /><span>{% trans 'Hi,' %} {{ profile.name }}!</a></span>
{% set languages = guest.extension_languages %}
{% if languages|length > 1 %}
<span>
<select name="lang" class="language_selector" style="background-color: #262b2f; color:white;">
{% for lang in languages %}
<option value="{{ lang }}" class="lang_{{ lang }}">{{ lang|trans }}</option>
{% endfor %}
</select>
</span>
{% endif %}
</li>
<li class="nav-vertical-separator"></li>
{% if admin.system_is_allowed({"mod":"notification"}) and guest.extension_is_on({"mod":"notification"}) %}
{% set count_notifications = admin.notification_get_list({"per_page":1}).total %}
<li class="iMegaphone"><a href="{{ 'notification'|alink }}" title=""><span>{% trans 'Notifications' %}</span></a>{% if count_notifications %}<span class="numberMiddle">{{ count_notifications }}</span>{% endif %}</li>
{% endif %}

{% if admin.system_is_allowed({"mod":"order"}) %}
{% set count_orders = admin.order_get_statuses.failed_setup %}
<li class="iOrders"><a href="{{ 'order'|alink({'status' : 'failed_setup'}) }}" title=""><span><i class="dark-sprite-icon sprite-basket2"></i></span></a>{% if count_orders %}<span class="numberMiddle">{{ count_orders }}</span>{% endif %}</li>
{% endif %}

{% if admin.system_is_allowed({"mod":"invoice"}) %}
{% set count_invoices = admin.invoice_get_statuses.unpaid %}
<li class="iInvoices"><a href="{{ 'invoice'|alink({'status' : 'unpaid'}) }}" title=""><span><i class="dark-sprite-icon sprite-money"></i></span></a>{% if count_invoices %}<span class="numberMiddle">{{ count_invoices }}</span>{% endif %}</li>
{% endif %}

{% if admin.system_is_allowed({"mod":"support"}) %}
{% set count_tickets = admin.support_ticket_get_statuses.open %}
<li class="iMes"><a href="{{ 'support'|alink({'status' : 'open'}) }}" title=""><span><i class="dark-sprite-icon sprite-dialog"></i></span></a>{% if count_tickets %}<span class="numberMiddle">{{ count_tickets }}</span>{% endif %}</li>
{% endif %}
<li class="nav-vertical-separator"></li>
<li class="loading" style="display:none;"><img src="images/loader.gif" alt="" /><span>{% trans 'Loading ...' %}</span></li>
<li class="dd"><span><i class="sprite-topnav sprite-topnav-register" style="margin-right: 5px;"></i>{% trans 'New' %}</span>
{% include "partial_menu_top.phtml" %}
</li>
{% if admin.system_is_allowed({"mod":"system"}) %}
<li class="dd"><span><i class="sprite-topnav sprite-topnav-settings" style="margin-right: 5px;"></i>{% trans 'Settings' %}</span>
<ul class="menu_body">
<li><a href="{{ 'system'|alink }}" title="">{% trans 'All settings' %}</a></li>
<li><a href="{{ 'theme'|alink }}/{{ guest.extension_theme.code }}" title="">{% trans 'Theme settings' %}</a></li>
</ul>
</li>
<li><a href="{{ 'system'|alink }}" title=""><span><i class="sprite-topnav sprite-topnav-settings" style="margin-right: 5px;"></i>{% trans 'Settings' %}</span></a></li>
{% endif %}
<li><a href="{{ '/'|link }}" title="" target="_blank"><span><i class="sprite-topnav sprite-topnav-mainWebsite" style="margin-right: 5px;"></i>{% trans 'Visit site' %}</span></a></li>
<li><a href="{{ 'api/admin/profile/logout'|link }}" title="" class="api-link" data-api-redirect="{{ 'staff/login'|alink }}"><span><i class="sprite-topnav sprite-topnav-logout" style="margin-right: 5px;"></i>{% trans 'Logout' %}</span></a></li>
</ul>
</div>
<div class="userNav2">
<button class="openbtn2" onclick="openNav2()">☰ </button>
</div>
<div class="fix"></div>
</div>
</div>
</div>

<div id="header" class="wrapper">
<div class="logo"><a href="{{ 'system'|alink }}" title=""><img src="{{ company.logo_url }}" alt="{{ company.name }}" style="max-height: 50px;"/></a></div>
<div class="middleNav">

<ul>
<div id="header" class="header">
<div class="logo"><a href="{{ 'index'|alink }}" title=""><img src="{{ company.logo_url }}" alt="{{ company.name }}" style="max-height: 50px;"/></a></div>

<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>

{% if hide_menu %}

{% block content_wide %}{% endblock %}

{% else %}
<li><a href="{{ 'index'|alink }}" title=""><span><i class="dark-sprite-icon sprite-home"></i>{% trans 'Dashboard' %}</span></a></li>
{% block left_top %}{% endblock %}
{% block nav %}{% include "partial_menu.phtml" %}{% endblock %}
{% block left_bottom %}{% endblock %}
</div>

<div id="mySidebar2" class="sidebar2">
<a href="javascript:void(0)" class="closebtn2" onclick="closeNav2()">×</a>
<li>
<a href="{{ 'staff/profile'|alink }}" title=""><img src="{{ profile.email|gravatar }}?size=20" alt="{{ profile.name }}" /><span>{% trans 'Hi,' %} {{ profile.name }}!</a></span>
{% set languages = guest.extension_languages %}
{% if languages|length > 1 %}
<span>
<select name="lang" class="language_selector" style="background-color: #262b2f; color:white;">
{% for lang in languages %}
<option value="{{ lang }}" class="lang_{{ lang }}">{{ lang|trans }}</option>
{% endfor %}
</select>
</span>
{% endif %}
</li>
<ul>
{% if admin.system_is_allowed({"mod":"notification"}) and guest.extension_is_on({"mod":"notification"}) %}
{% set count_notifications = admin.notification_get_list({"per_page":1}).total %}
<li class="iMegaphone"><a href="{{ 'notification'|alink }}" title=""><span>{% trans 'Notifications' %}</span></a>{% if count_notifications %}<span class="numberMiddle">{{ count_notifications }}</span>{% endif %}</li>
{% endif %}

{% if admin.system_is_allowed({"mod":"order"}) %}
{% set count_orders = admin.order_get_statuses.failed_setup %}
<li class="iOrders"><a href="{{ 'order'|alink({'status' : 'failed_setup'}) }}" title=""><span><i class="sprite-23 sprite-23-basket2"></i>{% trans 'Orders' %}</span></a>{% if count_orders %}<span class="numberMiddle">{{ count_orders }}</span>{% endif %}</li>
<li class="iOrders"><a href="{{ 'order'|alink({'status' : 'failed_setup'}) }}" title=""><span><i class="dark-sprite-icon sprite-basket2"></i></span></a>{% if count_orders %}<span class="numberMiddle">{{ count_orders }}</span>{% endif %}</li>
{% endif %}

{% if admin.system_is_allowed({"mod":"invoice"}) %}
{% set count_invoices = admin.invoice_get_statuses.unpaid %}
<li class="iInvoices"><a href="{{ 'invoice'|alink({'status' : 'unpaid'}) }}" title=""><span><i class="sprite-23 sprite-23-money"></i>{% trans 'Invoices' %}</span></a>{% if count_invoices %}<span class="numberMiddle">{{ count_invoices }}</span>{% endif %}</li>
<li class="iInvoices"><a href="{{ 'invoice'|alink({'status' : 'unpaid'}) }}" title=""><span><i class="dark-sprite-icon sprite-money"></i></span></a>{% if count_invoices %}<span class="numberMiddle">{{ count_invoices }}</span>{% endif %}</li>
{% endif %}

{% if admin.system_is_allowed({"mod":"support"}) %}
{% set count_tickets = admin.support_ticket_get_statuses.open %}
{% set count_ptickets = admin.support_public_ticket_get_statuses.open %}
<li class="iSpeech"><a href="{{ 'support/public-tickets'|alink({'status' : 'open'}) }}" title=""><span><i class="sprite-23 sprite-23-speech"></i>{% trans 'Inquiries' %}</span></a>{% if count_ptickets %}<span class="numberMiddle">{{ count_ptickets }}</span>{% endif %}</li>
<li class="iMes"><a href="{{ 'support'|alink({'status' : 'open'}) }}" title=""><span><i class="sprite-23 sprite-23-dialog"></i>{% trans 'Tickets' %}</span></a>{% if count_tickets %}<span class="numberMiddle">{{ count_tickets }}</span>{% endif %}</li>
{% endif %}

{% if admin.system_is_allowed({"mod":"client"}) %}
<li><a href="{{ 'client'|alink }}" title=""><span><i class="sprite-23 sprite-23-user"></i>{% trans 'Clients' %}</span></a></li>
<li class="iMes"><a href="{{ 'support'|alink({'status' : 'open'}) }}" title=""><span><i class="dark-sprite-icon sprite-dialog"></i></span></a>{% if count_tickets %}<span class="numberMiddle">{{ count_tickets }}</span>{% endif %}</li>
{% endif %}

<li><a href="{{ 'index'|alink }}" title=""><span><i class="sprite-23 sprite-23-home"></i>{% trans 'Dashboard' %}</span></a></li>
</ul>
</div>
<li class="loading" style="display:none;"><img src="images/loader.gif" alt="" /><span>{% trans 'Loading ...' %}</span></li>
<li class="dd"><span><i class="sprite-topnav sprite-topnav-register" style="margin-right: 5px;"></i>{% trans 'New' %}</span>
{% include "partial_menu_top.phtml" %}
</li>
{% if admin.system_is_allowed({"mod":"system"}) %}
<li class="sidebar2m" ><a href="{{ 'system'|alink }}" title=""><span><i class="sprite-topnav sprite-topnav-settings" style="margin-right: 5px;"></i>{% trans 'Settings' %}</span></a></li>
{% endif %}
<li><a href="{{ '/'|link }}" title="" target="_blank"><span><i class="sprite-topnav sprite-topnav-mainWebsite" style="margin-right: 5px;"></i>{% trans 'Visit site' %}</span></a></li>
<li><a href="{{ 'api/admin/profile/logout'|link }}" title="" class="api-link" data-api-redirect="{{ 'staff/login'|alink }}"><span><i class="sprite-topnav sprite-topnav-logout" style="margin-right: 5px;"></i>{% trans 'Logout' %}</span></a></li>
</ul>
</div>

<div class="fix"></div>
</div>


<div class="wrapper">

{% if hide_menu %}

{% block content_wide %}{% endblock %}

{% else %}
<div class="leftNav">
{% block left_top %}{% endblock %}
{% block nav %}{% include "partial_menu.phtml" %}{% endblock %}
{% block left_bottom %}{% endblock %}
</div>
<div class="header">

{% block before_content %}{% endblock %}
<div class="content">
Expand All @@ -136,7 +197,7 @@
</div>

<div id="footer">
<div class="wrapper">
<div class="footer">
{% include "partial_footer.phtml" with {'product': product} %}
</div>
</div>
Expand Down
5 changes: 2 additions & 3 deletions src/bb-themes/admin_default/html/layout_login.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,10 @@
<div id="topNav">
<div class="fixed">
<div class="wrapper">
<div class="backTo"><a href="{{ '/'|link }}" title=""><img src="images/icons/topnav/mainWebsite.png" alt="" /><span>{% trans 'Main website' %}</span></a></div>
<div class="userNav">
<div class="userNav3">
<ul>
<li class="loading" style="display:none;"><img src="images/loader.gif" alt="" /><span>{% trans 'Loading ...' %}</span></li>
<li><a href="http://docs.boxbilling.org/{% if help_query %}en/latest/search.html?q={{help_query}}&check_keywords=yes&area=default{% endif %}" title="" target="_blank"><img src="images/icons/topnav/help.png" alt="" /><span>{% trans 'Help' %}</span></a></li>
<div class="backTo"><a href="{{ '/'|link }}" title=""><img src="images/icons/topnav/mainWebsite.png" alt="" /><span>{% trans 'Main website' %}</span></a></div>
</ul>
</div>
<div class="fix"></div>
Expand Down
10 changes: 5 additions & 5 deletions src/bb-themes/admin_default/html/mod_client_index.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,10 @@
{% set count_clients = admin.client_get_statuses %}
<div class="stats">
<ul>
<li><a href="{{ 'client'|alink({'status' : 'active'}) }}" class="count green" title="">{{ count_clients.active }}</a><span>{% trans 'Active' %}</span></li>
<li><a href="{{ 'client'|alink({'status' : 'suspended'}) }}" class="count blue" title="">{{ count_clients.suspended }}</a><span>{% trans 'Suspended' %}</span></li>
<li><a href="{{ 'client'|alink({'status' : 'canceled'}) }}" class="count red" title="">{{ count_clients.canceled }}</a><span>{% trans 'Canceled' %}</span></li>
<li class="last"><a href="{{ 'client'|alink }}" class="count grey" title="">{{count_clients.active + count_clients.canceled + count_clients.suspended}}</a><span>{% trans 'Total' %}</span></li>
<li onclick="location.href='{{ 'client'|alink({'status' : 'active'}) }}';"><a href="{{ 'client'|alink({'status' : 'active'}) }}" class="count green" title="">{{ count_clients.active }}</a><span>{% trans 'Active' %}</span></li>
<li onclick="location.href='{{ 'client'|alink({'status' : 'suspended'}) }}';"><a href="{{ 'client'|alink({'status' : 'suspended'}) }}" class="count blue" title="">{{ count_clients.suspended }}</a><span>{% trans 'Suspended' %}</span></li>
<li onclick="location.href='{{ 'client'|alink({'status' : 'canceled'}) }}';"><a href="{{ 'client'|alink({'status' : 'canceled'}) }}" class="count red" title="">{{ count_clients.canceled }}</a><span>{% trans 'Canceled' %}</span></li>
<li onclick="location.href='{{ 'client'|alink }}';"><a href="{{ 'client'|alink }}" class="count grey" title="">{{count_clients.active + count_clients.canceled + count_clients.suspended}}</a><span>{% trans 'Total' %}</span></li>
</ul>
<div class="fix"></div>
</div>
Expand Down Expand Up @@ -134,7 +134,7 @@
</td>
<td>
<span class="flag flag-{{ client.country }}" title="{{ guest.system_countries[client.country] }}"></span>
<a href="{{ 'client/manage'|alink }}/{{ client.id }}" title="{{ client.first_name }} {{ client.last_name }}">{{ client.first_name|truncate('1', null, '.') }} {{ client.last_name|truncate(15) }}</a></td>
<a href="{{ 'client/manage'|alink }}/{{ client.id }}" title="{{ client.first_name }} {{ client.last_name }}">{{ client.first_name|truncate(15) }} {{ client.last_name|truncate('1', null, '.') }}</a></td>
<td><a href="{{ 'client/manage'|alink }}/{{ client.id }}" title="{{ client.company }}">{{ client.company|default('-')|truncate(30) }}</a></td>
<td><a href="{{ 'client/manage'|alink }}/{{ client.id }}" title="{{ client.email }}">{{ client.email|truncate(30) }}</a></td>
<td>{{ mf.status_name(client.status) }}</td>
Expand Down
2 changes: 1 addition & 1 deletion src/bb-themes/admin_default/html/mod_index_dashboard.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
{% for order in orders.list %}
<tr title="{{order.created_at|timeago}} ago">
<td><a href="{{ 'order/manage'|alink }}/{{ order.id }}">{{ order.title|truncate(35) }}</a></td>
<td align="center"><a href="{{ 'client/manage'|alink }}/{{ order.client_id }}" title="">{{ order.client.first_name|truncate(1, null, '.') }} {{ order.client.last_name }}</a></td>
<td align="center"><a href="{{ 'client/manage'|alink }}/{{ order.client_id }}" title="">{{ order.client.first_name|truncate(15) }} {{ order.client.last_name|truncate(1, null, '.') }}</a></td>
</tr>
{% else %}
<tr>
Expand Down
8 changes: 4 additions & 4 deletions src/bb-themes/admin_default/html/mod_invoice_index.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,10 +98,10 @@
{% set statuses = admin.invoice_get_statuses %}
<div class="stats">
<ul>
<li><a href="{{ 'invoice'|alink({'status' : 'unpaid'}) }}" class="count blue" title="">{{ statuses.unpaid }}</a><span>{% trans 'Unpaid invoices' %}</span></li>
<li><a href="{{ 'invoice'|alink({'status' : 'refunded'}) }}" class="count red" title="">{{ statuses.refunded }}</a><span>{% trans 'Refunded invoices' %}</span></li>
<li><a href="{{ 'invoice'|alink({'status' : 'paid'}) }}" class="count green" title="">{{ statuses.paid }}</a><span>{% trans 'Paid invoices' %}</span></li>
<li class="last"><a href="{{ 'invoice'|alink }}" class="count grey" title="">{{ statuses.paid + statuses.unpaid + statuses.refunded}}</a><span>{% trans 'Total' %}</span></li>
<li onclick="location.href='{{ 'invoice'|alink({'status' : 'unpaid'}) }}';"><a href="{{ 'invoice'|alink({'status' : 'unpaid'}) }}" class="count green" title="">{{ statuses.unpaid }}</a><span>{% trans 'Unpaid invoices' %}</span></li>
<li onclick="location.href='{{ 'invoice'|alink({'status' : 'refunded'}) }}';"><a href="{{ 'invoice'|alink({'status' : 'refunded'}) }}" class="count blue" title="">{{ statuses.refunded }}</a><span>{% trans 'Refunded invoices' %}</span></li>
<li onclick="location.href='{{ 'invoice'|alink({'status' : 'paid'}) }}';"><a href="{{ 'invoice'|alink({'status' : 'paid'}) }}" class="count red" title="">{{ statuses.paid }}</a><span>{% trans 'Paid invoices' %}</span></li>
<li onclick="location.href='{{ 'invoice'|alink }}';"><a href="{{ 'invoice'|alink }}" class="count grey" title="">{{ statuses.paid + statuses.unpaid + statuses.refunded}}</a><span>{% trans 'Total' %}</span></li>
</ul>
<div class="fix"></div>
</div>
Expand Down