Explorar el Código

add css by check and radio buttons - refs BT#12692

Alex Aragon hace 7 años
padre
commit
e207825de3

+ 97 - 0
app/Resources/public/css/themes/rainbow/default.css

@@ -895,6 +895,8 @@ legend{
 .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
     width: 350px;
     margin-bottom: 5px;
+    margin-left: 15px;
+    margin-top: 5px;
 }
 .question_options ul.exercise-draggable-answer{
     list-style: none;
@@ -1044,6 +1046,101 @@ svg circle{
     background: linear-gradient(to bottom, #9dd53a 0%,#7cbc0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
 }
+@font-face {
+  font-family: 'icomoon';
+  src:url('icons/icomoon.eot?-8aafzo');
+  src:url('icons/icomoon.eot?#iefix-8aafzo') format('embedded-opentype'),
+    url('icons/icomoon.woff?-8aafzo') format('woff'),
+    url('icons/icomoon.ttf?-8aafzo') format('truetype'),
+    url('icons/icomoon.svg?-8aafzo#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+.icon-checkradios-checkmark, .icon-checkradios-circle{
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/*Icon Placeholder*/
+.checkradios-checkbox:after,.checkradios-radio:after{
+  content:"";
+  height:100%;
+  width:100%;
+  position:relative;
+  display:block;
+  vertical-align:bottom;
+}
+/*Icons*/
+.icon-checkradios-checkmark:before {
+  content: "\e600";
+  color: #96BD0D;
+}
+.icon-checkradios-circle:before {
+  content: "\e601";
+  color: #96BD0D;
+}
+/*
+    Default Styles for checkradios
+*/
+.checkradios-checkbox, .checkradios-radio{
+  font-size:16px;
+  position:relative;
+  display:inline-block;
+  vertical-align:bottom;
+  text-align:center;
+  border:2px solid #162A83;
+  color:#162A83;
+  width:1em;
+  height:1em;
+  cursor:pointer;
+  padding:0.2em;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  overflow:hidden;
+}
+.checkradios-radio{
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+}
+/*Focus*/
+.checkradios-checkbox.focus, .checkradios-radio.focus{
+  -webkit-box-shadow:0px 0px 3px rgba(22,150,255,0.9);
+  -moz-box-shadow:0px 0px 3px rgba(22,150,255,0.9);
+  box-shadow:0px 0px 3px rgba(22,150,255,0.9);
+  border-color:#1696f1;
+}
+/*Hide original*/
+.checkradios-checkbox input[type=checkbox], .checkradios-radio input[type=radio]{
+  margin:0;
+  position:absolute;
+  top:0;
+  left:-9999%;
+  width:100%;
+  height:100%;
+  position:absolute;
+  display:inline-block;
+  vertical-align:bottom;
+}
+.radio {
+    display: block;
+    width: 100%;
+}
+.radio .checkradios-radio{
+    display: inline-block;
+}
+.radio p{
+    display: inline-block;
+    margin: 0;
+}
 /* Large desktop */
 @media (min-width: 1200px) {
 

BIN
app/Resources/public/css/themes/rainbow/icons/icomoon.eot


+ 12 - 0
app/Resources/public/css/themes/rainbow/icons/icomoon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#xe600;" d="M432 416l-240-240-112 112-80-80 192-192 320 320z" />
+<glyph unicode="&#xe601;" d="M438.857 221.714q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+</font></defs></svg>

BIN
app/Resources/public/css/themes/rainbow/icons/icomoon.ttf


BIN
app/Resources/public/css/themes/rainbow/icons/icomoon.woff


+ 370 - 0
app/Resources/public/css/themes/rainbow/js/jquery.checkradios.js

@@ -0,0 +1,370 @@
+/*
+	CHECKRADIOS - jQuery plugin to allow custom styling of checkboxes
+	by Chris McGuckin (https://github.com/cosmicwheels)
+	
+	
+	License: MIT (http://opensource.org/licenses/MIT)
+	
+	
+	Credits:
+	---------------------------------------------------------------------------------
+	
+	icomoon (http://icomoon.io/)
+	
+	Please refer to the icomoon website for the license regarding their icons.
+	
+	---------------------------------------------------------------------------------
+	
+	Fontawesome (http://fortawesome.github.io/Font-Awesome/)
+	
+	Please refer to the fontawesome website for the license regarding their icons.
+	
+	---------------------------------------------------------------------------------
+	
+	Stephan Richter (https://github.com/strichter)
+	
+	Thanks to Stephan for pointing out and helping to add the triggering of events 
+	to help further mimic the checkboxes and radios as well as providing other
+	important bug fixes.
+	
+	---------------------------------------------------------------------------------
+	---------------------------------------------------------------------------------
+	
+
+*/
+(function ($) {
+
+
+	$.fn.checkradios = function (options) {
+
+		var $elements = this;
+
+		//Default Settings
+		var settings = $.extend({
+
+			checkbox: {
+
+				iconClass: 'icon-checkradios-checkmark'
+
+			},
+
+			radio: {
+
+				iconClass: 'icon-checkradios-circle'
+
+			},
+
+
+			onChange: function (checked, $element, $realElement) {}
+
+		}, options);
+
+
+		// Functionality
+		var form = {
+
+			checkbox: function ($checkbox) {
+				
+
+				var THIS = this;
+
+				//Make sure checkradios isnt already in use
+				if (!$checkbox.parent().hasClass('checkradios-checkbox')) {
+
+					//Get the elements classes
+					var classes = $checkbox.attr('class');
+
+					if (classes === undefined) {
+
+						classes = '';
+
+					}
+
+					//Wrap the input
+					var $item = $checkbox.wrap('<div class="checkradios-checkbox ' + classes + '"/>');
+
+					//Get the new checkbox
+					var $holder = $item.parent();
+
+					//Check if box is checked
+					if ($item.is(':checked')) {
+
+						THIS.checkboxEnable($item);
+
+					} else {
+
+						THIS.checkboxDisable($item);
+
+					}
+
+					//Add keyboard support
+					$checkbox.keypress(function (e) {
+
+						var key = e.keyCode;
+
+						//On enter/return or space
+						if ((key < 1) || (key == 13) || (key == 32)) {
+
+							$holder.click();
+
+						}
+
+					});
+
+
+					//Add tabbing support
+					$checkbox.on({
+
+						focusin: function () {
+
+							$holder.addClass('focus');
+
+						},
+
+						focusout: function () {
+
+							var $this = $(this);
+
+							setTimeout(function () {
+
+								if (!$this.is(':focus')) {
+
+									$holder.removeClass('focus');
+
+								}
+
+							}, 10);
+
+						}
+					});
+
+
+					$holder.mousedown(function () {
+
+						setTimeout(function () {
+
+							//Add focus
+							$checkbox.focus();
+
+						}, 10);
+
+					});
+
+
+					//Disable usual click functionality
+					$checkbox.click(function (e) {
+
+						e.stopPropagation();
+						e.preventDefault();
+
+					});
+
+
+					//On button click
+					$holder.click(function () {
+
+						//Add check
+						if ($item.is(':checked')) {
+
+							THIS.checkboxDisable($item);
+
+							//Callback
+							settings.onChange(false, $holder, $item);
+
+						} else {
+
+							THIS.checkboxEnable($item);
+
+							//Callback
+							settings.onChange(true, $holder, $item);
+
+						}
+
+						return false;
+
+					});
+
+				}
+
+			},
+
+
+			radio: function ($radio) {
+
+				var THIS = this;
+
+				//Make sure checkradios isnt already in use
+				if (!$radio.parent().hasClass('checkradios-radio')) {
+
+					//Get the elements classes
+					var classes = $radio.attr('class');
+
+					if (classes === undefined) {
+
+						classes = '';
+
+					}
+
+					//Wrap the input
+					var $item = $radio.wrap('<div class="checkradios-radio ' + classes + '"/>');
+
+					//Get the new checkbox
+					var $holder = $item.parent();
+
+					//Check if box is checked
+					if ($item.is(':checked')) {
+
+						THIS.radioEnable($item);
+
+					} else {
+
+						THIS.radioDisable($item);
+
+					}
+
+					//Add tabbing suppot
+					$radio.on({
+						
+						focusin: function () {
+							
+							//Add focus class
+							$holder.addClass('focus');
+							
+							
+							THIS.radioEnable($item);
+
+							//Get group Name
+							var radio_name = $item.attr('name');
+
+							var $group = $('input[name="' + radio_name + '"]');
+
+							//Set checked/unchecked for each element in group
+							$group.each(function () {
+								
+								if ($(this).is(':checked')) {
+									
+									THIS.radioEnable($(this));
+									//Callback
+									settings.onChange(true, $(this).parent(), $(this));
+									
+								} else {
+									
+									THIS.radioDisable($(this));
+									//Callback
+									settings.onChange(false, $(this).parent(), $(this));
+									
+								}
+
+							});
+
+						},
+
+						focusout: function () {
+							
+							var $this = $(this);
+
+							setTimeout(function () {
+								
+								if (!$this.is(':focus')) {
+									
+									$holder.removeClass('focus');
+									
+								}
+								
+							}, 10);
+							
+						}
+					});
+
+					$holder.click(function () {
+						
+						//Add focus
+						$radio.focus();
+						
+					});
+
+					//Disable usual click functionality
+					$radio.click(function (e) {
+						
+						e.stopPropagation();
+						e.preventDefault();
+						
+					});
+
+				}
+			},
+
+			/*Private*/
+
+			checkboxEnable: function ($checkbox) {
+				
+				$checkbox.parent().removeClass(settings.checkbox.iconClass);
+				$checkbox.parent().removeClass('unchecked');
+
+				$checkbox.parent().addClass(settings.checkbox.iconClass);
+				$checkbox.parent().addClass('checked');
+				$checkbox.prop('checked', true).trigger('change');
+				
+					
+			},
+
+			checkboxDisable: function ($checkbox) {
+				
+				$checkbox.parent().removeClass(settings.checkbox.iconClass);
+				$checkbox.parent().addClass('unchecked');
+				$checkbox.prop('checked', false).trigger('change');
+				
+				
+			},
+
+			radioEnable: function ($radio) {
+				
+				$radio.parent().removeClass(settings.radio.iconClass);
+				$radio.parent().removeClass('unchecked');
+
+				$radio.parent().addClass(settings.radio.iconClass);
+				$radio.parent().addClass('checked');
+				$radio.prop('checked', true).trigger('change');
+				
+				
+					
+			},
+
+			radioDisable: function ($radio) {
+				
+				$radio.parent().removeClass('checked');
+				$radio.parent().removeClass(settings.radio.iconClass);
+				$radio.parent().addClass('unchecked');
+				$radio.prop('checked', false).trigger('change');
+				
+				
+			}
+		};
+
+		//Loop through elements
+		$elements.each(function (i, val) {
+
+			var $this = $(this);
+
+			//Check for checkbox
+			if ($this.is("input[type=checkbox]")) {
+				
+				//Setup checkboxes
+				form.checkbox($this);
+				
+			}
+
+			//Check for radio
+			if ($this.is("input[type=radio]")) {
+				
+				//Setup checkboxes
+				form.radio($this);
+				
+			}
+
+			return this;
+		});
+
+	};
+
+}(jQuery));

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 33 - 0
app/Resources/public/css/themes/rainbow/js/jquery.checkradios.min.js


+ 5 - 0
app/Resources/public/css/themes/rainbow/learnpath.css

@@ -457,4 +457,9 @@ table.lp_overview img {
 #scorm-panel .panel-parent .section-list li.scorm_not_attempted.scorm_item_normal{
     background: url(images/not-completed.png) no-repeat  #ECF0F1 55px center;
 }
+#scorm-panel .panel-parent .section-list li.scorm_completed.scorm_item_normal.scorm_highlight,
+#scorm-panel .panel-parent .section-list li.scorm_not_attempted.scorm_item_normal.scorm_highlight
+{
+    background: url(images/completed-active.png) no-repeat  #772583 55px center;
+}
 /* nuevo css */

+ 3 - 3
main/inc/lib/exercise.lib.php

@@ -305,7 +305,7 @@ class ExerciseLib
                 $numAnswer = $objAnswerTmp->selectAutoId($answerId);
                 $comment = $objAnswerTmp->selectComment($answerId);
                 $attributes = array();
-
+                
                 switch ($answerType) {
                     case UNIQUE_ANSWER:
                         //no break
@@ -365,7 +365,7 @@ class ExerciseLib
                             $attributes['style'] = 'display: none;';
                             $answer = '<div class="thumbnail">'.$answer.'</div>';
                         }
-
+                        $attributes['class'] = 'checkradios';
                         $answer_input .= '<label class="radio '.$hidingClass.'">';
                         $answer_input .= Display::input(
                             'radio',
@@ -418,7 +418,7 @@ class ExerciseLib
 
                         if ($answerType == MULTIPLE_ANSWER || $answerType == GLOBAL_MULTIPLE_ANSWER) {
                             $s .= '<input type="hidden" name="choice2['.$questionId.']" value="0" />';
-
+                            $attributes['class'] = 'checkradios';
                             $answer_input = '<label class="checkbox">';
                             $answer_input .= Display::input(
                                 'checkbox',

+ 2 - 0
main/template/rainbow/layout/header.js.tpl

@@ -1,3 +1,4 @@
+<script src="{{ _p.web_css_theme }}js/jquery.checkradios.min.js"></script>
 <script>
 {% if constant('CHAMILO_LOAD_WYSIWYG') %}
     // External plugins not part of the default Ckeditor package.
@@ -91,6 +92,7 @@ function doneResizing() {
 };
 
 $(document).ready(function() {
+    $('.checkradios').checkradios();
     $("#open-view-list").click(function(){
         $("#student-list-work").fadeIn(300);
     });

Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio