diff --git a/Configuracion.php b/Configuracion.php index fb31718..3c46a49 100644 --- a/Configuracion.php +++ b/Configuracion.php @@ -30,8 +30,8 @@ private $confNueva="inc/configuracion.new"; private $confAnterior="inc/configuracion.ant"; private $plantilla; - private $colorLat; - private $colorCen; + private $colorLateral; + private $colorFondo; public function ejecuta() { @@ -106,16 +106,16 @@ } break; case 'COLORLAT': - $this->colorLat=$valor; + $this->colorLateral=$valor; if ($grabar) { - $linea=str_replace($valor,$POST['COLORLAT'],$linea); - $this->colorLat=$_POST['COLORLAT']; + $linea=str_replace($valor,$POST['colorLat'],$linea); + $this->colorLateral=$_POST['colorLat']; } - case 'COLORCEN': - $this->colorCen=$valor; + case 'COLORFON': + $this->colorFondo=$valor; if ($grabar) { - $linea=str_replace($valor,$POST['COLORCEN'],$linea); - $this->colorCen=$_POST['COLORCEN']; + $linea=str_replace($valor,$POST['colorFon'],$linea); + $this->colorFondo=$_POST['colorFon']; } } } @@ -148,27 +148,43 @@ $salida.='
Preferencias
'; $salida.='Nombre del Centro'; $salida.='Número de filas'; - $salida.='Plantilla'; $salida.=''; $salida.=''; - $salida.='Estilo'; $salida.=''; $salida.=''; $salida.=''; - $salida.='' + $salida.='Color Lateral'; + $salida.='Color Fondo'; $salida.='
Base de datos
'; $salida.='Servidor'; $salida.='Base de datos'; @@ -176,101 +192,20 @@ $salida.='Clave'; $salida.='

'; $salida.=''; + $salida.=""; return $salida; } } -?> -

Bootstrap 3 form

-
-
- -
- -
-
-
-
-
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- - -
-
-
- - - - - - - - - - - +?> \ No newline at end of file diff --git a/css/jquery.simplecolorpicker-glyphicons.css b/css/jquery.simplecolorpicker-glyphicons.css new file mode 100755 index 0000000..cf90c87 --- /dev/null +++ b/css/jquery.simplecolorpicker-glyphicons.css @@ -0,0 +1,13 @@ +.simplecolorpicker.glyphicons span.color[data-selected]:after { + /* Taken from glyphicon class. */ + position: relative; + top: 1px; + font-family: 'Glyphicons Halflings'; + line-height: .9; + -webkit-font-smoothing: antialiased; + + content: '\e013'; /* Ok/check mark */ + + margin-right: 1px; + margin-left: 1px; +} diff --git a/css/jquery.simplecolorpicker.css b/css/jquery.simplecolorpicker.css new file mode 100755 index 0000000..001a5ae --- /dev/null +++ b/css/jquery.simplecolorpicker.css @@ -0,0 +1,87 @@ +/* + * Very simple jQuery Color Picker + * https://github.com/tkrotoff/jquery-simplecolorpicker + * + * Copyright (C) 2012-2013 Tanguy Krotoff + * + * Licensed under the MIT license + */ + +/** + * Inspired by Bootstrap Twitter. + * See https://github.com/twbs/bootstrap/blob/master/less/navbar.less + * See https://github.com/twbs/bootstrap/blob/master/less/dropdowns.less + */ + +.simplecolorpicker.picker { + position: absolute; + top: 100%; + left: 0; + z-index: 1051; /* Above Bootstrap modal (@zindex-modal = 1050) */ + display: none; + float: left; + + min-width: 160px; + max-width: 283px; /* @popover-max-width = 276px + 7 */ + + padding: 5px 0 0 5px; + margin: 2px 0 0; + list-style: none; + background-color: #fff; /* @dropdown-bg */ + + border: 1px solid #ccc; /* @dropdown-fallback-border */ + border: 1px solid rgba(0, 0, 0, .15); /* @dropdown-border */ + + -webkit-border-radius: 4px; /* @border-radius-base */ + -moz-border-radius: 4px; + border-radius: 4px; + + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.simplecolorpicker.inline { + display: inline-block; + padding: 6px 0; +} + +.simplecolorpicker span { + margin: 0 5px 5px 0; +} + +.simplecolorpicker.icon, +.simplecolorpicker span.color { + display: inline-block; + + cursor: pointer; + border: 1px solid transparent; +} + +.simplecolorpicker.icon:after, +.simplecolorpicker span.color:after { + content: '\00a0\00a0\00a0\00a0'; /* Spaces */ +} + +.simplecolorpicker span.color[data-disabled]:hover { + cursor: not-allowed; + border: 1px solid transparent; +} + +.simplecolorpicker span.color:hover, +.simplecolorpicker span.color[data-selected], +.simplecolorpicker span.color[data-selected]:hover { + border: 1px solid #222; /* @gray-dark */ +} +.simplecolorpicker span.color[data-selected]:after { + color: #fff; +} + +/* Vertical separator, replaces optgroup. */ +.simplecolorpicker span.vr { + border-left: 1px solid #222; /* @gray-dark */ +} diff --git a/css/jquery.simplecolorpicker.js b/css/jquery.simplecolorpicker.js new file mode 100755 index 0000000..ac63238 --- /dev/null +++ b/css/jquery.simplecolorpicker.js @@ -0,0 +1,235 @@ +/* + * Very simple jQuery Color Picker + * https://github.com/tkrotoff/jquery-simplecolorpicker + * + * Copyright (C) 2012-2013 Tanguy Krotoff + * + * Licensed under the MIT license + */ + +(function($) { + 'use strict'; + + /** + * Constructor. + */ + var SimpleColorPicker = function(select, options) { + this.init('simplecolorpicker', select, options); + }; + + /** + * SimpleColorPicker class. + */ + SimpleColorPicker.prototype = { + constructor: SimpleColorPicker, + + init: function(type, select, options) { + var self = this; + + self.type = type; + + self.$select = $(select); + self.$select.hide(); + + self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options); + + self.$colorList = null; + + if (self.options.picker === true) { + var selectText = self.$select.find('> option:selected').text(); + self.$icon = $('' + + '').insertAfter(self.$select); + self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self)); + + self.$picker = $('').appendTo(document.body); + self.$colorList = self.$picker; + + // Hide picker when clicking outside + $(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self)); + self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self)); + } else { + self.$inline = $('').insertAfter(self.$select); + self.$colorList = self.$inline; + } + + // Build the list of colors + // + self.$select.find('> option').each(function() { + var $option = $(this); + var color = $option.val(); + + var isSelected = $option.is(':selected'); + var isDisabled = $option.is(':disabled'); + + var selected = ''; + if (isSelected === true) { + selected = ' data-selected'; + } + + var disabled = ''; + if (isDisabled === true) { + disabled = ' data-disabled'; + } + + var title = ''; + if (isDisabled === false) { + title = ' title="' + $option.text() + '"'; + } + + var role = ''; + if (isDisabled === false) { + role = ' role="button" tabindex="0"'; + } + + var $colorSpan = $('' + + ''); + + self.$colorList.append($colorSpan); + $colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self)); + + var $next = $option.next(); + if ($next.is('optgroup') === true) { + // Vertical break, like hr + self.$colorList.append(''); + } + }); + }, + + /** + * Changes the selected color. + * + * @param color the hexadecimal color to select, ex: '#fbd75b' + */ + selectColor: function(color) { + var self = this; + + var $colorSpan = self.$colorList.find('> span.color').filter(function() { + return $(this).data('color').toLowerCase() === color.toLowerCase(); + }); + + if ($colorSpan.length > 0) { + self.selectColorSpan($colorSpan); + } else { + console.error("The given color '" + color + "' could not be found"); + } + }, + + showPicker: function() { + var pos = this.$icon.offset(); + this.$picker.css({ + // Remove some pixels to align the picker icon with the icons inside the dropdown + left: pos.left - 6, + top: pos.top + this.$icon.outerHeight() + }); + + this.$picker.show(this.options.pickerDelay); + }, + + hidePicker: function() { + this.$picker.hide(this.options.pickerDelay); + }, + + /** + * Selects the given span inside $colorList. + * + * The given span becomes the selected one. + * It also changes the HTML select value, this will emit the 'change' event. + */ + selectColorSpan: function($colorSpan) { + var color = $colorSpan.data('color'); + var title = $colorSpan.prop('title'); + + // Mark this span as the selected one + $colorSpan.siblings().removeAttr('data-selected'); + $colorSpan.attr('data-selected', ''); + + if (this.options.picker === true) { + this.$icon.css('background-color', color); + this.$icon.prop('title', title); + this.hidePicker(); + } + + // Change HTML select value + this.$select.val(color); + }, + + /** + * The user clicked on a color inside $colorList. + */ + colorSpanClicked: function(e) { + // When a color is clicked, make it the new selected one (unless disabled) + if ($(e.target).is('[data-disabled]') === false) { + this.selectColorSpan($(e.target)); + this.$select.trigger('change'); + } + }, + + /** + * Prevents the mousedown event from "eating" the click event. + */ + mousedown: function(e) { + e.stopPropagation(); + e.preventDefault(); + }, + + destroy: function() { + if (this.options.picker === true) { + this.$icon.off('.' + this.type); + this.$icon.remove(); + $(document).off('.' + this.type); + } + + this.$colorList.off('.' + this.type); + this.$colorList.remove(); + + this.$select.removeData(this.type); + this.$select.show(); + } + }; + + /** + * Plugin definition. + * How to use: $('#id').simplecolorpicker() + */ + $.fn.simplecolorpicker = function(option) { + var args = $.makeArray(arguments); + args.shift(); + + // For HTML element passed to the plugin + return this.each(function() { + var $this = $(this), + data = $this.data('simplecolorpicker'), + options = typeof option === 'object' && option; + if (data === undefined) { + $this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options))); + } + if (typeof option === 'string') { + data[option].apply(data, args); + } + }); + }; + + /** + * Default options. + */ + $.fn.simplecolorpicker.defaults = { + // No theme by default + theme: '', + + // Show the picker or make it inline + picker: false, + + // Animation delay in milliseconds + pickerDelay: 0 + }; + +})(jQuery); diff --git a/inc/configuracion.inc b/inc/configuracion.inc index f39e842..b8f6606 100644 --- a/inc/configuracion.inc +++ b/inc/configuracion.inc @@ -33,4 +33,6 @@ define('NUMFILAS',17); // Número de registros a mostrar en las pantallas de con define('PAUSA',2);//Nº segundos de pausa para mostrar mensaje id insertado define('ESTILO','personal'); //Estilo de los iconos de edición (personal, personal, personal) define('PLANTILLA','bootstrap'); //Estilo de la plantilla y recursos a utilizar +define('COLORLAT', '#C4FAEC'); //Color de la barra de menú lateral +define('COLORFON', '#F3FEC8'); //Color del fondo de la pantalla ?> diff --git a/plant/bootstrap.html b/plant/bootstrap.html index d00d32a..767658a 100644 --- a/plant/bootstrap.html +++ b/plant/bootstrap.html @@ -15,8 +15,23 @@ + + - @@ -88,5 +103,6 @@ + \ No newline at end of file