Skip to content

Commit

Permalink
Enhance UI styles
Browse files Browse the repository at this point in the history
  • Loading branch information
Rello committed Sep 14, 2024
1 parent 8f43c2d commit 8bba824
Show file tree
Hide file tree
Showing 15 changed files with 72 additions and 75 deletions.
2 changes: 1 addition & 1 deletion css/dashboard.css
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
padding: 8px;
border-radius: var(--border-radius-large);
box-shadow: 2px 2px 5px var(--color-background-darker);
background-color: var(--color-primary-light);
background-color: #FFFFFF;
margin: 10px;
display: inline-block;
vertical-align: top;
Expand Down
3 changes: 2 additions & 1 deletion css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ content: inherit;
background: linear-gradient(to right, #1A366C, #F1F1F1);
/*margin-top: 20px;*/
margin-left: 30px;
margin-top: 10px;
display: block;
}

Expand Down Expand Up @@ -681,7 +682,7 @@ div.dt-container .dt-paging .dt-paging-button {
}

.infoBox {
background-color: var(--color-background-dark);
background-color: #FFFFFF;
padding: 5px;
box-shadow: 2px 2px 5px var(--color-background-darker);
border-radius: var(--border-radius-large);
Expand Down
1 change: 1 addition & 0 deletions js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ OCA.Analytics = Object.assign({}, OCA.Analytics, {
OCA.Analytics.Core = {
init: function () {
if (document.getElementById('sharingToken').value !== '') {
document.getElementById('byAnalytics').classList.toggle('analyticsFullscreen');
OCA.Analytics.Backend.getData();
return;
}
Expand Down
20 changes: 9 additions & 11 deletions js/dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,12 @@
'use strict';

document.addEventListener('DOMContentLoaded', function () {
//OCA.Analytics.Dashboard.init();
if (typeof OCA.Dashboard === 'object') {
OCA.Dashboard.register('analytics', (el) => {
el.innerHTML = '<ul id="ulAnalytics"></ul>';
OCA.Analytics.Dashboard.getFavorites();
});
}
})

OCA.Analytics = Object.assign({}, OCA.Analytics, {
Expand Down Expand Up @@ -39,16 +44,9 @@ OCA.Analytics = Object.assign({}, OCA.Analytics, {
*/
OCA.Analytics.Dashboard = {
init: function () {
if (typeof OCA.Dashboard === 'object') {
OCA.Dashboard.register('analytics', (el) => {
el.innerHTML = '<ul id="ulAnalytics"></ul>';
OCA.Analytics.Dashboard.getFavorites();
});
} else if (typeof OCA.Analytics.Navigation === 'object') {
// show favorites when the Analytics app itself is loaded
if (decodeURI(location.hash).length === 0) {
OCA.Analytics.Dashboard.getFavorites();
}
// show favorites when the Analytics app itself is loaded
if (decodeURI(location.hash).length === 0) {
OCA.Analytics.Dashboard.getFavorites();
}
},

Expand Down
13 changes: 8 additions & 5 deletions js/navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -487,18 +487,21 @@ OCA.Analytics.Navigation = {
},

handleOverviewButton: function (evt) {
evt.preventDefault();
history.pushState(null, '', evt.target.href);
if (evt) {
evt.preventDefault();
history.pushState(null, '', evt.target.href);
}

OCA.Analytics.Sidebar?.close?.();
if (document.querySelector('#navigationDatasets .active')) {
document.querySelector('#navigationDatasets .active').classList.remove('active');
}
OCA.Analytics.Visualization.hideElement('analytics-content');
OCA.Analytics.Visualization.showElement('analytics-intro');
document.getElementById('ulAnalytics').innerHTML = '';
OCA.Analytics.Dashboard?.init?.();
OCA.Analytics.Panorama?.Dashboard?.init?.();
// Do not reload DB all the time as it is already in the background
//document.getElementById('ulAnalytics').innerHTML = '';
//OCA.Analytics.Dashboard?.init?.();
//OCA.Analytics.Panorama?.Dashboard?.init?.();
},

handleNavigationClicked: function (evt) {
Expand Down
26 changes: 2 additions & 24 deletions js/panorama.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,29 +125,6 @@ OCA.Analytics.Panorama = {
'</div>' +
'</div>'
},
{
id: 3, name: '2-2', layout: '<div class="flex-container">' +
'<div class="panoramaSubHeaderRow"><div class="panoramaSubHeader editable"></div></div>' +
'<div class="flex-row" style="height: 50%;">' +
'<div class="flex-item"></div><div class="flex-item"></div>' +
'</div>' +
'<div class="flex-row" style="height: 50%;">' +
'<div class="flex-item"></div><div class="flex-item"></div>' +
'</div>' +
'</div>'
},
{
id: 4, name: '4-2', layout: '<div class="flex-container">' +
'<div class="panoramaSubHeaderRow"><div class="panoramaSubHeader editable"></div></div>' +
'<div class="flex-row" style="height: 50%;">' +
'<div class="flex-item"></div><div class="flex-item"></div>' +
'<div class="flex-item"></div><div class="flex-item"></div>' +
'</div>' +
'<div class="flex-row" style="height: 50%;">' +
'<div class="flex-item"></div><div class="flex-item"></div>' +
'</div>' +
'</div>'
},
],

init: function () {
Expand Down Expand Up @@ -1197,7 +1174,8 @@ OCA.Analytics.Dashboard = {
for (let panorama of JSON.parse(xhr.response)) {
let story = OCA.Analytics.Panorama.stories.find(x => parseInt(x.id) === parseInt(panorama));

let li = '<li id="analyticsWidgetItem' + panorama + '" class="analyticsWidgetItem">' + story.name + '</li>';
let li = '<li id="analyticsWidgetItem' + panorama + '" class="analyticsWidgetItem" style="height: 50px;text-align: center;">';
li += '<a href="' + OC.generateUrl('apps/analytics/pa/' + parseInt(panorama)) + '">' + story.name + '</a></li>';
document.getElementById('ulAnalytics').insertAdjacentHTML('beforeend', li);

}
Expand Down
13 changes: 10 additions & 3 deletions js/sidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,9 @@ OCA.Analytics.Sidebar.Report = {
data['type'] = parseInt(data['type']);

// Chart.js v4.4.3 changed from xAxes to x. In case the user has old chart options, they need to be corrected
data['chartoptions'] = data['chartoptions'].replace(/xAxes/g, 'x')
if (data['chartoptions']) {
data['chartoptions'] = data['chartoptions'].replace(/xAxes/g, 'x');
}

// clone the DOM template
table = document.importNode(document.getElementById('templateReport').content, true);
Expand Down Expand Up @@ -622,8 +624,13 @@ OCA.Analytics.Sidebar.Report = {

// store possibly changed values into the temporary variable as this is used in getData
// without this, the new options would only be active after a full reload
OCA.Analytics.currentReportData.options.chartoptions = JSON.parse(document.getElementById('sidebarReportChartOptions').value);
OCA.Analytics.currentReportData.options.dataoptions = JSON.parse(document.getElementById('sidebarReportDataOptions').value);
let chartOptions = document.getElementById('sidebarReportChartOptions').value;
let dataOptions = document.getElementById('sidebarReportDataOptions').value;

if (OCA.Analytics?.currentReportData?.options) {
OCA.Analytics.currentReportData.options.chartoptions = chartOptions ? JSON.parse(chartOptions) : null;
OCA.Analytics.currentReportData.options.dataoptions = dataOptions ? JSON.parse(dataOptions) : null;
}

if (OCA.Analytics.Sidebar.Report.metadataChanged === true) {
OCA.Analytics.Sidebar.Report.metadataChanged = false;
Expand Down
6 changes: 4 additions & 2 deletions js/userGuidance.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,10 @@ OCA.Analytics.Wizard = {

show: function () {
OCA.Analytics.Wizard.currentSlide = 0;
let wizard = document.importNode(document.getElementById('wizardDialog').content, true);
document.body.appendChild(wizard);
if (!document.getElementById('analyticsWizard')) {
let wizard = document.importNode(document.getElementById('wizardDialog').content, true);
document.body.appendChild(wizard);
}
document.getElementById('wizardNext').addEventListener('click', OCA.Analytics.Wizard.next);
document.getElementById('wizardPrevious').addEventListener('click', OCA.Analytics.Wizard.previous);
document.getElementById('wizardClose').addEventListener('click', OCA.Analytics.Wizard.cancel);
Expand Down
1 change: 1 addition & 0 deletions js/visualization.js
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,7 @@ OCA.Analytics.Visualization = {
chartOptions.circumference = 180;
chartOptions.rotation = -90;
chartOptions.plugins.datalabels.display = true;
chartOptions.plugins.datalabels.color = '#FFFFFF';
}

// the user can add/overwrite chart options
Expand Down
3 changes: 2 additions & 1 deletion templates/main_panorama.php
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
Util::addStyle('analytics', '3rdParty/datatables.min');
Util::addStyle('files_sharing', 'icons');
Util::addStyle('analytics', 'print');
Util::addScript('analytics', 'panorama');
Util::addStyle('analytics', 'dashboard');
Util::addScript('analytics', 'visualization');
Util::addScript('analytics', 'navigation');
Util::addScript('analytics', 'sidebar');
Expand All @@ -27,6 +27,7 @@
Util::addScript('analytics', 'userGuidance');
Util::addScript('analytics', '3rdParty/jspdf.umd.min');
Util::addScript('analytics', '3rdParty/html2canvas.min');
Util::addScript('analytics', 'panorama');
?>

<div id="app-navigation">
Expand Down
2 changes: 1 addition & 1 deletion templates/part.content.php
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div id="noDataContainer" hidden>
<?php p($l->t('No data found')); ?>
</div>
<div style="margin-bottom: 45px"></div>
<div style="margin-bottom: 65px"></div>
<div id="byAnalytics" class="byAnalytics" style="display: none;">
<img id="byAnalyticsImg" style="width: 33px; margin-right: 7px;margin-left: 10px;" src="<?php echo \OC::$server->getURLGenerator()->imagePath('analytics', 'app-color.svg') ?>">
<span style="font-size: 12px; line-height: 14px;">created with<br>Analytics</span>
Expand Down
10 changes: 10 additions & 0 deletions templates/part.content_panorama.php
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,16 @@
border-radius: 5px;
}

.flex-item-tall {
flex-grow: 2;
position: relative;
margin: 15px;
padding: 15px;
position: relative;
background-color: #FFFF;
border-radius: 5px;
}

.textContainer {
flex-direction: column;
display: flex;
Expand Down
8 changes: 2 additions & 6 deletions templates/part.templates.php
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,7 @@ class="sidebarPointer"><?php p($l->t('Visualization')); ?></h3>
</div>
<div style="display: table-row;">
<div style="display: table-cell; width: 100%; vertical-align: middle;"><?php p($l->t('Chart options')); ?></div>
<div style="display: table-cell;"><textarea id="sidebarReportChartOptions"
placeholder="<?php p($l->t('Advanced')); ?>"
class="sidebarInput" row="1"></textarea>
<div style="display: table-cell;"><textarea id="sidebarReportChartOptions" class="sidebarInput" row="1"></textarea>
</div>
<div style="display: table-cell; vertical-align: middle;">
<a target="_blank" rel="noreferrer noopener" title="<?php p($l->t('Open documentation')); ?>"
Expand All @@ -131,9 +129,7 @@ class="sidebarInput" row="1"></textarea>
</div>
<div style="display: table-row;">
<div style="display: table-cell; width: 100%; vertical-align: middle;"><?php p($l->t('Data options')); ?></div>
<div style="display: table-cell;"><textarea id="sidebarReportDataOptions"
placeholder="<?php p($l->t('Advanced')); ?>"
class="sidebarInput" row="1"></textarea>
<div style="display: table-cell;"><textarea id="sidebarReportDataOptions" class="sidebarInput" row="1"></textarea>
</div>
<div style="display: table-cell; vertical-align: middle;">
<a target="_blank" rel="noreferrer noopener" title="<?php p($l->t('Open documentation')); ?>"
Expand Down
3 changes: 1 addition & 2 deletions templates/wizard.php
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
?>
<template id="wizardDialog">
<div class="modal-mask" id="analyticsWizard"
style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
hidden>
style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<div class="modal-wrapper modal-wrapper--normal" style="">
<a class="prev" id="wizardPrevious">
<svg fill="currentColor" width="40" height="40" viewBox="0 0 24 24" class="material-design-icon__svg">
Expand Down
Loading

0 comments on commit 8bba824

Please sign in to comment.