r/hugvey
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Interface changes for better usability

Browse source
This commit is contained in:
Ruben van de Ven 2019-01-30 18:00:40 +01:00
parent 602633373e
commit bcac2649d8
3 changed files with 30 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
www/css/styles.css
View file

@ -1,6 +1,7 @@
body { body {
font-family: "Noto Sans", sans-serif; font-family: "Noto Sans", sans-serif;
margin: 0; } margin: 0;
font-size: 10pt; }
.btn, input[type="submit"] { .btn, input[type="submit"] {
display: inline-block; display: inline-block;
@ -33,7 +34,7 @@ img.icon {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
width: 430px; width: 380px;
height: 100%; height: 100%;
overflow-y: scroll; } overflow-y: scroll; }
#status > div { #status > div {
@ -154,7 +155,7 @@ img.icon {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 420px; width: 385px;
max-height: 100%; max-height: 100%;
overflow-y: auto; } overflow-y: auto; }
#story #msg .msg__info, #story #msg .directions > div { #story #msg .msg__info, #story #msg .directions > div {

26
www/js/hugvey_console.js
View file

@ -398,7 +398,16 @@ class Graph {
} }
let directionsEl = crel( 'div', { 'class': 'directions' }, let directionsEl = crel( 'div', { 'class': 'directions' },
crel( 'h2', 'Directions' ), crel( 'h2', 'Directions' ),
...toDirections, ...fromDirections ...toDirections,
crel('div',{
'class': 'btn btn--create',
'on': {
'click': function(e) {
panopticon.graph.createConnectedMsg(msg);
}
}
}, 'Create new message'),
...fromDirections
); );
msgEl.appendChild( directionsEl ); msgEl.appendChild( directionsEl );
@ -716,6 +725,15 @@ class Graph {
this.addMsg(); this.addMsg();
this.build(); this.build();
} }
createConnectedMsg(sourceMsg) {
let newMsg = this.addMsg();
this.addDirection(sourceMsg, newMsg);
this.build();
// reselect so that overview is updated
this.selectMsg(newMsg);
}
getNodeById( id ) { getNodeById( id ) {
return this.data.filter( node => node['@id'] == id )[0]; return this.data.filter( node => node['@id'] == id )[0];
@ -875,10 +893,11 @@ class Graph {
build( isInit ) { build( isInit ) {
this.simulation = d3.forceSimulation( this.messages ) this.simulation = d3.forceSimulation( this.messages )
.force( "link", d3.forceLink( this.directions ).id( d => d['@id'] ) ) .force( "link", d3.forceLink( this.directions ).id( d => d['@id'] ) )
.force( "charge", d3.forceManyBody().strength( -1000 ) ) .force( "charge", d3.forceManyBody().strength( 100 ) )
.force( "center", d3.forceCenter( this.width / 2, this.height / 2 ) ) .force( "center", d3.forceCenter( this.width / 2, this.height / 2 ) )
.force( "collide", d3.forceCollide( this.nodeSize * 2 ) ) .force( "collide", d3.forceCollide( this.nodeSize * 1.7 ) )
; ;
this.simulation.velocityDecay(.99);
// Update existing nodes // Update existing nodes
let node = this.nodesG let node = this.nodesG
@ -901,6 +920,7 @@ class Graph {
.attr( 'r', this.nodeSize ) .attr( 'r', this.nodeSize )
// .text(d => d.id) // .text(d => d.id)
; ;
let textId = newNodeG.append( "text" ).attr( 'class', 'msg_id' ); let textId = newNodeG.append( "text" ).attr( 'class', 'msg_id' );
let textContent = newNodeG.append( "text" ).attr( 'class', 'msg_txt' ); let textContent = newNodeG.append( "text" ).attr( 'class', 'msg_txt' );
let statusIcon = newNodeG.append( "image" ) let statusIcon = newNodeG.append( "image" )

5
www/scss/styles.scss
View file

@ -4,6 +4,7 @@ $status_width_open: 860px;
body{ body{
font-family: "Noto Sans", sans-serif; font-family: "Noto Sans", sans-serif;
margin: 0; margin: 0;
font-size: 10pt;
} }
.btn, input[type="submit"]{ .btn, input[type="submit"]{
@ -47,7 +48,7 @@ img.icon{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
width: 430px; width: 380px;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
@ -255,7 +256,7 @@ img.icon{
position: absolute; position: absolute;
top:0; top:0;
right:0; right:0;
width: 420px; width: 385px;
max-height:100%; max-height:100%;
overflow-y: auto; overflow-y: auto;