1
0
Fork 0

web ui: css, validation bug, graph view optimized

This commit is contained in:
hkernbach 2015-08-28 14:50:40 +02:00
parent dfa749ecbc
commit 5c9bab6802
6 changed files with 89 additions and 17 deletions

View File

@ -60,6 +60,7 @@
"frontend/js/lib/jquery.hotkeys.js",
"frontend/js/lib/jquery.form.js",
"frontend/js/lib/jquery.uploadfile.js",
"frontend/js/lib/jquery.textfill.min.js",
"frontend/js/lib/select2.min.js",
"frontend/js/lib/handlebars-1.0.rc.1.js",
"frontend/js/lib/jsoneditor-min.js",

View File

@ -101,12 +101,13 @@ function NodeShaper(parent, flags, idfunc) {
chunks[0] = $.trim(chunks[0]);
chunks[1] = $.trim(chunks[1]);
if (chunks[0].length > 12) {
chunks[0] = $.trim(label.substring(0,10)) + "-";
//chunks[0] = $.trim(label.substring(0,10)) + "-";
chunks[0] = $.trim(label.substring(0,10));
chunks[1] = $.trim(label.substring(10));
if (chunks[1].length > 12) {
chunks[1] = chunks[1].split(/\W/)[0];
if (chunks[1].length > 12) {
chunks[1] = chunks[1].substring(0,10) + "...";
if (chunks[1].length > 2) {
chunks[1] = chunks[1].substring(0,5) + "...";
}
}
chunks.length = 2;
@ -338,6 +339,25 @@ function NodeShaper(parent, flags, idfunc) {
}
},
adjustLabelFontSize = function (nodes) {
var texts = [], childText = '';
_.each(nodes, function(node) {
texts = $(node).find('text');
$(node).css("width", "90px");
$(node).css("height", "36px");
$(node).textfill({
innerTag: 'text',
maxFontPixels: 16,
minFontPixels: 10,
explicitWidth: 90,
explicitHeight: 36,
});
});
},
parseLabelFlag = function (label) {
if (_.isFunction(label)) {
addLabel = function (node) {
@ -347,17 +367,28 @@ function NodeShaper(parent, flags, idfunc) {
.attr("stroke", "none"); // Make it readable
textN.each(function(d) {
var chunks = splitLabel(label(d));
var title = chunks[0];
if (chunks.length === 2) {
title = title + chunks[1];
}
if (title.length > 15) {
title = title.substring(0, 13) + "...";
}
if (title === undefined || title === '') {
title = "ATTR NOT SET";
}
d3.select(this).append("tspan")
.attr("x", "0")
.attr("dy", "5")
.text(chunks[0]);
if (chunks.length === 2) {
.text(title);
/*if (chunks.length === 2) {
d3.select(this).append("tspan")
.attr("x", "0")
.attr("dy", "16")
.text(chunks[1]);
}
}*/
});
adjustLabelFontSize(node);
};
} else {
addLabel = function (node) {
@ -367,17 +398,28 @@ function NodeShaper(parent, flags, idfunc) {
.attr("stroke", "none"); // Make it readable
textN.each(function(d) {
var chunks = splitLabel(findFirstValue(label, d._data));
var title = chunks[0];
if (chunks.length === 2) {
title = title + chunks[1];
}
if (title.length > 15) {
title = title.substring(0, 13) + "...";
}
if (title === undefined || title === '') {
title = "ATTR NOT SET";
}
d3.select(this).append("tspan")
.attr("x", "0")
.attr("dy", "5")
.text(chunks[0]);
if (chunks.length === 2) {
.text(title);
/*if (chunks.length === 2) {
d3.select(this).append("tspan")
.attr("x", "0")
.attr("dy", "16")
.text(chunks[1]);
}
}*/
});
adjustLabelFontSize(node);
};
}
},

View File

@ -0,0 +1,20 @@
/*
textfill
@name jquery.textfill.js
@author Russ Painter
@author Yu-Jie Lin
@author Alexandre Dantas
@version 0.6.0
@date 2014-08-19
@copyright (c) 2014 Alexandre Dantas
@copyright (c) 2012-2013 Yu-Jie Lin
@copyright (c) 2009 Russ Painter
@license MIT License
@homepage https://github.com/jquery-textfill/jquery-textfill
@example http://jquery-textfill.github.io/jquery-textfill/index.html
*/
(function(m){m.fn.textfill=function(r){function f(){a.debug&&"undefined"!=typeof console&&"undefined"!=typeof console.debug&&console.debug.apply(console,arguments)}function s(){"undefined"!=typeof console&&"undefined"!=typeof console.warn&&console.warn.apply(console,arguments)}function p(a,b,e,k,n,g){function d(a,b){var c=" / ";a>b?c=" > ":a==b&&(c=" = ");return c}f("[TextFill] "+a+" { font-size: "+b.css("font-size")+",Height: "+b.height()+"px "+d(b.height(),e)+e+"px,Width: "+b.width()+d(b.width(),
k)+k+",minFontPixels: "+n+"px, maxFontPixels: "+g+"px }")}function q(a,b,e,k,f,g,d,h){for(p(a,b,f,g,d,h);d<h-1;){var l=Math.floor((d+h)/2);b.css("font-size",l);if(e.call(b)<=k){if(d=l,e.call(b)==k)break}else h=l;p(a,b,f,g,d,h)}b.css("font-size",h);e.call(b)<=k&&(d=h,p(a+"* ",b,f,g,d,h));return d}var a=m.extend({debug:!1,maxFontPixels:40,minFontPixels:4,innerTag:"span",widthOnly:!1,success:null,callback:null,fail:null,complete:null,explicitWidth:null,explicitHeight:null,changeLineHeight:!1},r);f("[TextFill] Start Debug");
this.each(function(){var c=m(a.innerTag+":visible:first",this),b=a.explicitHeight||m(this).height(),e=a.explicitWidth||m(this).width(),k=c.css("font-size"),n=parseFloat(c.css("line-height"))/parseFloat(k);f("[TextFill] Inner text: "+c.text());f("[TextFill] All options: ",a);f("[TextFill] Maximum sizes: { Height: "+b+"px, Width: "+e+"px }");var g=a.minFontPixels,d=0>=a.maxFontPixels?b:a.maxFontPixels,h=void 0;a.widthOnly||(h=q("Height",c,m.fn.height,b,b,e,g,d));var l=void 0,l=q("Width",c,m.fn.width,
e,b,e,g,d);a.widthOnly?(c.css({"font-size":l,"white-space":"nowrap"}),a.changeLineHeight&&c.parent().css("line-height",n*l+"px")):(g=Math.min(h,l),c.css("font-size",g),a.changeLineHeight&&c.parent().css("line-height",n*g+"px"));f("[TextFill] Finished { Old font-size: "+k+", New font-size: "+c.css("font-size")+" }");c.width()>e||c.height()>b&&!a.widthOnly?(c.css("font-size",k),a.fail&&a.fail(this),f("[TextFill] Failure { Current Width: "+c.width()+", Maximum Width: "+e+", Current Height: "+c.height()+
", Maximum Height: "+b+" }")):a.success?a.success(this):a.callback&&(s("callback is deprecated, use success, instead"),a.callback(this))});a.complete&&a.complete(this);f("[TextFill] End Debug");return this}})(window.jQuery);

View File

@ -102,7 +102,7 @@
<div class="modal-body">
<table>
<tbody>
<tr class="tableRow" id="row_new-query-name">
<tr class="tableRow">
<th class="collectionTh">Format:</th>
<th class="collectionTh" colspan="2">
<p>JSON documents embedded into a list:</p>
@ -113,7 +113,7 @@
<p>}]</p>
</th>
</tr>
<tr class="tableRow" id="row_new-query-name">
<tr class="tableRow">
<th class="collectionTh">File:</th>
<th class="collectionTh" colspan="2">
<input id="importQueries" name="importQueries" type="file" style="border: 0" />

View File

@ -534,7 +534,10 @@
'is optional: leave empty for autogenerated key',
false,
[
{/*optional validation rules for joi*/}
{
rule: Joi.string().allow('').optional(),
msg: ""
}
]
)
);
@ -562,7 +565,10 @@
'is optional: leave empty for autogenerated key',
false,
[
{/*optional validation rules for joi*/}
{
rule: Joi.string().allow('').optional(),
msg: ""
}
]
)
);
@ -601,7 +607,7 @@
}
//Error
else {
arangoHelper.arangoError('Creating edge failed');
arangoHelper.arangoError('Edge error', 'Creation failed.');
}
},
@ -621,7 +627,7 @@
window.location.hash = "collection/" + result;
}
else {
arangoHelper.arangoError('Creating document failed');
arangoHelper.arangoError('Document error', 'Creation failed.');
}
},

View File

@ -72,7 +72,7 @@ svg.graph-viewer {
z-index: 0;
text {
font-size: 16px;
max-width: 90px;
pointer-events: none;
}
}
@ -94,7 +94,7 @@ div.gv-colour-list {
border-radius: 3px;
max-height: 350px;
max-width: 130px;
overflow-x: none;
overflow-x: none !important;
overflow-y: auto;
position: absolute;
right: 8px;
@ -105,6 +105,9 @@ div.gv-colour-list {
li {
float: none;
padding: 2px 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul {