[TASK] RTE: Ajust style sheets for frontend use 16/36316/2
authorStanislas Rolland <typo3@sjbr.ca>
Wed, 28 Jan 2015 02:11:27 +0000 (21:11 -0500)
committerStanislas Rolland <typo3@sjbr.ca>
Wed, 28 Jan 2015 02:14:14 +0000 (03:14 +0100)
Releases: master
Resolves: #64549
Change-Id: Ie0033372a8b2f827686cf23294aa16d32421fb74
Reviewed-on: http://review.typo3.org/36316
Reviewed-by: Stanislas Rolland <typo3@sjbr.ca>
Tested-by: Stanislas Rolland <typo3@sjbr.ca>
typo3/sysext/rtehtmlarea/Classes/Controller/FrontendRteController.php
typo3/sysext/rtehtmlarea/Resources/Public/Css/Skin/bootstrap.css [new file with mode: 0644]
typo3/sysext/rtehtmlarea/Resources/Public/Css/Skin/htmlarea.css
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Framework.js
typo3/sysext/t3skin/rtehtmlarea/htmlarea.css

index 4310fb6..48d4d31 100644 (file)
@@ -196,12 +196,12 @@ class FrontendRteController extends \TYPO3\CMS\Rtehtmlarea\RteHtmlAreaBase {
                        }
                }
                $RTEWidth = strstr($width, '%') ? $width : $width . 'px';
-               $editorWrapWidth = strstr($width, '%') ? $width : ($width + 2) . 'px';
                $height = 380;
                $RTEHeightOverride = (int)$this->thisConfig['RTEHeightOverride'];
                $height = $RTEHeightOverride > 0 ? $RTEHeightOverride : $height;
                $RTEHeight = $height . 'px';
-               $editorWrapHeight = ($height + 2) . 'px';
+               $editorWrapWidth = '99%';
+               $editorWrapHeight = '100%';
                $this->RTEWrapStyle = $this->RTEWrapStyle ?: ($this->RTEdivStyle ?: 'height:' . $editorWrapHeight . '; width:' . $editorWrapWidth . ';');
                $this->RTEdivStyle = $this->RTEdivStyle ?: 'position:relative; left:0px; top:0px; height:' . $RTEHeight . '; width:' . $RTEWidth . '; border: 1px solid black;';
                /* =======================================
diff --git a/typo3/sysext/rtehtmlarea/Resources/Public/Css/Skin/bootstrap.css b/typo3/sysext/rtehtmlarea/Resources/Public/Css/Skin/bootstrap.css
new file mode 100644 (file)
index 0000000..062a6ee
--- /dev/null
@@ -0,0 +1,213 @@
+/* Buttons */
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: normal;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 6px 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 2px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.btn:focus,
+.btn:active:focus,
+.btn.active:focus,
+.btn.focus,
+.btn:active.focus,
+.btn.active.focus {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.btn:hover,
+.btn:focus,
+.btn.focus {
+  color: #333333;
+  text-decoration: none;
+}
+.btn:active,
+.btn.active {
+  outline: 0;
+  background-image: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.btn-default {
+  color: #333333;
+  background-color: #eeeeee;
+  border-color: #cccccc;
+}
+.btn-default:hover,
+.btn-default:focus,
+.btn-default.focus,
+.btn-default:active,
+.btn-default.active {
+  color: #333333;
+  background-color: #d5d5d5;
+  border-color: #adadad;
+}
+.btn-default:active,
+.btn-default.active {
+  background-image: none;
+}
+.btn-default.disabled,
+.btn-default[disabled],
+fieldset[disabled] .btn-default,
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled.focus,
+.btn-default[disabled].focus,
+fieldset[disabled] .btn-default.focus,
+.btn-default.disabled:active,
+.btn-default[disabled]:active,
+fieldset[disabled] .btn-default:active,
+.btn-default.disabled.active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default.active {
+  background-color: #eeeeee;
+  border-color: #cccccc;
+}
+
+/* Small buttons */
+.btn-sm,
+.btn-group-sm > .btn {
+  padding: 4px 4px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 2px;
+}
+
+/* Button groups */
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+.btn-group > .btn,
+.btn-group-vertical > .btn {
+  position: relative;
+  float: left;
+}
+.btn-group > .btn:hover,
+.btn-group-vertical > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group-vertical > .btn:focus,
+.btn-group > .btn:active,
+.btn-group-vertical > .btn:active,
+.btn-group > .btn.active,
+.btn-group-vertical > .btn.active {
+  z-index: 2;
+}
+.btn-group .btn + .btn,
+.btn-group .btn + .btn-group,
+.btn-group .btn-group + .btn,
+.btn-group .btn-group + .btn-group {
+  margin-left: -1px;
+}
+.btn-toolbar {
+  margin-left: -5px;
+}
+.btn-toolbar .btn-group {
+  float: left;
+}
+.btn-toolbar > .btn,
+.btn-toolbar > .btn-group {
+  margin-left: 5px;
+}
+.btn-group > .btn:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+.btn-group > .btn:first-child {
+  margin-left: 0;
+}
+.btn-group > .btn:first-child:not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.btn-group > .btn:last-child:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.btn-group > .btn-group {
+  float: left;
+}
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group > .btn-group:first-child > .btn:last-child,
+.btn-group > .btn-group:first-child > .dropdown-toggle {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.btn-group > .btn-group:last-child > .btn:first-child {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+/* Form controls */
+.form-control {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 6px 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #737373;
+  background-color: #fefefe;
+  background-image: none;
+  border: 1px solid #7c7c7c;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+.form-control:focus {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.form-control::-moz-placeholder {
+  color: #d7d7d7;
+  opacity: 1;
+}
+.form-control:-ms-input-placeholder {
+  color: #d7d7d7;
+}
+.form-control::-webkit-input-placeholder {
+  color: #d7d7d7;
+}
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  cursor: not-allowed;
+  background-color: #f5f5f5;
+  opacity: 1;
+}
\ No newline at end of file
index a8fdf41..2b8f60f 100644 (file)
@@ -1,3 +1,4 @@
+@import url("bootstrap.css");
 /* Selectors for the htmlArea RTE editor */
 .htmlarea {
        margin: 2px;
        padding: 0px 1px;
        margin: 0;
 }
-.editorWrap .resizable .statusBar,
-.editorWrap .resizable .noStatusBar {
-       background-image: url("../../Images/Status/resizable.gif");
-       background-position: right bottom;
-       background-repeat: no-repeat;
-}
-.editorWrap .resizable .noStatusBar {
-       padding-bottom: 10px;
-}
 /* Selectors for the editor toolbar */
 .htmlarea .btn-toolbar {
-       padding: 2px;
+       margin-left: -5px;
+       padding: 2px 2px 2px 0;
 }
 .htmlarea .btn-toolbar .btn-group {
        margin: 1px 3px;
@@ -45,7 +38,7 @@
        padding: 0;
 }
 .htmlarea .btn-toolbar .btn-sm {
-       background-color: transparent;
+       /*background-color: transparent;*/
        height: 24px;
        margin: 1px 0;
        padding: 2px 0 0 2px;
@@ -58,7 +51,7 @@
        border-right: 0;
 }
 .htmlarea .btn-toolbar .btn-icon {
-       background-image: url("images/sprites/actions.png");
+       background-image: url("../../Images/Sprites/actions.png");
        background-repeat: no-repeat;
        display: inline-block;
        height: 18px;
 .htmlarea .btn-toolbar .form-control {
        border-color: #cccccc;
        display: inline-block;
+       font-size: 12px;
        height: 24px;
        margin: 0;
        padding: 2px 1px;
        padding: 2px;
 }
 .htmlarea .editorIframe {
-       clear: both;
        border: 1px solid #c7c7c7;
-       border-bottom: none;
-       margin: 0 7px 0 0;
+       /*border-bottom: none;*/
+       border-radius: 2px;
+       clear: both;
+       margin: 0;
        padding: 0;
 }
-.editorWrap .resizable .editorIframe {
-       margin-bottom: -3px;
-}
 .htmlarea .noStatusBar {
        border-bottom: 1px solid #c7c7c7;
 }
 .htmlarea .statusBar {
        border: 1px solid #c7c7c7;
+       border-radius: 2px;
+       color: #333333;
+       background-color: #eeeeee;
        font-size: 10px;
        line-height: 20px;
        margin: 0;
-       padding: 0 3px;
+       padding: 1px 3px;
 }
 .htmlarea .statusBar .statusBarTree a {
        font-weight: bold;
index b1f9e0a..7cf60d0 100644 (file)
@@ -357,7 +357,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
                 * Calculate the width available for the editing iframe
                 */
                getInnerWidth: function () {
-                       return Dom.getSize(this.getEl()).width;
+                       return Dom.getSize(this.getEl()).width - 2;
                },
 
                /**
index b5ad343..87c4e17 100644 (file)
        padding:0px 1px;
        margin:0;
 }
-.editorWrap .resizable .statusBar,
-.editorWrap .resizable .noStatusBar {
-       background-image: url("images/status/resizable.gif");
-       background-position: bottom right;
-       background-repeat: no-repeat;
-}
-.editorWrap .resizable .noStatusBar {
-       padding-bottom: 10px;
-}
 /* Selectors for the editor toolbar */
 .htmlarea .btn-toolbar {
        padding: 2px;
        padding: 2px;
 }
 .htmlarea .editorIframe {
-       clear:both;
-       border:1px solid #c7c7c7;
-       border-bottom: none;
-       margin:0;
-       padding:0;
-}
-.editorWrap .resizable .editorIframe {
-       margin-bottom: -3px;
+       border: 1px solid #c7c7c7;
+       /*border-bottom: none;*/
+       border-radius: 2px;
+       clear: both;
+       margin: 0;
+       padding: 0;
 }
 .htmlarea .noStatusBar {
        border-bottom:1px solid #A2AAB8;
 }
 .htmlarea .statusBar {
        background-color: #666;
+       border: 1px solid #c7c7c7;
+       border-radius: 2px;
        color: #FFFFFF;
        font-size: 10px;
-       border: 1px solid #c7c7c7;
-       margin: 0;
-       padding: 0 3px;
        line-height: 20px;
-       font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
+       margin: 0;
+       padding: 1px 3px;
 }
 .htmlarea .statusBar .statusBarTree a {
        color:#FFFFFF;