[Redizajn 1KA] Popupi: Analize > Grafi > Nastavitve - Barve - v1

This commit is contained in:
tejagerjovic 2022-06-07 20:25:43 +02:00
parent 7392811e43
commit 7f197e7ba9
7 changed files with 1615 additions and 1655 deletions

View File

@ -10385,13 +10385,6 @@ class SurveyChart {
echo '<h2>'.$lang['srv_chart_skin_long'].'</h2>'; echo '<h2>'.$lang['srv_chart_skin_long'].'</h2>';
echo '<div class="popup_close"><a href="#" onClick="close_chartColor(); return false;">✕</a></div>'; echo '<div class="popup_close"><a href="#" onClick="close_chartColor(); return false;">✕</a></div>';
// Opozorilo na vrhu
if(!is_numeric($skin)){
echo '<div id="chart_skin_note">';
echo $lang['srv_chart_skin_warning'];
echo '</div>';
}
echo '<script type="text/javascript" charset="utf-8"> echo '<script type="text/javascript" charset="utf-8">
$(document).ready(function() { $(document).ready(function() {
var f = $.farbtastic(\'#picker\'); var f = $.farbtastic(\'#picker\');
@ -10415,9 +10408,9 @@ class SurveyChart {
echo '<div id="chart_settings_profiles_left">'; echo '<div id="chart_settings_profiles_left">';
// Prednastavljeni skini // Prednastavljeni skini
echo '<span>'.$lang['srv_chart_skin_default'].':</span>'; echo '<p>'.$lang['srv_chart_skin_default'].':</p>';
echo '<span class="chart_profiles_holder" style="margin-bottom: 10px; height: 144px;">'; echo '<div class="chart_profiles_holder">';
echo '<span id="chart_profiles" class="chart_profiles select">'; echo '<div id="chart_profiles" class="chart_profiles select">';
echo '<div class="option'.($skin == '1ka' ? ' active' : '').'" id="chart_profile_skin_1ka" value="1ka">'.$lang['srv_chart_skin_1ka'].'</div>'; echo '<div class="option'.($skin == '1ka' ? ' active' : '').'" id="chart_profile_skin_1ka" value="1ka">'.$lang['srv_chart_skin_1ka'].'</div>';
echo '<div class="option'.($skin == 'lively' ? ' active' : '').'" id="chart_profile_skin_0" value="lively">'.$lang['srv_chart_skin_0'].'</div>'; echo '<div class="option'.($skin == 'lively' ? ' active' : '').'" id="chart_profile_skin_0" value="lively">'.$lang['srv_chart_skin_0'].'</div>';
@ -10429,30 +10422,30 @@ class SurveyChart {
echo '<div class="option'.($skin == 'red' ? ' active' : '').'" id="chart_profile_skin_4" value="red">'.$lang['srv_chart_skin_4'].'</div>'; echo '<div class="option'.($skin == 'red' ? ' active' : '').'" id="chart_profile_skin_4" value="red">'.$lang['srv_chart_skin_4'].'</div>';
echo '<div class="option'.($skin == 'multi' ? ' active' : '').'" id="chart_profile_skin_5" value="multi">'.$lang['srv_chart_skin_5'].'</div>'; echo '<div class="option'.($skin == 'multi' ? ' active' : '').'" id="chart_profile_skin_5" value="multi">'.$lang['srv_chart_skin_5'].'</div>';
echo '</span>'; echo '</div>';
echo '</span>'; echo '</div>';
// Custom kreirani skini // Custom kreirani skini
$custom_skins = self::getCustomSkins(); $custom_skins = self::getCustomSkins();
echo '<span>'.$lang['srv_chart_skin_custom'].':</span>'; echo '<p>'.$lang['srv_chart_skin_custom'].':</p>';
echo '<span class="chart_profiles_holder">'; echo '<div class="chart_profiles_holder">';
echo '<span id="chart_profiles_custom" class="chart_profiles select">'; echo '<div id="chart_profiles_custom" class="chart_profiles select">';
foreach ($custom_skins as $custom_skin ){ foreach ($custom_skins as $custom_skin ){
echo '<div class="option'.($skin == $custom_skin['id'] ? ' active' : '').'" id="chart_profile_skin_'.$custom_skin['id'].'" value="'.$custom_skin['id'].'">'.$custom_skin['name'].'</div>'; echo '<div class="option'.($skin == $custom_skin['id'] ? ' active' : '').'" id="chart_profile_skin_'.$custom_skin['id'].'" value="'.$custom_skin['id'].'">'.$custom_skin['name'].'</div>';
} }
echo '</span>'; echo '</div>';
echo '</span>'; echo '</div>';
// Ce je izbran custom skin imamo na dnu gumba brisi in preimenuj // Ce je izbran custom skin imamo na dnu gumba brisi in preimenuj
if(is_numeric($skin)){ if(is_numeric($skin)){
echo '<div class="button_holder">'; echo '<div class="button_holder">';
echo '<button class="medium white-blue" onClick="chart_skin_action(\'show_rename\'); return false;">'.$lang['srv_rename_profile'].'</button>'; echo '<button class="small white-blue" onClick="chart_skin_action(\'show_rename\'); return false;">'.$lang['srv_rename_profile'].'</button>';
echo '<button class="medium blue" onclick="chart_skin_action(\'show_delete\'); return false;">'.$lang['srv_delete_profile'].'</button>'; echo '<button class="small blue" onclick="chart_skin_action(\'show_delete\'); return false;">'.$lang['srv_delete_profile'].'</button>';
echo '</div>'; echo '</div>';
} }
@ -10461,6 +10454,8 @@ class SurveyChart {
echo '<div id="chart_settings_profiles_middle">'; echo '<div id="chart_settings_profiles_middle">';
echo '<p class="bottom8">'.$lang['srv_chart_skin_long2'].':</p>';
// ce je numeric je custom skin // ce je numeric je custom skin
if(is_numeric($skin)){ if(is_numeric($skin)){
@ -10472,7 +10467,7 @@ class SurveyChart {
else{ else{
// preview za default skine // preview za default skine
echo '<div id="div_chart_skin_previews">'; echo '<div id="div_chart_skin_previews">';
echo $lang['srv_chart_skin_preview'].':'; echo '<h2>'.$lang['srv_chart_skin_preview'].'</h2>';
self::displayChartSkinPreview($skin); self::displayChartSkinPreview($skin);
echo '</div>'; echo '</div>';
@ -10488,7 +10483,7 @@ class SurveyChart {
} }
// reset na default barvo // reset na default barvo
echo '<br /><span class="as_link clr" onClick="chartAdvancedSettingsSetColor(\''.(is_numeric($skin) ? implode("_",$colors) : $skin).'\')">'.$lang['srv_chart_advanced_default_color'].'</span>'; echo '<p class="as_link top8" onClick="chartAdvancedSettingsSetColor(\''.(is_numeric($skin) ? implode("_",$colors) : $skin).'\')">'.$lang['srv_chart_advanced_default_color2'].'</p>';
echo '</div>'; #middle echo '</div>'; #middle
@ -10498,11 +10493,18 @@ class SurveyChart {
echo '<div id="chart_custom_skin">'; echo '<div id="chart_custom_skin">';
echo '<div id="picker"></div>'; echo '<div id="picker"></div>';
echo '</div>';
echo '</div>'; #right echo '</div>'; #right
echo '</div>'; #wrap echo '</div>'; #wrap
echo '</div>'; // Opozorilo - privzetih ne morejo spreminjati
if(!is_numeric($skin)){
echo '<div id="chart_skin_note">';
echo $lang['srv_chart_skin_warning'];
echo '</div>';
}
// cover Div // cover Div
@ -10552,8 +10554,8 @@ class SurveyChart {
echo '<input id="deleteChartSkinId" type="hidden" value="' . $custom_skin['id'] . '" />'."\n"; echo '<input id="deleteChartSkinId" type="hidden" value="' . $custom_skin['id'] . '" />'."\n";
echo '<div class="button_holder">'; echo '<div class="button_holder">';
echo '<button class="medium white-blue" onClick="zoomProfileAction(\'cancelDelete\'); return false;">'.$lang['srv_close_profile'].'</button>'; echo '<button class="medium white-blue" onClick="chart_skin_action(\'cancel_delete\'); return false;">'.$lang['srv_close_profile'].'</button>';
echo '<button class="medium blue" onclick="zoomProfileAction(\'doDelete\'); return false;">'.$lang['srv_delete_profile_yes'].'</button>'; echo '<button class="medium blue" onclick="chart_skin_action(\'delete\'); return false;">'.$lang['srv_delete_profile_yes'].'</button>';
echo '</div>'; echo '</div>';
echo '</div>'; echo '</div>';

View File

@ -4830,6 +4830,7 @@ $lang = array (
"srv_chart_skin_7" => "Pastel", "srv_chart_skin_7" => "Pastel",
"srv_chart_skin_-1" => "Po meri", "srv_chart_skin_-1" => "Po meri",
"srv_chart_skin_long" => "Nabor barv", "srv_chart_skin_long" => "Nabor barv",
"srv_chart_skin_long2" => "Barve v naboru",
"srv_chart_skin_info" => "(Naknadno lahko urejate barve za vsak graf posebej)", "srv_chart_skin_info" => "(Naknadno lahko urejate barve za vsak graf posebej)",
"srv_chart_skin_preview" => "Predogled barv", "srv_chart_skin_preview" => "Predogled barv",
"srv_chart_skin_default" => "Standardni nabori barv", "srv_chart_skin_default" => "Standardni nabori barv",
@ -4871,6 +4872,7 @@ $lang = array (
"srv_chart_advancedLink_recoding" => "Rekodiranje", "srv_chart_advancedLink_recoding" => "Rekodiranje",
"srv_chart_advancedLink_limits" => "Meje", "srv_chart_advancedLink_limits" => "Meje",
"srv_chart_advanced_default_color" => "Ponastavi na privzeto", "srv_chart_advanced_default_color" => "Ponastavi na privzeto",
"srv_chart_advanced_default_color2" => "Ponastavi spremembe barv",
"srv_chart_advanced_skin" => "Izberi skin", "srv_chart_advanced_skin" => "Izberi skin",
"srv_chart_ttest_title" => "Povprečna vrednost za", "srv_chart_ttest_title" => "Povprečna vrednost za",
"srv_chart_settings_fullScale" => "Polna skala", "srv_chart_settings_fullScale" => "Polna skala",

View File

@ -4803,6 +4803,7 @@ $lang = array (
"srv_chart_skin_7" => "Pastel", "srv_chart_skin_7" => "Pastel",
"srv_chart_skin_-1" => "Custom", "srv_chart_skin_-1" => "Custom",
"srv_chart_skin_long" => "Color palette", "srv_chart_skin_long" => "Color palette",
"srv_chart_skin_long2" => "Colors in palette",
"srv_chart_skin_info" => "(Subsequently, you can edit the color palette for each chart separately)", "srv_chart_skin_info" => "(Subsequently, you can edit the color palette for each chart separately)",
"srv_chart_skin_preview" => "Color preview", "srv_chart_skin_preview" => "Color preview",
"srv_chart_skin_default" => "Standard color themes", "srv_chart_skin_default" => "Standard color themes",
@ -4844,6 +4845,7 @@ $lang = array (
"srv_chart_advancedLink_recoding" => "Recoding", "srv_chart_advancedLink_recoding" => "Recoding",
"srv_chart_advancedLink_limits" => "Number limits", "srv_chart_advancedLink_limits" => "Number limits",
"srv_chart_advanced_default_color" => "Reset to default", "srv_chart_advanced_default_color" => "Reset to default",
"srv_chart_advanced_default_color2" => "Reset color changes",
"srv_chart_advanced_skin" => "Select skin", "srv_chart_advanced_skin" => "Select skin",
"srv_chart_ttest_title" => "Average value", "srv_chart_ttest_title" => "Average value",
"srv_chart_settings_fullScale" => "Full scale", "srv_chart_settings_fullScale" => "Full scale",

File diff suppressed because it is too large Load Diff

View File

@ -363,42 +363,6 @@ ul.vrednost_sort {
} }
.chart_profiles_holder {
width: 190px;
border: 1px solid $grey_normal;
height: 130px;
display: inline-block;
}
#chart_profiles {
overflow: auto;
cursor: pointer;
width: 190px;
display: inline-block;
height: 144px;
.option {
padding: 1px;
}
.active {
background-color: $strong_blue_super_darken;
color: white;
border-bottom: 1px solid $grey_normal;
}
}
#chart_profiles_custom {
overflow: auto;
cursor: pointer;
width: 190px;
display: inline-block;
height: 130px;
.option {
padding: 1px;
}
.active {
background-color: $strong_blue_super_darken;
color: white;
border-bottom: 1px solid $grey_normal;
}
}
#chart_settings_profiles_right { #chart_settings_profiles_right {
#div_chart_skin_previews { #div_chart_skin_previews {
position: fixed; position: fixed;

View File

@ -431,55 +431,14 @@ ul.vrednost_sort {
text-indent: 0px; text-indent: 0px;
} }
.chart_profiles_holder {
width: 190px;
border: 1px solid $gray;
height: 130px;
display: inline-block;
margin-top: 4px;
}
#chart_profiles {
overflow: auto;
cursor: pointer;
width: 190px;
display: inline-block;
height: 144px;
.option {
padding: 1px;
}
.active {
background-color: $blue;
color: white;
border-bottom: 1px solid $gray;
}
}
#chart_profiles_custom {
overflow: auto;
cursor: pointer;
width: 190px;
display: inline-block;
height: 130px;
.option {
padding: 1px;
}
.active {
background-color: $blue;
color: white;
border-bottom: 1px solid $gray;
}
}
#chart_settings_profiles_middle { #chart_settings_profiles_middle {
#div_chart_skin_previews { #div_chart_skin_previews {
position: fixed; position: fixed;
top: 100px; top: 193px;
left: 90px; left: 90px;
width: 200px; width: 200px;
height: 140px; padding: 16px;
padding: 10px;
background-color: white; background-color: white;
border: 4px solid $gray;
box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;
-moz-box-shadow: 0 0 20px black; -moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black;
@ -497,19 +456,8 @@ ul.vrednost_sort {
} }
} }
} }
.form-item {
padding: 3px;
width: 200px;
}
} }
#chart_settings_profiles_right {
.colorwell {
width: 265px;
height:265px;
font-size: 11px;
}
}
#newChartSkin { #newChartSkin {
display: none; display: none;
position: absolute; position: absolute;

View File

@ -23,52 +23,110 @@
#chart_skin_note { #chart_skin_note {
width: auto; width: auto;
padding: 12px 16px; padding: 10px;
border: 1px solid $gray; border: 1px solid $gray;
background-color: $light-gray; background-color: $light-gray;
border-radius: 2px; border-radius: 2px;
margin-bottom: 16px;
} }
#chart_settings_profiles_wrap { #chart_settings_profiles_wrap {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 64px;
#chart_settings_profiles_left { #chart_settings_profiles_left {
width: 33%; width: 265px;
margin-right: 64px;
.chart_profiles_holder {
width: 100%;
border: 1px solid $gray;
height: 135px;
margin-top: 4px;
margin-bottom: 16px;
#chart_profiles,
#chart_profiles_custom {
width: 100%;
overflow: auto;
cursor: pointer;
display: inline-block;
height: 100%;
.option {
padding: 4px;
border-bottom: 1px solid $gray;
}
.active {
color: $blue;
background-color: $light-blue;
}
}
}
.button_holder { .button_holder {
flex-direction: column;
gap: 8px; gap: 8px;
justify-content: center !important; justify-content: space-between;
padding: 0 !important;
border: none !important;
margin-bottom: 8px;
button { button {
width: 100%; min-width: 0;
margin: 0;
} }
} }
} }
#chart_settings_profiles_middle { #chart_settings_profiles_middle {
width: 33%; display: flex;
flex-direction: column;
width: 200px;
.form-item {
width: 200px;
label {
margin-right: 8px;
}
}
.colorwell {
width: 70px;
height: 28px;
font-size: 14px;
margin-bottom: 8px;
}
} }
#chart_settings_profiles_right{ #chart_settings_profiles_right{
width: 33%; width: 385px;
display: flex;
#chart_custom_skin { align-items: center;
justify-content: center;
#picker {
#farbtastic {
width: 265px;
height: 265px;
}
}
}
} }
} }
.button_holder {
border-top: 1px solid $gray;
padding-top: 16px;
}
}
#chart_skin_previews {
h2 {
width: 100%;
margin-bottom: 16px;
padding-bottom: 8px;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
border-bottom: 1px $gray solid;
margin-block-start: 0;
}
} }
/* popup edit chart */ /* popup edit chart */
@ -142,16 +200,6 @@
} }
} }
} }
.form-item {
padding: 3px;
width: 200px;
}
.colorwell {
width: 70px;
height: 20px;
font-size: 11px;
}
} }
/*color picker*/ /*color picker*/