Replace the glyphicons with font awesome icons

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

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');
}
});

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;
});

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>

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 %}

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 %}

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>

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 %}

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>

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>

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):

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,

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")

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>

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();
}

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 %}

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,

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>

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(

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")

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>

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")

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")

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;
}

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 -->

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>

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>

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>

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>