[Redizajn 1KA] Popupi: Analize > Grafi > Nastavitve - Barve [V DELU - 2]

This commit is contained in:
tejagerjovic 2022-06-07 13:23:08 +02:00
parent 5efdaddb92
commit 9e73830449
5 changed files with 101 additions and 47 deletions

View File

@ -10384,7 +10384,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>';
echo '<p class="graf_naknadno">'.$lang['srv_chart_skin_info'].'</p>';
// Opozorilo na vrhu
if(!is_numeric($skin)){
@ -10412,8 +10411,9 @@ class SurveyChart {
</script>';
echo '<div id="chart_settings_profiles_wrap">';
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;">';
@ -10449,14 +10449,17 @@ class SurveyChart {
// Ce je izbran custom skin imamo na dnu gumba brisi in preimenuj
if(is_numeric($skin)){
echo '<a href="#" onclick="chart_skin_action(\'show_rename\'); return false;">'.$lang['srv_rename_profile'].'</a><br/>'."\n";
echo '<a href="#" onclick="chart_skin_action(\'show_delete\'); return false;">'.$lang['srv_delete_profile'].'</a>'."\n";
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 '</div>';
}
echo '</div>';
echo '</div>'; #left
echo '<div id="chart_settings_profiles_right">';
echo '<div id="chart_settings_profiles_middle">';
// ce je numeric je custom skin
if(is_numeric($skin)){
@ -10475,12 +10478,6 @@ class SurveyChart {
$default_colors = self::getDefaultColors($skin);
}
// Izbira custom skina
echo '<div id="chart_custom_skin">';
echo ' <div id="picker" style="float: right;"></div>';
for($i=0; $i<7; $i++){
$name = 'color'.($i+1);
@ -10492,8 +10489,18 @@ 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 '</div>'; #middle
echo '<div id="chart_settings_profiles_right">';
// Izbira custom skina
echo '<div id="chart_custom_skin">';
echo '<div id="picker"></div>';
echo '</div>';
echo '</div>'; #right
echo '</div>'; #wrap
echo '</div>';

View File

@ -29267,7 +29267,7 @@ ul.vrednost_sort input[type=text] {
border-bottom: 1px solid #E5E5E5;
}
#chart_settings_profiles_right #div_chart_skin_previews {
#chart_settings_profiles_middle #div_chart_skin_previews {
position: fixed;
top: 100px;
left: 90px;
@ -29280,22 +29280,23 @@ ul.vrednost_sort input[type=text] {
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
}
#chart_settings_profiles_right .div_chart_skin_preview {
#chart_settings_profiles_middle .div_chart_skin_preview {
display: none;
width: 200px;
height: 120px;
}
#chart_settings_profiles_right .div_chart_skin_preview table tr td {
#chart_settings_profiles_middle .div_chart_skin_preview table tr td {
width: 50px;
height: 18px;
}
#chart_settings_profiles_right .form-item {
#chart_settings_profiles_middle .form-item {
padding: 3px;
width: 200px;
}
#chart_settings_profiles_right .colorwell {
width: 70px;
height: 20px;
width: 265px;
height: 265px;
font-size: 11px;
}
@ -31267,9 +31268,7 @@ input#endDate {
display: none;
position: relative;
z-index: 90;
width: 650px;
height: 500px;
padding: 10px;
width: 850px;
}
#div_chart_settings_profiles .as_link {
color: #1E88E5 !important;
@ -31287,15 +31286,31 @@ input#endDate {
border-radius: 2px;
margin-bottom: 16px;
}
#div_chart_settings_profiles #chart_settings_profiles_left {
float: left;
width: 30%;
height: 200px;
#div_chart_settings_profiles #chart_settings_profiles_wrap {
display: flex;
flex-direction: row;
gap: 64px;
}
#div_chart_settings_profiles #chart_settings_profiles_right {
padding: 20px;
width: 60%;
float: right;
#div_chart_settings_profiles #chart_settings_profiles_wrap #chart_settings_profiles_left {
width: 33%;
}
#div_chart_settings_profiles #chart_settings_profiles_wrap #chart_settings_profiles_left .button_holder {
flex-direction: column;
gap: 8px;
justify-content: center !important;
}
#div_chart_settings_profiles #chart_settings_profiles_wrap #chart_settings_profiles_left .button_holder button {
width: 100%;
}
#div_chart_settings_profiles #chart_settings_profiles_wrap #chart_settings_profiles_middle {
width: 33%;
}
#div_chart_settings_profiles #chart_settings_profiles_wrap #chart_settings_profiles_right {
width: 33%;
}
#div_chart_settings_profiles #chart_settings_profiles_wrap #chart_settings_profiles_right #chart_custom_skin #picker #farbtastic {
width: 265px;
height: 265px;
}
/* popup edit chart */

View File

@ -645,4 +645,4 @@ div#div_analiza_archive_name {
}
}
}
}
}

View File

@ -469,8 +469,9 @@ ul.vrednost_sort {
border-bottom: 1px solid $gray;
}
}
#chart_settings_profiles_right {
#div_chart_skin_previews {
#chart_settings_profiles_middle {
#div_chart_skin_previews {
position: fixed;
top: 100px;
left: 90px;
@ -500,9 +501,12 @@ ul.vrednost_sort {
padding: 3px;
width: 200px;
}
}
#chart_settings_profiles_right {
.colorwell {
width: 70px;
height: 20px;
width: 265px;
height:265px;
font-size: 11px;
}
}

View File

@ -9,9 +9,7 @@
position: relative;
z-index: 90;
width: 650px;
height: 500px;
padding: 10px;
width: 850px;
.as_link {
color: $blue !important;
@ -31,15 +29,45 @@
border-radius: 2px;
margin-bottom: 16px;
}
#chart_settings_profiles_left {
float: left;
width: 30%;
height: 200px;
}
#chart_settings_profiles_right {
padding: 20px;
width: 60%;
float: right;
#chart_settings_profiles_wrap {
display: flex;
flex-direction: row;
gap: 64px;
#chart_settings_profiles_left {
width: 33%;
.button_holder {
flex-direction: column;
gap: 8px;
justify-content: center !important;
button {
width: 100%;
}
}
}
#chart_settings_profiles_middle {
width: 33%;
}
#chart_settings_profiles_right{
width: 33%;
#chart_custom_skin {
#picker {
#farbtastic {
width: 265px;
height: 265px;
}
}
}
}
}
}