Change label for errors

Add toggles
Add translation

public/css/bootstrap4-toggle.min.css

@@ -0,0 +1,42 @@
+/*\
+|*| ========================================================================
+|*| Bootstrap Toggle: bootstrap4-toggle.css v3.5.0
+|*| https://gitbrent.github.io/bootstrap-toggle/
+|*| ========================================================================
+|*| Copyright 2018-2019 Brent Ely
+|*| Licensed under MIT
+|*| ========================================================================
+\*/
+.btn-group-xs>.btn,.btn-xs{padding:.35rem .4rem .25rem;font-size:.875rem;line-height:.5;border-radius:.2rem}
+.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-1.25rem;margin-right:.35rem}
+.toggle{position:relative;overflow:hidden}
+.toggle.btn.btn-light,.toggle.btn.btn-outline-light{border-color:rgba(0,0,0,.15)}
+.toggle input[type=checkbox]{display:none}
+.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
+.toggle-group label,.toggle-group span{cursor:pointer}
+.toggle.off .toggle-group{left:-100%}
+.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
+.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0;box-shadow:none}
+.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px;background-color:#fff}
+.toggle.btn-outline-primary .toggle-handle{background-color:var(--primary);border-color:var(--primary)}
+.toggle.btn-outline-secondary .toggle-handle{background-color:var(--secondary);border-color:var(--secondary)}
+.toggle.btn-outline-success .toggle-handle{background-color:var(--success);border-color:var(--success)}
+.toggle.btn-outline-danger .toggle-handle{background-color:var(--danger);border-color:var(--danger)}
+.toggle.btn-outline-warning .toggle-handle{background-color:var(--warning);border-color:var(--warning)}
+.toggle.btn-outline-info .toggle-handle{background-color:var(--info);border-color:var(--info)}
+.toggle.btn-outline-light .toggle-handle{background-color:var(--light);border-color:var(--light)}
+.toggle.btn-outline-dark .toggle-handle{background-color:var(--dark);border-color:var(--dark)}
+.toggle[class*=btn-outline]:hover .toggle-handle{background-color:var(--light);opacity:.5}
+.toggle.btn{min-width:3.7rem;min-height:2.15rem}
+.toggle-on.btn{padding-right:1.5rem}
+.toggle-off.btn{padding-left:1.5rem}
+.toggle.btn-lg{min-width:5rem;min-height:2.815rem}
+.toggle-on.btn-lg{padding-right:2rem}
+.toggle-off.btn-lg{padding-left:2rem}
+.toggle-handle.btn-lg{width:2.5rem}
+.toggle.btn-sm{min-width:3.125rem;min-height:1.938rem}
+.toggle-on.btn-sm{padding-right:1rem}
+.toggle-off.btn-sm{padding-left:1rem}
+.toggle.btn-xs{min-width:2.19rem;min-height:1.375rem}
+.toggle-on.btn-xs{padding-right:.8rem}
+.toggle-off.btn-xs{padding-left:.8rem}

public/css/style.css

@@ -19,3 +19,6 @@ html, body {
     background-color: #f5f5f5;
 }
 
+input[type=checkbox] {
+    transform: scale(1.5);
+}

public/js/bootstrap4-toggle.min.js

@@ -0,0 +1,11 @@
+/*\
+|*| ========================================================================
+|*| Bootstrap Toggle: bootstrap4-toggle.js v3.5.0
+|*| https://gitbrent.github.io/bootstrap-toggle/
+|*| ========================================================================
+|*| Copyright 2018-2019 Brent Ely
+|*| Licensed under MIT
+|*| ========================================================================
+\*/
++function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="3.5.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"light",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size||"lg"===this.options.size?"btn-lg":"small"===this.options.size||"sm"===this.options.size?"btn-sm":"mini"===this.options.size||"xs"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b),e=a('<span class="toggle-handle btn btn-light">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle" role="button">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){if(this.$element.prop("disabled"))return!1;this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),a||this.trigger()},c.prototype.off=function(a){if(this.$element.prop("disabled"))return!1;this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),a||this.trigger()},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){a(this).find("input[type=checkbox]").bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
+//# sourceMappingURL=bootstrap4-toggle.min.js.map

templates/fediplan/schedule.html.twig

@@ -52,7 +52,7 @@
                         {{ form_label(form.content_warning) }}
                         {{ form_widget(form.content_warning, {'attr': {'class': 'form-control'}}) }}
                         {% if not form.content_warning.vars.errors is empty %}
-                            <span class="label label-danger">
+                            <span class="badge badge-danger">
                                 {% for errorItem in form.content_warning.vars.errors %}
                                     {{ errorItem.message }}
                                 {% endfor %}
@@ -68,7 +68,7 @@
                         {{ form_label(form.content) }}
                         {{ form_widget(form.content, {'attr': {'class': 'form-control','id':'composer_content'}}) }}
                         {% if not form.content.vars.errors is empty %}
-                            <span class="label label-danger">
+                            <span class="badge badge-danger">
                                 {% for errorItem in form.content.vars.errors %}
                                     {{ errorItem.message }}
                                 {% endfor %}
@@ -92,7 +92,7 @@
                         {{ form_label(form.visibility) }}
                         {{ form_widget(form.visibility, {'attr': {'class': 'form-control'}}) }}
                         {% if not form.visibility.vars.errors is empty %}
-                            <span class="label label-danger">
+                            <span class="badge badge-danger">
                                             {% for errorItem in form.visibility.vars.errors %}
                                                 {{ errorItem.message }}
                                             {% endfor %}
@@ -102,14 +102,13 @@
                 </div>
             </div>
 
-
             <div class="row">
                 <div class=" col-md-3">
                     <div class="form-group has-feedback">
-                        {{ form_label(form.sensitive) }}
+                        {{ form_label(form.sensitive) }}&nbsp;&nbsp;
-                        {{ form_widget(form.sensitive) }}
+                        {{ form_widget(form.sensitive, {'attr': {'class': 'form-control','data-toggle':'toggle', 'data-on': 'common.yes'|trans , 'data-off':'common.no'|trans}}) }}
                         {% if not form.sensitive.vars.errors is empty %}
-                            <span class="label label-danger">
+                            <span class="badge badge-danger">
                                             {% for errorItem in form.sensitive.vars.errors %}
                                                 {{ errorItem.message }}
                                             {% endfor %}
@@ -125,7 +124,7 @@
                         {{ form_label(form.scheduled_at) }}
                         {{ form_widget(form.scheduled_at, {'attr': {'class': 'form-control'}}) }}
                         {% if not form.scheduled_at.vars.errors is empty %}
-                            <span class="label label-danger">
+                            <span class="badge badge-danger">
                                             {% for errorItem in form.scheduled_at.vars.errors %}
                                                 {{ errorItem.message }}
                                             {% endfor %}
@@ -138,7 +137,7 @@
                         {{ form_label(form.timeZone) }}
                         {{ form_widget(form.timeZone, {'attr': {'class': 'form-control'}}) }}
                         {% if not form.timeZone.vars.errors is empty %}
-                            <span class="label label-danger">
+                            <span class="badge badge-danger">
                                             {% for errorItem in form.timeZone.vars.errors %}
                                                 {{ errorItem.message }}
                                             {% endfor %}
@@ -214,6 +213,7 @@
     <link rel="stylesheet" href="{{ asset('js/jQuery-File-Upload-10.1.0/css/doka.min.css') }}">
     <link rel="stylesheet" href="{{ asset('js/jQuery-File-Upload-10.1.0/css/blueimp-gallery.min.css') }}">
     <link rel="stylesheet" href="{{ asset('js/jQuery-File-Upload-10.1.0/css/jquery.fileupload.css') }}">
+    <link rel="stylesheet" href="{{ asset('css/bootstrap4-toggle.min.css') }}">
 
  {% endblock %}
 
@@ -292,7 +292,7 @@
                       </p>
                   {% } %}
                   {% if (file.error) { %}
-                      <div><span class="label label-danger">{% endverbatim %}{{ 'common.error'|trans }} {% verbatim %}</span> {%=file.error%}</div>
+                      <div><span class="badge badge-danger">{% endverbatim %}{{ 'common.error'|trans }} {% verbatim %}</span> {%=file.error%}</div>
                   {% } %}
               </td>
               <td>
@@ -323,7 +323,7 @@
     <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/tmpl.min.js') }}"></script>
     <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/load-image.all.min.js') }}"></script>
     <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/canvas-to-blob.min.js') }}"></script>
-
+    <script src="{{ asset('js/bootstrap4-toggle.min.js') }}"></script>
     <script src="{{ asset('js/bootstrap.min.js') }}"></script>
     <!-- Doka Image Editor polyfills -->
     <script>

translations/fediplan.en.yaml

@@ -24,6 +24,8 @@ common:
   license: License
   author: Author
   error: Error
+  no: No
+  yes: Yes
 status:
   visibility:
     public: Public