Skip to content

Commit

Permalink
Update CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@phschaad
phschaad committed Jun 4, 2024
1 parent a667b85 commit 350a223
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 62 deletions.
14 changes: 7 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,27 +30,27 @@ <h3 id="sidebar-header">
</div>
</div>
<div class="container-fluid" id="header-container">
<div class="row g-2">
<div class="row g-2 mb-2">
<div class="col-auto">
<input type="file" id="sdfg-file-input"
accept=".sdfg,.json,.sdfgz,.sdfg.gz"
class="form-control form-control-sm">
</div>
<div class="col-auto">
<button class="btn btn-sm btn-light btn-sdfv-light" id="reload">
<button class="btn btn-sm btn-light" id="reload">
Refresh
</button>
</div>
<div class="col-auto">
<button class="btn btn-sm btn-light btn-sdfv-light" id="outline">
<button class="btn btn-sm btn-light" id="outline">
SDFG Outline
</button>
</div>
<div class="col-auto">
<input type="file" accept=".json" id="instrumentation-report-file-input"
style="display: none;">
<button id="load-instrumentation-report-btn"
class="btn btn-sm btn-light btn-sdfv-light"
class="btn btn-sm btn-light"
onclick="document.getElementById('instrumentation-report-file-input').click();">
Load Instrumentation Report
</button>
Expand All @@ -61,7 +61,7 @@ <h3 id="sidebar-header">
<div class="input-group">
<input id="search" type="text" class="form-control form-control-sm"
placeholder="Search in graph elements">
<button id="search-btn" class="btn btn-sm btn-light btn-sdfv-light">
<button id="search-btn" class="btn btn-sm btn-light">
Search
</button>
</div>
Expand All @@ -76,7 +76,7 @@ <h3 id="sidebar-header">
</div>
<div class="col-auto">
<div class="dropdown">
<button class="btn btn-sm btn-light btn-sdfv-light dropdown-toggle" type="button"
<button class="btn btn-sm btn-light dropdown-toggle" type="button"
data-bs-toggle="dropdown">
Advanced Search
</button>
Expand All @@ -95,7 +95,7 @@ <h3 id="sidebar-header">
}
return false;
};</textarea>
<button id="advsearch-btn" class="btn btn-light btn-sdfv-light">
<button id="advsearch-btn" class="btn btn-light">
Search
</button>
</form>
Expand Down
42 changes: 23 additions & 19 deletions scss/sdfv.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,23 @@ body.sdfv {
font-family: "Segoe UI", Arial, sans-serif;
}

// Loading animation
.loader {
border: 4px solid #ffffff;
border-top: 7px solid #34db50;
border-radius: 50%;
width: 25px;
height: 25px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.sdfv {

// Loading animation
.loader {
border: 4px solid #ffffff;
border-top: 7px solid #34db50;
border-radius: 50%;
width: 25px;
height: 25px;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.hidden {
display: none;
}
Expand All @@ -54,11 +55,8 @@ body.sdfv {
}

#header-container {
padding-left: 0;
}

#header-container .row {
margin-bottom: 0.3rem;
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}

#advsearch {
Expand Down Expand Up @@ -420,6 +418,12 @@ body.sdfv {
gap: .3rem;
}

.btn.selected {
color: var(--bs-btn-active-color);
background-color: var(--bs-btn-active-bg);
border-color: var(--bs-btn-active-border-color);
}

.btn-material {
padding-bottom: 0;
}
Expand Down
71 changes: 37 additions & 34 deletions src/renderer/renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,33 +368,24 @@ export class SDFGRenderer extends EventEmitter {
if (this.interaction_info_text)
this.interaction_info_text.innerHTML = '';

if (this.panmode_btn) {
this.panmode_btn.style.paddingBottom = '0px';
this.panmode_btn.style.userSelect = 'none';
if (this.panmode_btn)
this.panmode_btn.classList.remove('selected');
}
if (this.movemode_btn) {
this.movemode_btn.style.paddingBottom = '0px';
this.movemode_btn.style.userSelect = 'none';

if (this.movemode_btn)
this.movemode_btn.classList.remove('selected');
}
if (this.selectmode_btn) {
this.selectmode_btn.style.paddingBottom = '0px';
this.selectmode_btn.style.userSelect = 'none';

if (this.selectmode_btn)
this.selectmode_btn.classList.remove('selected');
}

this.mouse_follow_element.innerHTML = null;

for (const add_btn of this.addmode_btns) {
const btn_type = add_btn.getAttribute('type');
if (btn_type === this.add_type && this.add_type) {
add_btn.style.userSelect = 'none';
add_btn.classList.add('selected');
this.mouse_follow_element.innerHTML =
this.mouse_follow_svgs[this.add_type];
} else {
add_btn.style.userSelect = 'none';
add_btn.classList.remove('selected');
}
}
Expand Down Expand Up @@ -492,7 +483,7 @@ export class SDFGRenderer extends EventEmitter {
class: 'dropdown',
});
$('<button>', {
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
html: '<i class="material-symbols-outlined">menu</i>',
title: 'Menu',
'data-bs-toggle': 'dropdown',
Expand Down Expand Up @@ -539,7 +530,7 @@ export class SDFGRenderer extends EventEmitter {

// SDFV Options.
$('<button>', {
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
html: '<i class="material-symbols-outlined">settings</i>',
title: 'Settings',
click: () => {
Expand All @@ -553,7 +544,7 @@ export class SDFGRenderer extends EventEmitter {
class: 'dropdown',
});
$('<button>', {
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
html: '<i class="material-symbols-outlined">' +
'saved_search</i>',
title: 'Overlays',
Expand Down Expand Up @@ -612,27 +603,35 @@ export class SDFGRenderer extends EventEmitter {
);
}

const zoomButtonGroup = $('<div>', {
class: 'btn-group',
role: 'group',
}).appendTo(this.toolbar);
// Zoom to fit.
$('<button>', {
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
html: '<i class="material-symbols-outlined">fit_screen</i>',
title: 'Zoom to fit SDFG',
click: () => {
this.zoom_to_view();
},
}).appendTo(this.toolbar);
}).appendTo(zoomButtonGroup);
$('<button>', {
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
html: '<i class="material-symbols-outlined">fit_width</i>',
title: 'Zoom to fit width',
click: () => {
this.zoomToFitWidth();
},
}).appendTo(this.toolbar);
}).appendTo(zoomButtonGroup);

const collapseButtonGroup = $('<div>', {
class: 'btn-group',
role: 'group',
}).appendTo(this.toolbar);
// Collapse all.
$('<button>', {
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
html: '<i class="material-symbols-outlined">unfold_less</i>',
title: 'Collapse next level (Shift+click to collapse all)',
click: (e: MouseEvent) => {
Expand All @@ -641,11 +640,11 @@ export class SDFGRenderer extends EventEmitter {
else
this.collapseNextLevel();
},
}).appendTo(this.toolbar);
}).appendTo(collapseButtonGroup);

// Expand all.
$('<button>', {
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
html: '<i class="material-symbols-outlined">unfold_more</i>',
title: 'Expand next level (Shift+click to expand all)',
click: (e: MouseEvent) => {
Expand All @@ -654,7 +653,7 @@ export class SDFGRenderer extends EventEmitter {
else
this.expandNextLevel();
},
}).appendTo(this.toolbar);
}).appendTo(collapseButtonGroup);

if (this.modeButtons) {
// If we get the "external" mode buttons we are in vscode and do
Expand Down Expand Up @@ -694,25 +693,29 @@ export class SDFGRenderer extends EventEmitter {
this.addmode_btns = [];

// Enter pan mode.
const modeButtonGroup = $('<div>', {
class: 'btn-group',
role: 'group',
}).appendTo(this.toolbar);
this.panmode_btn = $('<button>', {
class: 'btn btn-light btn-sm btn-material selected',
class: 'btn btn-secondary btn-sm btn-material selected',
html: '<i class="material-symbols-outlined">pan_tool</i>',
title: 'Pan mode',
}).appendTo(this.toolbar)[0];
}).appendTo(modeButtonGroup)[0];

// Enter move mode.
this.movemode_btn = $('<button>', {
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
html: '<i class="material-symbols-outlined">open_with</i>',
title: 'Object moving mode',
}).appendTo(this.toolbar)[0];
}).appendTo(modeButtonGroup)[0];

// Enter box select mode.
this.selectmode_btn = $('<button>', {
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
html: '<i class="material-symbols-outlined">select</i>',
title: 'Select mode',
}).appendTo(this.toolbar)[0];
}).appendTo(modeButtonGroup)[0];
}

// Enter pan mode
Expand Down Expand Up @@ -781,7 +784,7 @@ export class SDFGRenderer extends EventEmitter {
// Filter graph to selection (visual cutout).
this.cutoutBtn = $('<button>', {
id: 'cutout-button',
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
css: {
'display': 'none',
},
Expand All @@ -795,7 +798,7 @@ export class SDFGRenderer extends EventEmitter {
// Transition to local view with selection.
this.localViewBtn = $('<button>', {
id: 'local-view-button',
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
css: {
'display': 'none',
},
Expand All @@ -810,7 +813,7 @@ export class SDFGRenderer extends EventEmitter {
if (this.in_vscode) {
const exitPreviewBtn = $('<button>', {
id: 'exit-preview-button',
class: 'btn btn-light btn-sm btn-material',
class: 'btn btn-secondary btn-sm btn-material',
css: {
'display': 'none',
},
Expand Down
4 changes: 2 additions & 2 deletions src/sdfv.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ export class SDFV {
});
btnContainer.append($('<button>', {
text: 'Jump to start',
class: 'btn btn-sm btn-light',
class: 'btn btn-sm btn-secondary',
css: {
'margin-right': '10px',
},
Expand All @@ -281,7 +281,7 @@ export class SDFV {
}));
btnContainer.append($('<button>', {
text: 'Jump to end',
class: 'btn btn-sm btn-light',
class: 'btn btn-sm btn-secondary',
click: () => {
elem.setViewToDestination(this.get_renderer()!);
},
Expand Down

0 comments on commit 350a223

Please sign in to comment.