Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI improvement for 3 7 #3984

Merged
merged 5 commits into from
Nov 30, 2023
Merged

UI improvement for 3 7 #3984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c823902
User Interface - Improvements
mdouchin Nov 23, 2023
615a324
Attribute table - Allow to display popups for non-spatial layer & imp…
mdouchin Nov 23, 2023
7dce6d1
User interface - Implement a brand new light default theme
mdouchin Nov 24, 2023
b7626c2
Editing - Prevent the user from quitting Lizmap when an editing sessi…
mdouchin Nov 24, 2023
e573cbd
Minor CSS fixes
mdouchin Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion assets/src/legacy/attributeTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,7 +484,8 @@ var lizAttributeTable = function() {
var canPopup = false
if( config.layers[lname]
&& config.layers[lname]['popup'] == 'True'
&& config.layers[lname]['geometryType'] != 'none'
// We should NOT deactivate popup for non-spatial layers, as it can be very useful
// && config.layers[lname]['geometryType'] != 'none'
&& config.layers[lname]['geometryType'] != 'unknown'
){
canPopup = true;
Expand Down Expand Up @@ -666,6 +667,7 @@ var lizAttributeTable = function() {
}

// Bind click on detail button
// It just toggles the right panel visibility
if( canPopup ){
$('#attribute-layer-'+ cleanName + ' button.btn-detail-attributeTable')
.click(function(){
Expand Down Expand Up @@ -1685,6 +1687,11 @@ var lizAttributeTable = function() {
};
}

/**
*
* @param {string} aName The layer name
* @param {string} aTable The HTML table selector
*/
function bindTableLineClick(aName, aTable){
$(aTable +' tr').click(function() {

Expand All @@ -1711,6 +1718,8 @@ var lizAttributeTable = function() {

lizMap.getFeaturePopupContent( aName, feat, function(data){
$('#attribute-table-panel-' + parentLayerCleanName ).html(data);
// Add the missing Bootstrap classes
$('#attribute-table-panel-' + parentLayerCleanName + ' table').addClass('table table-condensed table-striped table-bordered');

// Trigger event
lizMap.events.triggerEvent('lizmappopupdisplayed_inattributetable'
Expand Down
16 changes: 16 additions & 0 deletions assets/src/legacy/edition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,20 @@
var lizEdition = function() {

/**
* Prevent the user from quitting the page
* when and editing session is active.
*
* @param {Event} event
*/
const beforeUnloadHandler = (event) => {
if (lizMap.editionPending) {
event.preventDefault();
event.returnValue = '';
}
}
window.addEventListener('beforeunload', beforeUnloadHandler);


function FeatureEditionData(layerID, feature, relation) {
/** @var {string} QGIS layer id */
this.layerId = layerID;
Expand Down Expand Up @@ -1005,6 +1020,7 @@ OpenLayers.Geometry.pointOnSegment = function(point, segment) {
},
'geolocation.position'
);

} else {
$('#edition').parent().remove();
$('#button-edition').remove();
Expand Down
77 changes: 58 additions & 19 deletions lizmap/www/assets/css/dataviz/dataviz.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Toolbar buttons
*/

#dataviz h3 .icon {
background-image: url(dataviz-icon-white.png);
background-image: url(dataviz-icon-dark.png);
background-position: 0 0;
}

Expand All @@ -37,20 +37,21 @@ Toolbar buttons
}

#dataviz-main.bottom-content div.menu-content{
background-color: #F0F0F0 !important;
background-color: var(--color-background-primary-content) !important;
border:none !important;
}

#dataviz-main.bottom-content div.menu-content p{
padding: 5px;
font-size: 0.8em;
}
/* Title "Dataviz" of the bottom dock */
#nav-tab-dataviz-main > a{
background: none !important;
border: none;
color: white;
color: var(--color-text-primary);
margin-top: 10px;
font-weight: bold;
font-weight: 500;
}
#dataviz-content > h3{
margin-left:0px;
Expand All @@ -64,9 +65,13 @@ Toolbar buttons
/*
DARK THEME
*/
#dataviz-content.dark h3 .icon {
background-image: url(dataviz-icon-white.png);
background-position: 0 0;
}
#dataviz-content.dark div.menu-content {
background: rgb(74, 74, 74) !important;
color: white;
color: var(--color-contrasted-text);
}
#dataviz-content.dark h3 {
font-weight: bold !important;
Expand All @@ -75,7 +80,7 @@ DARK THEME
#dataviz-content.dark g text.legendtext,
#dataviz-content.dark g.xtick text,
#dataviz-content.dark g.ytick text{
fill: white !important;
fill: var(--color-contrasted-text) !important;
}

/*
Expand All @@ -89,12 +94,11 @@ Diagram height, 450px by default*/
/*
TABS AND GROUPS
*/
/* Edition style */
#dataviz ul.nav-tabs {
border-bottom: 1px solid gray;
border-bottom: 1px solid var(--color-contrasted-elements-light);
}
#dataviz .nav-tabs > li > a {
color: white;
color: var(--color-text-primary);
padding: 5px;
border: none;
}
Expand All @@ -106,9 +110,8 @@ TABS AND GROUPS
#dataviz .nav-tabs > li > a:focus {
background: none;
border: none;
/* border-bottom: 3px solid #0094d6; */
border-bottom: 3px solid white;
color: white;
border-bottom: 3px solid var(--color-contrasted-elements);
color: var(--color-text-primary);
cursor: pointer;
}

Expand All @@ -117,32 +120,68 @@ TABS AND GROUPS
#dataviz .nav-tabs > li.active > a:focus {
background: none;
border: none;
border-bottom: 3px solid white;
color: white;
border-bottom: 3px solid var(--color-contrasted-elements);
color: var(--color-text-primary);
cursor: auto;
}
/* In bottom-dock, do not use a thick border bottom */
#bottom-dock #nav-tab-dataviz-main > a {
border: none;
}

#dataviz div.tab-pane {
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 1px solid var(--color-contrasted-elements-light);
border-right: 1px solid var(--color-contrasted-elements-light);
border-bottom: 1px solid var(--color-contrasted-elements-light);
padding: 5px;
}

#dataviz legend {
color: white;
color: var(--color-text-primary);
border-bottom: none;
padding: 5px;
width: unset;
max-width: 100%;
margin-bottom: 0px;
font-weight: normal !important;
font-size: 1em;
}

#dataviz fieldset {
padding: 10px;
padding-top: 0px;
margin: 0px 5px;
border: 1px solid lightgray;
border: 1px solid var(--color-contrasted-elements);
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
}

/* Dataviz in bottom-dock */
#bottom-dock #dataviz ul.nav-tabs {
border: none;
}
#bottom-dock div.dataviz_plot_container,
#right-dock div.dataviz_plot_container
{
border: 1px solid lightgray;
margin-top: 10px;
}

#bottom-dock div.dataviz_plot_container h3,
#right-dock div.dataviz_plot_container h3
{
margin-left: 0px !important;
border-bottom: 1px solid lightgray;
}
#bottom-dock #dataviz-content.light span.icon {
background-image: url("dataviz-icon-dark.png");
}


/* Some plotly adaptations */
/* deactivated because it moves the plotly toolbar */
.js-plotly-plot .plotly
/* ,.js-plotly-plot .plotly div */
{
margin: 0 auto;
}
51 changes: 34 additions & 17 deletions lizmap/www/assets/css/map.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,6 @@ button.btn-primary:hover > [class*=" icon-"] {
display:none;
}

#headermenu .dropdown-menu > li > a{
color:white;
}

/* mapmenu */
#mapmenu {
position:absolute;
Expand Down Expand Up @@ -368,11 +364,15 @@ ul.nav.nav-tabs {
right:5px;
width: 32px;
height: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-left-square' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-arrow-left-square' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}

#dock-close:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-left-square' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
}

#right-dock div.tabbable {
height: 100%;
margin-top: 5px;
Expand Down Expand Up @@ -512,14 +512,20 @@ SubDock

#bottom-dock-window-buttons {
display:none;
position:absolute;
position:fixed;
bottom:0px;
padding:2px;
}
#bottom-dock.visible #bottom-dock-window-buttons {
display:block;
}

#bottom-dock.half-transparent {
opacity: 1;
height: 48%;
}
#bottom-dock.half-transparent #bottom-dock-window-buttons {
display: block;
}

#bottom-dock-tabs {
display:none;
Expand Down Expand Up @@ -1494,6 +1500,7 @@ lizmap-print .flex {

#switcher-layers-actions {
background-color: inherit;
margin-top: 5px;
margin-bottom: 1px;
padding-right: 10px;
text-align: right;
Expand Down Expand Up @@ -2109,7 +2116,7 @@ lizmap-mouse-position > div.coords-unit > select{
#map-content .lizmapPopupContent h4,
#popupcontent .lizmapPopupContent h4{
margin: 0px;
color : white !important;
color : white;
font-size: 1em;
padding: 2px;
padding-left: 5px;
Expand Down Expand Up @@ -2295,9 +2302,9 @@ lizmap-mouse-position > div.coords-unit > select{

#edition-form-container h3 {
color: black;
background-color: lightgrey;
background-color: transparent;
line-height: 20px;
font-size: 1em;
font-size: 1.2em;
padding: 1px 5px;
margin-bottom: 4px;
}
Expand Down Expand Up @@ -2353,7 +2360,6 @@ lizmap-mouse-position > div.coords-unit > select{

.edition-tabs .nav-pills > .active > a, .edition-tabs .nav-pills > .active > a:hover, .edition-tabs .nav-pills > .active > a:focus{
background-color: #93C01F;
background-image: linear-gradient(to bottom, #9BC144, #93C01F);
color: white;
}

Expand Down Expand Up @@ -2458,14 +2464,15 @@ div.tooltip {
border: 1px solid darkgray;
border-bottom-color: transparent;
}
/* Remove border & padding */
#edition div.tab-content {
border: 1px solid lightgrey;
padding: 10px;
/* border: 1px solid lightgrey;
padding: 10px; */
}
#edition div.jforms-table-group{
background-color: lightgrey;
padding: 10px 0px;
border-radius: 10px;
/* background-color: lightgrey; */
padding: 5px 0px;
/* border-radius: 10px; */
}

#edition-point-coord-form,
Expand Down Expand Up @@ -2930,6 +2937,7 @@ lizmap-reverse-geom svg{
.btn-print-launch.spinner::after {
right: 5px;
}

/* lizmap-feature-toolbar */
lizmap-feature-toolbar button.btn:hover,
.attribute-layer-action-bar button.btn:not(.dropdown-toggle):hover{
Expand Down Expand Up @@ -3142,6 +3150,10 @@ lizmap-treeview .icon-remove-sign {
lizmap-treeview .icon-info-sign {
visibility: hidden;
margin-left: auto;
/* Make it centered vertically & horizontally */
background-origin: content-box;
border: 1px solid gray;
border-radius: 5px;
}

lizmap-treeview .node:hover .icon-info-sign {
Expand Down Expand Up @@ -3173,4 +3185,9 @@ lizmap-treeview .symbols img.legend {

lizmap-treeview img.legend[src="data:image/png;base64, "]{
visibility: hidden;
}
}

/* CKEDITOR adaptations */
.ck.ck-balloon-panel.ck-balloon-panel_visible {
z-index: 9999;
}
Binary file modified lizmap/www/themes/default/css/img/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading