Skip to content

Commit

Permalink
Improved ML button styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@AIC-BV
AIC-BV authored Mar 19, 2024
1 parent 7b92e03 commit 56935bb
Show file tree
Hide file tree
Showing 7 changed files with 214 additions and 99 deletions.
38 changes: 15 additions & 23 deletions assets/css/multilingual.css
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,18 @@
.field-multilingual{position:relative}
.field-multilingual .ml-btn{background:transparent;position:absolute;color:#7b7b7b;text-transform:uppercase;font-size:11px;letter-spacing:1px;width:44px;padding-right:0;-webkit-box-shadow:none;box-shadow:none;text-shadow:none;z-index:2}
.field-multilingual .ml-btn{z-index:2;position:absolute;top:1px;bottom:1px;right:1px;width:auto;max-width:44px;max-height:38px;color:#7b7b7b;background-color:#F8F6F3;box-shadow:none;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin:0 !important;padding:0 12px;border-top-left-radius:0;border-bottom-left-radius:0;transition:color 420ms ease}
.field-multilingual .ml-btn:hover{color:#555}
.field-multilingual.field-multilingual-text .form-control{padding-right:44px}
.field-multilingual.field-multilingual-text .ml-btn{right:4px;top:50%;margin-top:-44px;height:88px}
.field-multilingual.field-multilingual-textarea textarea{padding-right:30px}
.field-multilingual.field-multilingual-textarea .ml-btn{right:13px;top:5px;width:24px;text-align:right;padding-left:4px}
.field-multilingual.field-multilingual-textarea .ml-dropdown-menu{top:39px;right:1px}
.field-multilingual.field-multilingual-richeditor .ml-btn{top:43px;right:25px;text-align:right}
.field-multilingual.field-multilingual-richeditor .ml-dropdown-menu{top:74px;right:12px}
.field-multilingual.field-multilingual-markdowneditor .ml-btn{top:43px;right:25px;text-align:right}
.field-multilingual.field-multilingual-markdowneditor .ml-dropdown-menu{top:74px !important;right:12px}
.field-multilingual.field-multilingual-repeater .ml-btn,
.field-multilingual.field-multilingual-nestedform .ml-btn{top:-27px;right:11px;text-align:right}
.field-multilingual.field-multilingual-repeater .ml-btn{top:3px;bottom:auto;height:auto;transform:translateY(-100%);border-radius:.375rem}
.field-multilingual.field-multilingual-textarea textarea{padding-right:2rem}
.field-multilingual.field-multilingual-textarea .ml-btn{border-bottom-right-radius:0;border-bottom-left-radius:.375rem}
.field-multilingual.field-multilingual-textarea .ml-dropdown-menu{top:28px;right:1px}
.field-multilingual.field-multilingual-richeditor .ml-btn{border-radius:0;border-bottom-left-radius:.375rem}
.field-multilingual.field-multilingual-richeditor .ml-dropdown-menu{top:28px;right:1px}
.field-multilingual.field-multilingual-markdowneditor .mode-tab .editor-write{padding-right:2rem}
.field-multilingual.field-multilingual-markdowneditor .mode-split .editor-preview{padding-right:2rem}
.field-multilingual.field-multilingual-markdowneditor .editor-code{padding-right:inherit}
.field-multilingual.field-multilingual-markdowneditor .ml-btn{border-radius:0;border-bottom-left-radius:.375rem}
.field-multilingual.field-multilingual-markdowneditor .ml-dropdown-menu{top:28px;right:1px}
.field-multilingual.field-multilingual-repeater .ml-dropdown-menu,
.field-multilingual.field-multilingual-nestedform .ml-dropdown-menu{top:0;right:0}
.field-multilingual.field-multilingual-repeater.is-empty,
.field-multilingual.field-multilingual-nestedform.is-empty{padding-top:5px}
.field-multilingual.field-multilingual-repeater.is-empty .ml-btn,
.field-multilingual.field-multilingual-nestedform.is-empty .ml-btn{top:-10px;right:5px;text-align:right}
.field-multilingual.field-multilingual-repeater.is-empty .ml-dropdown-menu,
.field-multilingual.field-multilingual-nestedform.is-empty .ml-dropdown-menu{top:15px;right:-7px}
.fancy-layout .form-tabless-fields .field-multilingual .ml-btn{color:rgba(255,255,255,0.8)}
.fancy-layout .form-tabless-fields .field-multilingual .ml-btn:hover{color:#fff}
.fancy-layout .field-multilingual-text input.form-control{padding-right:44px}
.help-block.before-field + .field-multilingual.field-multilingual-textarea .ml-btn{top:-41px}
.field-multilingual.field-multilingual-nestedform .ml-dropdown-menu{top:2px;right:0}
.field-multilingual.field-multilingual-mediafinder .ml-btn{border-radius:.375rem}
.fancy-layout .form-tabless-fields .field-multilingual .ml-btn{background-color:rgba(248,246,243,0.75)}
133 changes: 64 additions & 69 deletions assets/less/multilingual.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,128 +6,123 @@
position: relative;

.ml-btn {
background: transparent;
z-index: 2;
position: absolute;
top: 1px;
bottom: 1px;
right: 1px;

width: auto;
max-width: 44px;
max-height: 38px;

color: lighten(@multilingual-btn-color, 15%);
text-transform: uppercase;
background-color: #F8F6F3;
box-shadow: none;

font-size: 11px;
letter-spacing: 1px;
width: 44px;
padding-right: 0;
.box-shadow(none);
text-shadow: none;
z-index: 2;
text-transform: uppercase;

margin: 0 !important;
padding: 0 12px;

border-top-left-radius: 0;
border-bottom-left-radius: 0;

transition: color 420ms ease;

&:hover {
color: @multilingual-btn-color;
}
}

&.field-multilingual-text {
.form-control {
padding-right: 44px;
}
.ml-btn {
right: 4px;
top: 50%;
margin-top: -44px;
height: 88px;
}
&.field-multilingual-repeater .ml-btn {
top: 3px;
bottom: auto;
height: auto;
transform: translateY(-100%);
border-radius: .375rem;
}

&.field-multilingual-textarea {
textarea {
// increase padding on the right so that the textarea content does not overlap with the language button
padding-right: 30px;
padding-right: 2rem;
}

.ml-btn {
right: 13px;
top: 5px;
width: 24px;
text-align: right;
padding-left: 4px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: .375rem;
}

.ml-dropdown-menu {
top: 39px;
top: 28px;
right: 1px;
}
}

&.field-multilingual-richeditor {
.ml-btn {
top: 43px;
right: 25px;
text-align: right;
border-radius: 0;
border-bottom-left-radius: .375rem;
}

.ml-dropdown-menu {
top: 74px;
right: 12px;
top: 28px;
right: 1px;
}
}

&.field-multilingual-markdowneditor {
.mode-tab .editor-write {
padding-right: 2rem;
}

.mode-split .editor-preview {
padding-right: 2rem;
}

.editor-code {
padding-right: inherit;
}

.ml-btn {
top: 43px;
right: 25px;
text-align: right;
border-radius: 0;
border-bottom-left-radius: .375rem;
}

.ml-dropdown-menu {
top: 74px !important;
right: 12px;
top: 28px;
right: 1px;
}
}

&.field-multilingual-repeater,
&.field-multilingual-nestedform {
.ml-btn {
top: -27px;
right: 11px;
text-align: right;
}

.ml-dropdown-menu {
top: 0;
top: 2px;
right: 0;
}
}

&.is-empty {
padding-top: 5px;

.ml-btn {
top: -10px;
right: 5px;
text-align: right;
}

.ml-dropdown-menu {
top: 15px;
right: -7px;
}
&.field-multilingual-mediafinder {
.ml-btn {
border-radius: .375rem;
}
}
}

.fancy-layout {
.form-tabless-fields .field-multilingual {
.ml-btn {
color: rgba(255,255,255,.8);

&:hover {
color: rgba(255,255,255,1);
}
background-color: rgba(248, 246, 243, 0.75)
}
}
.field-multilingual-text input.form-control {
padding-right: 44px;
}
}

.help-block.before-field + .field-multilingual.field-multilingual-textarea {
.ml-btn {
top: -41px;
}
}
// ?? CHECK THIS
// .help-block.before-field + .field-multilingual.field-multilingual-textarea {
// .ml-btn {
// top: -41px;
// }
// }
1 change: 1 addition & 0 deletions formwidgets/MLTextarea.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ public function getSaveValue($value)
protected function loadAssets()
{
$this->loadLocaleAssets();
$this->addJs('js/mltextarea.js');
}

}
69 changes: 69 additions & 0 deletions formwidgets/mlmarkdowneditor/assets/js/mlmarkdowneditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,12 @@
this.$el.on('setLocale.oc.multilingual', this.proxy(this.onSetLocale))
this.$textarea.on('changeContent.oc.markdowneditor', this.proxy(this.onChangeContent))

this.updateLayout()

$(window).on('resize', this.proxy(this.updateLayout))
$(window).on('oc.updateUi', this.proxy(this.updateLayout))
this.$el.one('dispose-control', this.proxy(this.dispose))

}

MLMarkdownEditor.prototype.dispose = function() {
Expand Down Expand Up @@ -75,6 +80,64 @@
this.$el.multiLingual('setLocaleValue', value)
}

MLMarkdownEditor.prototype.updateLayout = function() {
var $toolbar = $('.control-toolbar', this.$el),
$btn = $('.ml-btn[data-active-locale]:first', this.$el),
$dropdown = $('.ml-dropdown-menu[data-locale-dropdown]:first', this.$el),
$container = $('.editor-write', this.$el),
$scrollbar = $('.ace_scrollbar', this.$el),
$input = $('.ace_text-input', this.$el)

if ($toolbar.length) {
var height = $toolbar.outerHeight(true)
if (height) {
$btn.css('top', height + 0.5)
$dropdown.css('top', height + 34)
}
}

// set ML button position
var $container = $('.editor-write', this.$el),
$previewContainer = $('.editor-preview', this.$el),
$scrollbar = $('.ace_scrollbar', this.$el),
$input = $('.ace_text-input', this.$el)

// fix exit fullscreen
setTimeout(function() {
setMLButtonPosition()
}, 0)

// input listener
$input.on('keydown keyup', setMLButtonPosition)

function setMLButtonPosition() {

// make sure container is displayed (fix previewmode)
$container.css('display', 'initial')

var scrollbarWidth = $scrollbar[0].offsetWidth - 5
if (scrollbarWidth === -5) scrollbarWidth = $previewContainer[0].offsetWidth - $previewContainer[0].clientWidth

if (scrollbarWidth >= 0) {
$container.css('padding-right', scrollbarWidth + 23)
$btn.css('right', scrollbarWidth - 1)
$dropdown.css('right', scrollbarWidth - 2)
} else {
$container.css('padding-right', '')
$btn.css('right', '')
$dropdown.css('right', '')
}

// reset container
$container.css('display', '')

}

}

// MLMARKDOWNEDITOR PLUGIN DEFINITION
// ============================

var old = $.fn.mlMarkdownEditor

$.fn.mlMarkdownEditor = function (option) {
Expand All @@ -94,11 +157,17 @@

$.fn.mlMarkdownEditor.Constructor = MLMarkdownEditor;

// MLMARKDOWNEDITOR NO CONFLICT
// =================

$.fn.mlMarkdownEditor.noConflict = function () {
$.fn.mlMarkdownEditor = old
return this
}

// MLMARKDOWNEDITOR DATA-API
// ===============

$(document).render(function (){
$('[data-control="mlmarkdowneditor"]').mlMarkdownEditor()
})
Expand Down
45 changes: 38 additions & 7 deletions formwidgets/mlricheditor/assets/js/mlricheditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,15 +85,46 @@
MLRichEditor.prototype.updateLayout = function() {
var $toolbar = $('.fr-toolbar', this.$el),
$btn = $('.ml-btn[data-active-locale]:first', this.$el),
$dropdown = $('.ml-dropdown-menu[data-locale-dropdown]:first', this.$el)

if (!$toolbar.length) {
return
$dropdown = $('.ml-dropdown-menu[data-locale-dropdown]:first', this.$el),
$element = $('.fr-element', this.$el)

if ($toolbar.length) {
var height = $toolbar.outerHeight(true)
if (height) {
$btn.css('top', height)
$dropdown.css('top', height + 34)
}
}

var height = $toolbar.outerHeight(true)
$btn.css('top', height + 6)
$dropdown.css('top', height + 40)
// set ML button position
var hasScrollbar = false
var scrollbarWidth = 0
var elementHeight = $element.outerHeight()

setMLButtonPosition()
$element.on('keydown keyup', setMLButtonPosition)

function setMLButtonPosition() {
var scrollHeight = $element[0].scrollHeight
var showScrollbar = scrollHeight > elementHeight

if (!hasScrollbar && showScrollbar) {

hasScrollbar = true
if (!scrollbarWidth) scrollbarWidth = $element[0].offsetWidth - $element[0].clientWidth

$element.css('padding-right', scrollbarWidth + 23)
$btn.css('right', scrollbarWidth - 1)
$dropdown.css('right', scrollbarWidth - 2)

} else if (hasScrollbar && !showScrollbar) {
hasScrollbar = false
$element.css('padding-right', '')
$btn.css('right', '')
$dropdown.css('right', '')
}
}

}

// MLRICHEDITOR PLUGIN DEFINITION
Expand Down
Loading

0 comments on commit 56935bb

Please sign in to comment.