[Redizajn 1KA] Popupi: Analize > Grafi > Hover nastavitve ob grafu - v1

This commit is contained in:
tejagerjovic 2022-06-09 07:45:30 +02:00
parent cf6f705750
commit 80b063b383
5 changed files with 204 additions and 182 deletions

View File

@ -8825,39 +8825,7 @@ class SurveyChart {
echo '<div class="popup_close"><a href="#" onClick="chartCloseAdvancedSettings(); return false;">✕</a></div>';
echo '<form method="post" name="chart_advanced_settings" onsubmit="chartSaveAdvancedSettings(\''.$spid.'\', \''.self::$current_loop.'\'); return false;">';
echo '<input type="hidden" name="anketa" value="'.self::$anketa.'" />';
echo '<input type="hidden" name="spid" value="'.$spid.'" />';
echo '<input type="hidden" name="loop" value="'.self::$current_loop.'" />';
echo '<input type="hidden" name="spr_type" value="'.$spremenljivka['tip'].'" />';
// urejanje label
echo '<div id="chartSettingsArea1" class="chartSettingsArea">';
self::displayAdvancedSettingsLabels($spid);
echo '</div>';
// urejanje barv
echo '<div id="chartSettingsArea2" class="chartSettingsArea" style="visibility: hidden;">';
self::displayAdvancedSettingsColors($spid);
echo '</div>';
// urejanje mej pri numericih
if(($spremenljivka['tip'] == 3 && self::checkDropdownNumeric($spid)) || $spremenljivka['tip'] == 7 || $spremenljivka['tip'] == 8 || $spremenljivka['tip'] == 22){
echo '<div id="chartSettingsArea4" class="chartSettingsArea" style="visibility: hidden;">';
self::displayAdvancedSettingsLimits($spid, self::$settings['limits']['advanced_settings']);
echo '</div>';
}
/* REKODIRANJE */
echo '<div id="chartSettingsArea3" class="chartSettingsArea" style="visibility: hidden;">';
$spr_id=explode('_',$spid);
$vmv = new RecodeValues(self::$anketa,$spr_id[0]);
$vmv->DisplayMissingValuesForQuestion(false);
echo '</div>';
echo '</form>';
echo '<div class="chart_settings_wrap">';
/* ZAVIHKI NA DESNI */
echo '<div id="chartTabs" class="chartSettingsTabs">';
@ -8882,6 +8850,40 @@ class SurveyChart {
echo '</div>';
echo '<input type="hidden" name="anketa" value="'.self::$anketa.'" />';
echo '<input type="hidden" name="spid" value="'.$spid.'" />';
echo '<input type="hidden" name="loop" value="'.self::$current_loop.'" />';
echo '<input type="hidden" name="spr_type" value="'.$spremenljivka['tip'].'" />';
// urejanje label
echo '<div id="chartSettingsArea1" class="chartSettingsArea">';
self::displayAdvancedSettingsLabels($spid);
echo '</div>';
// urejanje barv
echo '<div id="chartSettingsArea2" class="chartSettingsArea displayNone">';
self::displayAdvancedSettingsColors($spid);
echo '</div>';
// urejanje mej pri numericih
if(($spremenljivka['tip'] == 3 && self::checkDropdownNumeric($spid)) || $spremenljivka['tip'] == 7 || $spremenljivka['tip'] == 8 || $spremenljivka['tip'] == 22){
echo '<div id="chartSettingsArea4" class="chartSettingsArea" style="visibility: hidden;">';
self::displayAdvancedSettingsLimits($spid, self::$settings['limits']['advanced_settings']);
echo '</div>';
}
/* REKODIRANJE */
echo '<div id="chartSettingsArea3" class="chartSettingsArea displayNone">';
$spr_id=explode('_',$spid);
$vmv = new RecodeValues(self::$anketa,$spr_id[0]);
$vmv->DisplayMissingValuesForQuestion(false);
echo '</div>';
echo '</form>';
echo '</div>'; #wrap
/* GUMBI NA DNU */
echo '<div class="button_holder">';

View File

@ -280,10 +280,10 @@ function chartSaveAdvancedSettings (spid, loop) {
// prikaze napredno urejanje grafa
function chartTabAdvancedSettings (tab) {
$('.chartSettingsArea').css('visibility', 'hidden');
$('.chartSettingsArea').addClass("displayNone");
$('.chartTab').removeClass('active');
$('#chartSettingsArea'+tab).css('visibility', 'visible');
$('#chartSettingsArea'+tab).removeClass("displayNone");
$('#chartTab'+tab).addClass('active');
}

View File

@ -8359,6 +8359,7 @@ div.popup_right #div_cp_preview_content #if_popup_butons {
}
table.question_recode_table {
table-layout: fixed;
border: 1px solid #E5E5E5;
}
table.question_recode_table td, table.question_recode_table th {
@ -8372,6 +8373,7 @@ table.question_recode_table td.dark, table.question_recode_table th.dark {
}
table.question_recode_table td.labela, table.question_recode_table th.labela {
width: 190px;
overflow: hidden;
}
div.column.variable select {
@ -31623,68 +31625,18 @@ input#endDate {
/* popup edit chart */
#chart_float_editing {
display: none;
position: relative;
width: 815px;
box-sizing: border-box;
}
#chart_float_editing .chartSettingsArea {
position: absolute;
overflow: auto;
right: 20px;
#chart_float_editing .button_holder {
align-items: flex-end;
box-sizing: border-box;
width: 615px;
padding: 0 20px;
}
#chart_float_editing .chartSettingsArea ul.vrednost_sort li {
border: 1px solid #E5E5E5;
}
#chart_float_editing .chartSettingsArea .chart_setting {
padding: 5px;
}
#chart_float_editing .chartSettingsArea #chart_number_limits_advanced ul {
padding: 3px 20px;
}
#chart_float_editing .chartSettingsArea #chart_number_limits_advanced ul li {
padding: 2px 0px 3px 0px;
}
#chart_float_editing .chartSettingsArea #chart_number_limits_advanced ul li .chart_advanced_warning {
padding: 0px 10px;
color: red;
}
#chart_float_editing .chartSettingsArea .new_labels {
#chart_float_editing .chart_settings_wrap {
display: flex;
flex-direction: row;
}
#chart_float_editing .chartSettingsArea .new_labels p {
margin-right: 8px;
}
#chart_float_editing .chartSettingsArea .chart_editing textarea {
width: 100%;
height: 40px;
}
#chart_float_editing .chartSettingsArea .chart_editing #vrednosti_holder ul li {
display: flex;
flex-direction: row;
align-items: center;
}
#chart_float_editing .chartSettingsArea .chart_editing #vrednosti_holder ul li textarea {
width: 90%;
margin-right: 8px;
}
#chart_float_editing .chartSettingsArea .form-item {
width: 200px;
}
#chart_float_editing .chartSettingsArea .form-item label {
margin-right: 8px;
}
#chart_float_editing .chartSettingsArea .colorwell {
width: 70px;
height: 28px;
font-size: 14px;
margin-bottom: 8px;
}
#chart_float_editing .chartSettingsTabs {
position: absolute;
#chart_float_editing .chart_settings_wrap .chartSettingsTabs {
box-sizing: border-box;
width: 160px;
padding: 0px;
@ -31692,21 +31644,76 @@ input#endDate {
text-align: center;
background-color: #FFFFFF;
}
#chart_float_editing .chartSettingsTabs ul {
#chart_float_editing .chart_settings_wrap .chartSettingsTabs ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#chart_float_editing .chartSettingsTabs ul li {
#chart_float_editing .chart_settings_wrap .chartSettingsTabs ul li {
width: 100%;
height: 20px;
padding: 10px 0;
cursor: pointer;
}
#chart_float_editing .chartSettingsTabs ul li.active {
#chart_float_editing .chart_settings_wrap .chartSettingsTabs ul li.active {
color: #1E88E5;
background-color: #EAF9FE;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea {
overflow: auto;
box-sizing: border-box;
height: 400px;
width: 615px;
padding: 0 20px;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea ul.vrednost_sort li {
border: 1px solid #E5E5E5;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea .chart_setting {
padding: 5px;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea #chart_number_limits_advanced ul {
padding: 3px 20px;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea #chart_number_limits_advanced ul li {
padding: 2px 0px 3px 0px;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea #chart_number_limits_advanced ul li .chart_advanced_warning {
padding: 0px 10px;
color: red;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea .new_labels {
display: flex;
flex-direction: row;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea .new_labels p {
margin-right: 8px;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea .chart_editing textarea {
width: 100%;
height: 40px;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea .chart_editing #vrednosti_holder ul li {
display: flex;
flex-direction: row;
align-items: center;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea .chart_editing #vrednosti_holder ul li textarea {
width: 90%;
margin-right: 8px;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea .form-item {
width: 200px;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea .form-item label {
margin-right: 8px;
}
#chart_float_editing .chart_settings_wrap .chartSettingsArea .colorwell {
width: 70px;
height: 28px;
font-size: 14px;
margin-bottom: 8px;
}
/*color picker*/
.farbtastic {

View File

@ -521,6 +521,8 @@ div.popup_right {
table.question_recode_table {
table-layout: fixed;
border: 1px solid $gray;
td,th {
@ -536,6 +538,7 @@ table.question_recode_table {
&.labela {
width: 190px;
overflow: hidden;
}
}
}

View File

@ -132,118 +132,128 @@
/* popup edit chart */
#chart_float_editing {
display: none;
position: relative;
width: 815px;
box-sizing: border-box;
.chartSettingsArea {
position: absolute;
overflow: auto;
right: 20px;
.button_holder {
align-items: flex-end;
box-sizing: border-box;
}
width: 615px;
padding: 0 20px;
.chart_settings_wrap {
ul.vrednost_sort {
li {
border: 1px solid $gray;
}
}
display: flex;
flex-direction: row;
.chart_setting {
padding: 5px;
}
//// Nastavitve
.chartSettingsTabs {
box-sizing: border-box;
width: 160px;
padding: 0px;
font-weight: 500;
text-align: center;
background-color: $white;
#chart_number_limits_advanced {
ul {
padding: 3px 20px;
padding: 0;
margin: 0;
list-style-type: none;
li {
padding: 2px 0px 3px 0px;
.chart_advanced_warning {
padding: 0px 10px;
color: red;
}
width: 100%;
height: 20px;
padding: 10px 0;
cursor: pointer;
}
li.active {
color: $blue;
background-color: $light-blue;
}
}
}
.new_labels {
display: flex;
flex-direction: row;
.chartSettingsArea {
overflow: auto;
p {
margin-right: 8px;
}
}
box-sizing: border-box;
.chart_editing {
textarea {
width: 100%;
height: 40px;
height:400px;
width: 615px;
padding: 0 20px;
ul.vrednost_sort {
li {
border: 1px solid $gray;
}
}
#vrednosti_holder {
.chart_setting {
padding: 5px;
}
#chart_number_limits_advanced {
ul {
padding: 3px 20px;
li {
display: flex;
flex-direction: row;
align-items: center;
textarea {
width: 90%;
margin-right: 8px;
padding: 2px 0px 3px 0px;
.chart_advanced_warning {
padding: 0px 10px;
color: red;
}
}
}
}
}
.form-item {
width: 200px;
label {
margin-right: 8px;
.new_labels {
display: flex;
flex-direction: row;
p {
margin-right: 8px;
}
}
.chart_editing {
textarea {
width: 100%;
height: 40px;
}
#vrednosti_holder {
ul {
li {
display: flex;
flex-direction: row;
align-items: center;
textarea {
width: 90%;
margin-right: 8px;
}
}
}
}
}
.form-item {
width: 200px;
label {
margin-right: 8px;
}
}
.colorwell {
width: 70px;
height: 28px;
font-size: 14px;
margin-bottom: 8px;
}
}
.colorwell {
width: 70px;
height: 28px;
font-size: 14px;
margin-bottom: 8px;
}
}
//// Nastavitve
.chartSettingsTabs {
position: absolute;
box-sizing: border-box;
width: 160px;
padding: 0px;
font-weight: 500;
text-align: center;
background-color: $white;
ul {
padding: 0;
margin: 0;
list-style-type: none;
li {
width: 100%;
height: 20px;
padding: 10px 0;
cursor: pointer;
}
li.active {
color: $blue;
background-color: $light-blue;
}
}
}
}
/*color picker*/