Skip to content

Commit b6ea248

Browse files
bkdotcombkdotcom
committed
configurable font size
1 parent a73ee3e commit b6ea248

3 files changed

Lines changed: 50 additions & 9 deletions

File tree

‎src/css/WampClient.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,19 +42,15 @@ body { padding-top:50px; }
4242
}
4343

4444
.alert {
45-
/*
46-
font-size: 11px;
47-
*/
4845
padding: 10px;
4946
margin-bottom: 10px;
5047
border: 1px solid transparent;
51-
/*border-radius: 4px;*/
5248
}
5349
.alert-dismissible { padding-right: 35px; }
5450

55-
.panel-heading { font-size:9px; cursor:pointer; }
51+
.panel-heading { cursor:pointer; }
5652
.panel-heading * { font-size:inherit; }
57-
.panel-heading > i { float: left; }
53+
.panel-heading > i { float:left; }
5854
.panel-heading .label { padding: .1em .6em .2em; }
5955
.panel-heading .http-host { opacity: 0.6; }
6056
.label-default { background-color: rgba(119, 119, 119, 0.3); color: inherit; }

‎src/js/main.js‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ var config = (function($, module) {
5858
// var $currentNode = $('.debug .debug-content');
5959
var configDefault = {
6060
url: "ws://127.0.0.1:9090/",
61-
realm: "debug"
61+
realm: "debug",
62+
"font-size": "1em"
6263
};
6364
var config = getLocalStorageItem('debugConsoleConfig');
6465

@@ -150,6 +151,34 @@ $(function() {
150151
}
151152
*/
152153

154+
function findCssRule(selector) {
155+
var stylesheet = $("#wampClientCss")[0].sheet;
156+
var rules = stylesheet.cssRules;
157+
var len = rules.length;
158+
var i;
159+
var rule;
160+
for (i = 0; i < len; i++) {
161+
rule = rules[i];
162+
if (rule.selectorText == selector) {
163+
return rule;
164+
}
165+
}
166+
// not found -> create
167+
stylesheet.insertRule(selector + ' { }');
168+
return stylesheet.cssRules[0];
169+
}
170+
171+
function updateCssProperty(selector, rule, value) {
172+
var cssRule = findCssRule(selector);
173+
var ruleCamel = rule.replace(/-([a-z])/g, function(matach, p1){
174+
return p1.toUpperCase();
175+
});
176+
cssRule.style[ruleCamel] = value;
177+
}
178+
179+
updateCssProperty(".debug", "font-size", "inherit");
180+
updateCssProperty("#body", "font-size", config.get("font-size"));
181+
153182
events.subscribe('websocket', function(cmd, data) {
154183
// console.warn('rcvd websocket', cmd, JSON.stringify(data));
155184
if (cmd == "msg" && data) {
@@ -216,8 +245,11 @@ $(function() {
216245
$('#modal-settings').on("show.bs.modal", function (e) {
217246
$("#wsUrl").val(config.get("url"));
218247
$("#realm").val(config.get("realm"));
248+
$("#font-size").val(config.get("font-size"));
249+
});
250+
$("#font-size").on("change", function(){
251+
updateCssProperty("#body", "font-size", $("#font-size").val());
219252
});
220-
221253
$('#modal-settings').on("submit", function(e) {
222254
e.preventDefault();
223255
if ($("#wsUrl").val() != config.get("url") || $("#realm").val() != config.get("realm")) {
@@ -231,8 +263,12 @@ $(function() {
231263
events.publish('onmessage', 'connectionClose');
232264
events.publish('onmessage', 'connectionOpen');
233265
}
266+
config.set("font-size", $("#font-size").val());
234267
$(this).modal("hide");
235268
});
269+
$('#modal-settings').on("hide.bs.modal", function (e) {
270+
updateCssProperty("#body", "font-size", config.get("font-size"));
271+
});
236272

237273
$().debugEnhance("addCss");
238274
$("#body").debugEnhance("registerListeners");

‎src/views/index.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
66
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
77
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous" />
8-
<link rel="stylesheet" href="?action=css">
8+
<link id="wampClientCss" rel="stylesheet" href="?action=css">
99
</head>
1010
<body>
1111

@@ -61,6 +61,15 @@ <h4 class="modal-title" id="modal-settings-title">Settings</h4>
6161
</div>
6262
</div>
6363

64+
<hr />
65+
66+
<div class="form-group">
67+
<label for="font-size" class="col-sm-3 control-label">Font-Size</label>
68+
<div class="col-sm-3">
69+
<input type="text" name="realm" id="font-size" class="form-control" />
70+
</div>
71+
</div>
72+
6473
</div>
6574
<div class="modal-footer">
6675
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

0 commit comments

Comments
 (0)