openstack/horizon
Code Issues Proposed changes

Replace the glyphicons with font awesome icons

Browse Source 
There are still some scss mixins that use the old (from bootstrap 2)
image icons. Replacing them will have to be done in a separate patch.

I also link to the css file, instead of scss, because django-pyscss has
some problems finding the right file. This is reported and will have to
be fixed upstream to unbundle bootstrap.

Change-Id: I67e94a9283bcceef8fc89343f3f5b2d7e0d4449f
Partial-implement: blueprint font-icons-replace
This commit is contained in:
Radomir Dopieralski 2014-09-05 15:12:33 +02:00 committed by David Lyle
parent 6c4b1e1ff2
commit d7ad91e8a8
28 changed files with 59 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
horizon/static/horizon/js/horizon.forms.js
View File

@ -155,17 +155,17 @@ horizon.forms.add_password_fields_reveal_buttons = function (el) {
$input.closest('div').addClass("has-feedback");
$('<span>').addClass(
"form-control-feedback glyphicon glyphicon-eye-open"
"form-control-feedback fa fa-eye password-icon"
).insertAfter($input).click(function () {
var $icon = $(this);
if ($input.attr('type') === 'password') {
$icon.removeClass('glyphicon-eye-open');
$icon.addClass('glyphicon-eye-close');
$icon.removeClass('fa-eye');
$icon.addClass('fa-eye-slash');
$input = _change_input_type($input, 'text');
} else {
$icon.removeClass('glyphicon-eye-close');
$icon.addClass('glyphicon-eye-open');
$icon.removeClass('fa-eye-slash');
$icon.addClass('fa-eye');
$input = _change_input_type($input, 'password');
}
});

2
horizon/static/horizon/js/horizon.tables.js
View File

@ -444,7 +444,7 @@ horizon.datatables.set_table_query_filter = function (parent) {
return false;
}
});
input.next('button.btn span.glyphicon-search').on('click keypress', function (evt) {
input.next('button.btn span.search-icon').on('click keypress', function (evt) {
return false;
});

6
horizon/templates/horizon/common/_data_table_cell.html
View File

@ -11,10 +11,10 @@
<div class="inline-edit-actions">
<button class="inline-edit-submit btn btn-primary btn-xs pull-right"
name="action" value="" type="submit">
<span class="glyphicon glyphicon-ok"></span>
<span class="fa fa-check"></span>
</button>
<button class="inline-edit-cancel btn btn-default btn-xs pull-right secondary cancel">
<span class="glyphicon glyphicon-remove"></span>
<span class="fa fa-times"></span>
</button>
</div>
<div class="inline-edit-status inline-edit-mod"></div>
@ -28,7 +28,7 @@
{%if cell.wrap_list %}<ul>{% endif %}{{ cell.value }}{%if cell.wrap_list %}</ul>{% endif %}
</div>
<div class="table_cell_action">
<button class="ajax-inline-edit"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="ajax-inline-edit"><span class="fa fa-pencil"></span></button>
</div>
<div class="inline-edit-status"></div>
</div>

4
horizon/templates/horizon/common/_data_table_row_action_row.html
View File

@ -1,11 +1,11 @@
{% if action.method != "GET" %}
<button {{ action.attr_string|safe }} name="action" value="{{ action.table.name }}__{{ action.name }}__{{ row_id }}" type="submit">
{% if action.icon != None %}<span class="glyphicon glyphicon-{{ action.icon }}"></span> {% endif %}
{% if action.icon != None %}<span class="fa fa-{{ action.icon }}"></span> {% endif %}
{{ action.verbose_name }}
</button>
{% else %}
<a href='{{ action.bound_url }}' title='{{ action.verbose_name }}' {{ action.attr_string|safe }}>
{% if action.icon != None %}<span class="glyphicon glyphicon-{{ action.icon }}"></span> {% endif %}
{% if action.icon != None %}<span class="fa fa-{{ action.icon }}"></span> {% endif %}
{{ action.verbose_name }}
</a>
{% endif %}

4
horizon/templates/horizon/common/_data_table_table_action.html
View File

@ -1,11 +1,11 @@
{% if action.method != "GET" %}
<button {{ action.attr_string|safe }} name="action" value="{{ action.get_param_name }}" type="submit">
{% if action.icon != None %}<span class="glyphicon glyphicon-{{ action.icon }}"></span> {% endif %}
{% if action.icon != None %}<span class="fa fa-{{ action.icon }}"></span> {% endif %}
{% if action.handles_multiple %}{{ action.verbose_name_plural }}{% else %}{{ action.verbose_name }}{% endif %}
</button>
{% else %}
<a href='{{ action.get_link_url }}' title='{{ action.verbose_name }}' {{ action.attr_string|safe }}>
{% if action.icon != None %}<span class="glyphicon glyphicon-{{ action.icon }}"></span> {% endif %}
{% if action.icon != None %}<span class="fa fa-{{ action.icon }}"></span> {% endif %}
{{ action.verbose_name }}
</a>
{% endif %}

2
horizon/templates/horizon/common/_data_table_table_actions.html
View File

@ -11,7 +11,7 @@
<div class="table_search client">
<div class="form-group has-feedback">
<input class="form-control" value="{{ filter.filter_string|default:'' }}" type="text" name="{{ filter.get_param_name }}" />
<span class="glyphicon glyphicon-search form-control-feedback"></span>
<span class="fa fa-search search-icon form-control-feedback"></span>
</div>
<button type="submit" {{ filter.attr_string|safe }}>{% trans "Filter" %}</button>
</div>

6
horizon/templates/horizon/common/_form_field.html
View File

@ -14,7 +14,7 @@
{% if field.help_text %}
<span class="help-icon" data-toggle="tooltip"
data-placement="top" title="{{ field.help_text|safe }}">
<span class="glyphicon glyphicon-question-sign"></span>
<span class="fa fa-question-circle"></span>
</span>
{% endif %}
</label>
@ -28,7 +28,7 @@
{% if field.auto_id %}
<label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}">{{ field.label }}</label>
{% if field.help_text %}
<span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ field.help_text|safe }}"><span class="glyphicon glyphicon-question-sign"></span></span>
<span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ field.help_text|safe }}"><span class="fa fa-question-circle"></span></span>
{% endif %}
{% endif %}
<div class="{{ classes.value }}">
@ -50,7 +50,7 @@
{% if field.auto_id %}
<label class="control-label {{ classes.label }} {% if field.field.required %}{{ form.required_css_class }}{% endif %}" for="{{ field.auto_id }}">{{ field.label }}</label>
{% if field.help_text %}
<span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ field.help_text|safe }}"><span class="glyphicon glyphicon-question-sign"></span></span>
<span class="help-icon" data-toggle="tooltip" data-placement="top" title="{{ field.help_text|safe }}"><span class="fa fa-question-circle"></span></span>
{% endif %}
{% endif %}

14
horizon/templates/horizon/common/_modal_form_update_metadata.html
View File

@ -27,7 +27,7 @@
<input class="form-control input-sm"
type="text" placeholder="{% trans "Filter" %}"
ng-model="treeFilter"/>
<span class="glyphicon glyphicon-search form-control-feedback">
<span class="fa fa-search form-control-feedback">
</span>
</div>
</div>
@ -45,7 +45,7 @@
<a class="btn btn-primary"
ng-click="onCustomItemAdd($event)"
ng-disabled="!customItem.valid">
<span class="glyphicon glyphicon-plus"></span>
<span class="fa fa-plus"></span>
</a>
</span>
</div>
@ -67,15 +67,15 @@
<div class="clearfix">
<div class="pull-left">
<span title="{$ item.label $}" ng-class="{leaf: item.leaf}">
<span class="glyphicon" ng-show="!item.leaf"
ng-class="item.expanded ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'"></span>
<span class="fa" ng-show="!item.leaf"
ng-class="item.expanded ? 'fa-chevron-down' : 'fa-chevron-right'"></span>
{$ item.label $}
</span>
</div>
<div class="pull-right">
<a class="btn btn-primary btn-xs"
ng-click="onItemAdd($event, item)">
<span class="glyphicon glyphicon-plus"></span>
<span class="fa fa-plus"></span>
</a>
</div>
</div>
@ -97,7 +97,7 @@
<input class="form-control input-sm"
type="text" placeholder="{% trans "Filter" %}"
ng-model="listFilter"/>
<span class="glyphicon glyphicon-search form-control-feedback">
<span class="fa fa-search form-control-feedback">
</span>
</div>
</div>
@ -180,7 +180,7 @@
<div class="input-group-btn">
<a class="btn btn-default"
ng-click="onItemDelete($event, item)">
<span class="glyphicon glyphicon-minus"></span>
<span class="fa fa-minus"></span>
</a>
</div>
</div>

4
horizon/templates/horizon/common/_workflow_step_update_members.html
View File

@ -10,7 +10,7 @@
<span class="members_title">{{ step.available_list_title }}</span>
<div class="form-group has-feedback">
<input type="text" name="available_{{ step.slug }}_filter" id="available_{{ step.slug }}" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
<span class="fa fa-search search-icon form-control-feedback"></span>
</div>
</div>
</div>
@ -19,7 +19,7 @@
<span class="members_title">{{ step.members_list_title }}</span>
<div class="form-group has-feedback">
<input type="text" name="{{ step.slug }}_members_filter" id="{{ step.slug }}_members" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
<span class="fa fa-search search-icon form-control-feedback"></span>
</div>
</div>
</div>

2
openstack_dashboard/dashboards/project/access_and_security/floating_ips/tables.py
View File

@ -42,7 +42,7 @@ class AllocateIP(tables.LinkAction):
name = "allocate"
verbose_name = _("Allocate IP To Project")
classes = ("ajax-modal",)
icon = "download-alt"
icon = "download"
url = "horizon:project:access_and_security:floating_ips:allocate"
def single(self, data_table, request, *args):

2
openstack_dashboard/dashboards/project/access_and_security/floating_ips/tests.py
View File

@ -256,7 +256,7 @@ class FloatingIpViewTests(test.TestCase):
"Quota exceeded")
expected_string = ("<a href='%s' title='%s' class='%s disabled' "
"id='floating_ips__action_allocate'>"
"<span class='glyphicon glyphicon-download-alt'>"
"<span class='fa fa-download'>"
"</span>%s</a>"
% (url, link_name, " ".join(classes), link_name))
self.assertContains(res, expected_string, html=True,

2
openstack_dashboard/dashboards/project/access_and_security/tests.py
View File

@ -212,7 +212,7 @@ class SecurityGroupTabTests(test.TestCase):
"Quota exceeded")
expected_string = "<a href='%s' title='%s' class='%s disabled' "\
"id='security_groups__action_create'>" \
"<span class='glyphicon glyphicon-plus'></span>%s</a>" \
"<span class='fa fa-plus'></span>%s</a>" \
% (url, link_name, " ".join(classes), link_name)
self.assertContains(res, expected_string, html=True,
msg_prefix="The create button is not disabled")

6
openstack_dashboard/dashboards/project/data_processing/cluster_templates/templates/data_processing.cluster_templates/cluster_node_groups_template.html
View File

@ -13,8 +13,8 @@
'<span class="input-group input-append">' +
'<input id="count_$id" class="count-field form-control" value="$node_count" type="text" max="4" maxlength="4" name="count_$id" size="4">' +
'<span class="input-group-btn">' +
'<div class="btn btn-default dec-btn" data-count-id="count_$id"><i class="glyphicon-minus"></i></div>' +
'<div class="btn btn-default inc-btn" data-count-id="count_$id"><i class="glyphicon-plus"></i></div>' +
'<div class="btn btn-default dec-btn" data-count-id="count_$id"><i class="fa fa-minus"></i></div>' +
'<div class="btn btn-default inc-btn" data-count-id="count_$id"><i class="fa fa-plus"></i></div>' +
'</span>' +
'</span>' +
'</td>' +
@ -103,7 +103,7 @@
</select>
<span class="input-group-btn">
<button type="button" id="add_group_button" class="btn btn-default disabled" onclick="add_node_group_template(1);">
<span class="glyphicon glyphicon-plus"></span>
<span class="fa fa-plus"></span>
</button>
</span>
</span>

2
openstack_dashboard/dashboards/project/data_processing/data_image_registry/templates/data_processing.data_image_registry/_tag_form.html
View File

@ -82,7 +82,7 @@
var tags = get_current_tags();
if ($.inArray(tag, tags) == -1) {
var span = ' <span class="label label-warning" style="float: left;display: block; margin: 2px;">$tag <i class="glyphicon glyphicon-remove" onclick="remove_tag(this);"></i></span>'.replace("$tag", tag)
var span = ' <span class="label label-warning" style="float: left;display: block; margin: 2px;">$tag <i class="fa fa-close" onclick="remove_tag(this);"></i></span>'.replace("$tag", tag)
$("#image_tags_list").append(span);
update_image_tags();
}

4
openstack_dashboard/dashboards/project/data_processing/data_image_registry/templates/data_processing.data_image_registry/image_registry.html
View File

@ -19,10 +19,10 @@
$.each(tags, function(i, tag) {
var tagspan = '<span class="label label-info" style="float: left;display: block; margin: 2px;">' +
tag +
'<i class="glyphicon glyphicon-remove" onclick="remove_tag(this);"></i></span>';
'<i class="fa fa-close" onclick="remove_tag(this);"></i></span>';
$("#image_tags_list").append(tagspan);
});
});
});
</script>
{% endblock %}
{% endblock %}

2
openstack_dashboard/dashboards/project/instances/tests.py
View File

@ -3065,7 +3065,7 @@ class InstanceTests(helpers.TestCase):
data-update-url=
"/project/instances/?action=launch&amp;table=instances"
id="instances__action_launch">
<span class="glyphicon glyphicon-cloud-upload"></span>%s</a>
<span class="fa fa-cloud-upload"></span>%s</a>
''' % (url, link_name, " ".join(classes), link_name), res._charset)
self.assertContains(res, expected_string, html=True,

6
openstack_dashboard/dashboards/project/network_topology/templates/network_topology/index.html
View File

@ -25,13 +25,13 @@
<div class="launchButtons">
{% if launch_instance_allowed %}
<a href="{% url 'horizon:project:network_topology:launchinstance' %}" id="instances__action_launch" class="btn btn-default btn-sm btn-launch ajax-modal {% if instance_quota_exceeded %}disabled{% endif %}"><span class="glyphicon glyphicon-cloud-upload"></span> {% if instance_quota_exceeded %}{% trans "Launch Instance (Quota exceeded)"%}{% else %}{% trans "Launch Instance"%}{% endif %}</a>
<a href="{% url 'horizon:project:network_topology:launchinstance' %}" id="instances__action_launch" class="btn btn-default btn-sm btn-launch ajax-modal {% if instance_quota_exceeded %}disabled{% endif %}"><span class="fa fa-cloud-upload"></span> {% if instance_quota_exceeded %}{% trans "Launch Instance (Quota exceeded)"%}{% else %}{% trans "Launch Instance"%}{% endif %}</a>
{% endif %}
{% if create_network_allowed %}
<a href="{% url 'horizon:project:network_topology:createnetwork' %}" id="networks__action_create" class="btn btn-default btn-sm ajax-modal {% if network_quota_exceeded %}disabled{% endif %}"><span class="glyphicon glyphicon-plus"></span> {% if network_quota_exceeded %}{% trans "Create Network (Quota exceeded)"%}{% else %}{% trans "Create Network"%}{% endif %}</a>
<a href="{% url 'horizon:project:network_topology:createnetwork' %}" id="networks__action_create" class="btn btn-default btn-sm ajax-modal {% if network_quota_exceeded %}disabled{% endif %}"><span class="fa fa-plus"></span> {% if network_quota_exceeded %}{% trans "Create Network (Quota exceeded)"%}{% else %}{% trans "Create Network"%}{% endif %}</a>
{% endif %}
{% if create_router_allowed %}
<a href="{% url 'horizon:project:network_topology:createrouter' %}" id="Routers__action_create" class="btn btn-default btn-sm ajax-modal {% if router_quota_exceeded %}disabled{% endif %}"><span class="glyphicon glyphicon-plus"></span> {% if router_quota_exceeded %}{% trans "Create Router (Quota exceeded)"%}{% else %}{% trans "Create Router"%}{% endif %}</a>
<a href="{% url 'horizon:project:network_topology:createrouter' %}" id="Routers__action_create" class="btn btn-default btn-sm ajax-modal {% if router_quota_exceeded %}disabled{% endif %}"><span class="fa fa-plus"></span> {% if router_quota_exceeded %}{% trans "Create Router (Quota exceeded)"%}{% else %}{% trans "Create Router"%}{% endif %}</a>
{% endif %}
</div>
</div>

6
openstack_dashboard/dashboards/project/network_topology/tests.py
View File

@ -180,7 +180,7 @@ class NetworkTopologyCreateTests(test.TestCase):
link_name = "Create Network (Quota exceeded)"
expected_string = "<a href='%s' class='%s disabled' "\
"id='networks__action_create'>" \
"<span class='glyphicon glyphicon-plus'></span>%s</a>" \
"<span class='fa fa-plus'></span>%s</a>" \
% (url, classes, link_name)
self._test_new_button_disabled_when_quota_exceeded(
@ -193,7 +193,7 @@ class NetworkTopologyCreateTests(test.TestCase):
link_name = "Create Router (Quota exceeded)"
expected_string = "<a href='%s' class='%s disabled' "\
"id='Routers__action_create'>" \
"<span class='glyphicon glyphicon-plus'></span>%s</a>" \
"<span class='fa fa-plus'></span>%s</a>" \
% (url, classes, link_name)
self._test_new_button_disabled_when_quota_exceeded(
@ -206,7 +206,7 @@ class NetworkTopologyCreateTests(test.TestCase):
link_name = "Launch Instance (Quota exceeded)"
expected_string = "<a href='%s' class='%s disabled' "\
"id='instances__action_launch'>" \
"<span class='glyphicon glyphicon-cloud-upload'></span>%s</a>" \
"<span class='fa fa-cloud-upload'></span>%s</a>" \
% (url, classes, link_name)
self._test_new_button_disabled_when_quota_exceeded(

4
openstack_dashboard/dashboards/project/networks/tests.py
View File

@ -1835,7 +1835,7 @@ class NetworkViewTests(test.TestCase):
"Quota exceeded")
expected_string = "<a href='%s' title='%s' class='%s disabled' "\
"id='networks__action_create'>" \
"<span class='glyphicon glyphicon-plus'></span>%s</a>" \
"<span class='fa fa-plus'></span>%s</a>" \
% (url, link_name, " ".join(classes), link_name)
self._test_create_button_disabled_when_quota_exceeded(expected_string,
@ -1905,7 +1905,7 @@ class NetworkViewTests(test.TestCase):
"Quota exceeded")
expected_string = "<a href='%s' title='%s' class='%s disabled' "\
"id='subnets__action_create'>" \
"<span class='glyphicon glyphicon-plus'></span>%s</a>" \
"<span class='fa fa-plus'></span>%s</a>" \
% (url, link_name, " ".join(classes), link_name)
self.assertContains(res, expected_string, html=True,
msg_prefix="The create button is not disabled")

4
openstack_dashboard/dashboards/project/routers/templates/routers/extensions/routerrules/grid.html
View File

@ -15,7 +15,7 @@
{% csrf_token %}
<input type="hidden" name="router_id" value="{{ router.id }}"/>
<button class="btn btn-sm btn-danger"
type="submit" href="#" name="action" value="routerrules__resetrules"><span class="glyphicon glyphicon-remove"> {% trans "Reset to Default" %}</button>
type="submit" href="#" name="action" value="routerrules__resetrules"><span class="fa fa-close"> {% trans "Reset to Default" %}</button>
</form>
</div>
</th>
@ -86,7 +86,7 @@
{% endif %}
</center>
{% else %}
<center><a type="button" class="btn btn-default btn-xs" href="#modal_{{ dest.subnetid|add:row.source.subnetid }}" data-toggle="modal"><span class="glyphicon glyphicon-exclamation-sign"></span> Conflict</a></center>
<center><a type="button" class="btn btn-default btn-xs" href="#modal_{{ dest.subnetid|add:row.source.subnetid }}" data-toggle="modal"><span class="fa fa-exclamation-circle"></span> Conflict</a></center>
<div class="modal hide" id="modal_{{ dest.subnetid|add:row.source.subnetid }}">
<div class="modal-header">
<a class="close" data-dismiss="modal">&times;</a>

2
openstack_dashboard/dashboards/project/routers/tests.py
View File

@ -834,7 +834,7 @@ class RouterViewTests(RouterMixin, test.TestCase):
"Quota exceeded")
expected_string = "<a href='%s' title='%s' class='%s disabled' "\
"id='Routers__action_create'>" \
"<span class='glyphicon glyphicon-plus'></span>%s</a>" \
"<span class='fa fa-plus'></span>%s</a>" \
% (url, link_name, " ".join(classes), link_name)
self.assertContains(res, expected_string, html=True,
msg_prefix="The create button is not disabled")

2
openstack_dashboard/dashboards/project/volumes/volumes/tests.py
View File

@ -1025,7 +1025,7 @@ class VolumeViewTests(test.TestCase):
expected_string = "<a href='%s' title='%s' class='%s disabled' "\
"id='volumes__action_create' data-update-url=" \
"'/project/volumes/?action=create&amp;table=volumes'> "\
"<span class='glyphicon glyphicon-plus'></span>%s</a>" \
"<span class='fa fa-plus'></span>%s</a>" \
% (url, link_name, " ".join(classes), link_name)
self.assertContains(res, expected_string, html=True,
msg_prefix="The create button is not disabled")

8
openstack_dashboard/static/dashboard/scss/horizon.scss
View File

@ -552,7 +552,7 @@ table form {
a, button {
margin-left: 0px;
padding-left: 22px;
.glyphicon {
.fa {
margin-left: -14px;
}
}
@ -1449,7 +1449,7 @@ label.log-length {
line-height: 30px;
width: 160px;
}
input[type="text"]:disabled + span.glyphicon-search {
input[type="text"]:disabled + span.search-icon {
color: $gray-light;
}
.fake_table_header {
@ -2113,6 +2113,10 @@ a.link-popover { cursor: default; }
a:hover.link-popover { text-decoration: none; }
/* Fix for password fields reveal icon */
.form-group span.form-control-feedback.fa {
line-height: 32px;
}
.has-feedback .form-control-feedback {
top: 0;
}

2
openstack_dashboard/templates/_header.html
View File

@ -16,7 +16,7 @@
{% show_region_list %}
</div>
<div class="footer">
<span class="glyphicon glyphicon-cog"></span>
<span class="fa fa-cog"></span>
<a href="{% url 'horizon:identity:projects:index' %}">{% trans "More Projects" %}</a>
</div>
</div><!-- end of dropdown-menu -->

2
openstack_dashboard/templates/context_selection/_domain_list.html
View File

@ -5,7 +5,7 @@
<li>
<a class="disabled">
{{ domain_name }}
<span class="glyphicon glyphicon-ok"></span>
<span class="fa fa-check"></span>
</a>
</li>
</ul>

2
openstack_dashboard/templates/context_selection/_overview.html
View File

@ -1,4 +1,4 @@
<span class="glyphicon glyphicon-list-alt"></span>
<span class="fa fa-list-alt"></span>
<span class="context-overview">
{% if domain_supported %}
<span>{{ domain_name }}</span>

2
openstack_dashboard/templates/context_selection/_project_list.html
View File

@ -9,7 +9,7 @@
<a href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}">
{{ project.name }}
{% if project.enabled and project.id == project_id %}
<span class="glyphicon glyphicon-ok"></span>
<span class="fa fa-check"></span>
{% endif %}
</a>
</li>

2
openstack_dashboard/templates/context_selection/_region_list.html
View File

@ -10,7 +10,7 @@
<a href="{% url 'switch_services_region' region %}?next={{ panel_url }}">
{{ region }}
{% if region == region_name %}
<span class="glyphicon glyphicon-ok"></span>
<span class="fa fa-check"></span>
{% endif %}
</a>
</li>