[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 '<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">
$(document).ready(function() {
var f = $.farbtastic(\'#picker\');
@ -10415,9 +10408,9 @@ class SurveyChart {
echo '<div id="chart_settings_profiles_left">';
// Prednastavljeni skini
echo '<span>'.$lang['srv_chart_skin_default'].':</span>';
echo '<span class="chart_profiles_holder" style="margin-bottom: 10px; height: 144px;">';
echo '<span id="chart_profiles" class="chart_profiles select">';
echo '<p>'.$lang['srv_chart_skin_default'].':</p>';
echo '<div class="chart_profiles_holder">';
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 == '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 == 'multi' ? ' active' : '').'" id="chart_profile_skin_5" value="multi">'.$lang['srv_chart_skin_5'].'</div>';
echo '</span>';
echo '</span>';
echo '</div>';
echo '</div>';
// Custom kreirani skini
$custom_skins = self::getCustomSkins();
echo '<span>'.$lang['srv_chart_skin_custom'].':</span>';
echo '<span class="chart_profiles_holder">';
echo '<span id="chart_profiles_custom" class="chart_profiles select">';
echo '<p>'.$lang['srv_chart_skin_custom'].':</p>';
echo '<div class="chart_profiles_holder">';
echo '<div id="chart_profiles_custom" class="chart_profiles select">';
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 '</span>';
echo '</span>';
echo '</div>';
echo '</div>';
// Ce je izbran custom skin imamo na dnu gumba brisi in preimenuj
if(is_numeric($skin)){
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="medium blue" onclick="chart_skin_action(\'show_delete\'); return false;">'.$lang['srv_delete_profile'].'</button>';
echo '<button class="small white-blue" onClick="chart_skin_action(\'show_rename\'); return false;">'.$lang['srv_rename_profile'].'</button>';
echo '<button class="small blue" onclick="chart_skin_action(\'show_delete\'); return false;">'.$lang['srv_delete_profile'].'</button>';
echo '</div>';
}
@ -10461,6 +10454,8 @@ class SurveyChart {
echo '<div id="chart_settings_profiles_middle">';
echo '<p class="bottom8">'.$lang['srv_chart_skin_long2'].':</p>';
// ce je numeric je custom skin
if(is_numeric($skin)){
@ -10472,7 +10467,7 @@ class SurveyChart {
else{
// preview za default skine
echo '<div id="div_chart_skin_previews">';
echo $lang['srv_chart_skin_preview'].':';
echo '<h2>'.$lang['srv_chart_skin_preview'].'</h2>';
self::displayChartSkinPreview($skin);
echo '</div>';
@ -10488,7 +10483,7 @@ class SurveyChart {
}
// 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
@ -10499,10 +10494,17 @@ class SurveyChart {
echo '<div id="picker"></div>';
echo '</div>';
echo '</div>'; #right
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
@ -10552,8 +10554,8 @@ class SurveyChart {
echo '<input id="deleteChartSkinId" type="hidden" value="' . $custom_skin['id'] . '" />'."\n";
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 blue" onclick="zoomProfileAction(\'doDelete\'); return false;">'.$lang['srv_delete_profile_yes'].'</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="chart_skin_action(\'delete\'); return false;">'.$lang['srv_delete_profile_yes'].'</button>';
echo '</div>';
echo '</div>';

View File

@ -4830,6 +4830,7 @@ $lang = array (
"srv_chart_skin_7" => "Pastel",
"srv_chart_skin_-1" => "Po meri",
"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_preview" => "Predogled barv",
"srv_chart_skin_default" => "Standardni nabori barv",
@ -4871,6 +4872,7 @@ $lang = array (
"srv_chart_advancedLink_recoding" => "Rekodiranje",
"srv_chart_advancedLink_limits" => "Meje",
"srv_chart_advanced_default_color" => "Ponastavi na privzeto",
"srv_chart_advanced_default_color2" => "Ponastavi spremembe barv",
"srv_chart_advanced_skin" => "Izberi skin",
"srv_chart_ttest_title" => "Povprečna vrednost za",
"srv_chart_settings_fullScale" => "Polna skala",

View File

@ -4803,6 +4803,7 @@ $lang = array (
"srv_chart_skin_7" => "Pastel",
"srv_chart_skin_-1" => "Custom",
"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_preview" => "Color preview",
"srv_chart_skin_default" => "Standard color themes",
@ -4844,6 +4845,7 @@ $lang = array (
"srv_chart_advancedLink_recoding" => "Recoding",
"srv_chart_advancedLink_limits" => "Number limits",
"srv_chart_advanced_default_color" => "Reset to default",
"srv_chart_advanced_default_color2" => "Reset color changes",
"srv_chart_advanced_skin" => "Select skin",
"srv_chart_ttest_title" => "Average value",
"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 {
#div_chart_skin_previews {
position: fixed;

View File

@ -431,55 +431,14 @@ ul.vrednost_sort {
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 {
#div_chart_skin_previews {
position: fixed;
top: 100px;
top: 193px;
left: 90px;
width: 200px;
height: 140px;
padding: 10px;
padding: 16px;
background-color: white;
border: 4px solid $gray;
box-shadow: 0 0 20px black;
-moz-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 {
display: none;
position: absolute;

View File

@ -23,52 +23,110 @@
#chart_skin_note {
width: auto;
padding: 12px 16px;
padding: 10px;
border: 1px solid $gray;
background-color: $light-gray;
border-radius: 2px;
margin-bottom: 16px;
}
#chart_settings_profiles_wrap {
display: flex;
flex-direction: row;
gap: 64px;
#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 {
flex-direction: column;
gap: 8px;
justify-content: center !important;
justify-content: space-between;
padding: 0 !important;
border: none !important;
margin-bottom: 8px;
button {
width: 100%;
min-width: 0;
margin: 0;
}
}
}
#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{
width: 33%;
#chart_custom_skin {
#picker {
#farbtastic {
width: 265px;
height: 265px;
}
}
}
width: 385px;
display: flex;
align-items: center;
justify-content: center;
}
}
.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 */
@ -142,16 +200,6 @@
}
}
}
.form-item {
padding: 3px;
width: 200px;
}
.colorwell {
width: 70px;
height: 20px;
font-size: 11px;
}
}
/*color picker*/