Browse Source

Improved Font Dropdown based on suggestions. Now I'm happy with how it looks! Probably could get few things slighlty improved, but I'm nitpicking

dev/git-series/gccdum
Rubén Rincón 6 years ago
parent
commit
78f666f358
  1. 17
      static/explorer.css
  2. 43
      static/fontscale.js
  3. 7
      views/font-size.pug

17
static/explorer.css

@ -103,6 +103,7 @@ input.options {
.highlighted {
background-color: rgba(255, 0, 0, 0.2);
color: #0000b0;
font-weight: bold;
}
@ -154,3 +155,19 @@ pre.content {
width: 5px !important;
left: 3px;
}
.font-option {
background: white;
}
.font-option:hover {
background: lightblue;
}
.font-option-active {
background: #226699!important;
}
.font-option-active:hover {
background: #4477AA!important;
}

43
static/fontscale.js

@ -28,14 +28,30 @@ define(function (require) {
var _ = require('underscore');
var EventEmitter = require('events');
function FontSizeDropdown(elem, interval, scale, isFontStr) {
elem.empty();
var factor = isFontStr ? 10 : 14;
for (var i = interval[0]; i <= interval[1]; i += 0.1) {
elem.append($('<option value="' + i + '">' + Math.round(i * factor * 2) / 2 + "</option>"));
function makeFontSizeDropdown(elem, interval, obj) {
var factor = obj.isFontOfStr ? 10 : 14;
var step = 0.05;
var found = false;
for (var i = interval[0]; i <= interval[1]; i += step) {
step *= 1.2;
var newElementStr = '<li data-value="' + i + '" class="font-option';
if (!found && (i === obj.scale || Math.floor(i) == obj.scale)) {
found = true;
newElementStr += ' font-option-active';
}
newElementStr += '">' + Math.round(i * factor) + '</li>';
elem.append($(newElementStr).click(function() {
// Toggle off the selection of the others
elem.children().removeClass('font-option-active');
// Toggle us on
$(this).addClass("font-option-active");
// Send the data
obj.scale = $(this).data("value");
obj.apply();
obj.emit('change');
})
);
}
elem.val(scale);
return elem;
}
function FontScale(domRoot, state, fontSelectorOrEditor) {
@ -43,22 +59,15 @@ define(function (require) {
this.domRoot = domRoot;
this.scale = state.fontScale || 1.0;
this.fontSelectorOrEditor = fontSelectorOrEditor;
this.isFontOfStr = typeof(this.fontSelectorOrEditor) === "string";
this.apply();
this.dropDown = FontSizeDropdown(this.domRoot.find('.change-font-size'), [0.3, 3], this.scale,
typeof(this.fontSelectorOrEditor) === "string");
this.dropDown.change(_.bind(function () {
this.scale = this.dropDown.val();
this.apply();
this.emit('change');
}, this));
makeFontSizeDropdown(this.domRoot.find('.font-size-list'), [0.3, 3], this);
}
_.extend(FontScale.prototype, EventEmitter.prototype);
FontScale.prototype.apply = function () {
if (typeof(this.fontSelectorOrEditor) === "string") {
if (this.isFontOfStr) {
this.domRoot.find(this.fontSelectorOrEditor).css('font-size', (10 * this.scale) + "pt");
} else {
this.fontSelectorOrEditor.updateOptions({

7
views/font-size.pug

@ -1,2 +1,5 @@
.btn-group.btn-group-sm
select.btn.btn-default.btn-sm.change-font-size(title="Change font size")
.btn-group.btn-group-sm.dropdown
button.btn.btn-default.btn-sm(title="Change font size", data-toggle="dropdown")
span.glyphicon.glyphicon-sm.glyphicon-font
span.caret
ul.dropdown-menu.font-size-list

Loading…
Cancel
Save