From 6d3dd9b8b2d277d0df5e865198c8d1074672c62a Mon Sep 17 00:00:00 2001 From: Random Penguin <205060075+randompenguin1@users.noreply.github.com> Date: Thu, 11 Dec 2025 21:07:15 -0600 Subject: [PATCH] Update smileybutton.php - Enabling for Quattro. Enabled for Mobile because it may have emoji mobile devices do not have. Switched structure from to
to make layout more flexible. - Switched to DIV layout - Also fixes button and position appearance. - Also fixes button alignment and appearance issues - Adding support for Quattro theme --- smileybutton/smileybutton.php | 19 +++----- smileybutton/view/default.css | 48 ++++++++++++++++---- smileybutton/view/duepuntozero.css | 40 ++++++++++++++-- smileybutton/view/frio.css | 73 +++++++++++++++++++++++++----- smileybutton/view/quattro.css | 64 ++++++++++++++++++++++++++ smileybutton/view/smoothly.css | 58 +++++++++++++++++++++--- smileybutton/view/vier.css | 38 ++++++++++++++-- 7 files changed, 296 insertions(+), 44 deletions(-) create mode 100644 smileybutton/view/quattro.css diff --git a/smileybutton/smileybutton.php b/smileybutton/smileybutton.php index 4d0a8d42..6530417b 100644 --- a/smileybutton/smileybutton.php +++ b/smileybutton/smileybutton.php @@ -2,7 +2,7 @@ /** * Name: Smileybutton * Description: Adds a smileybutton to the Inputbox - * Version: 1.0 + * Version: 1.1 * Author: Johannes Schwab * Maintainer: Hypolite Petovan */ @@ -18,14 +18,9 @@ function smileybutton_install() function smileybutton_jot_tool(string &$body) { - // Disable if theme is quattro - if (DI::appHelper()->getCurrentTheme() == 'quattro') { - return; - } - - // Disable for mobile because they have a smiley key of their own + // this plugin may have smilies mobile devices do not have, disable for mobile by uncommenting return below if (DI::mode()->isMobile() || DI::mode()->isMobile()) { - return; +// return; } $texts = [ @@ -85,12 +80,12 @@ function smileybutton_jot_tool(string &$body) Hook::callAll('smilie', $params); //Generate html for smiley list - $s = '
'; + $s = '
'; for ($x = 0; $x < count($params['texts']); $x++) { $icon = $params['icons'][$x]; - $s .= '
'; + $s .= '' . $icon . ''; if (($x + 1) % (floor(sqrt(count($params['texts']))) + 1) == 0) { - $s .= ''; + $s .= ''; } } $s .= '
' . $icon . '
'; @@ -112,7 +107,7 @@ function smileybutton_jot_tool(string &$body) $image_url = DI::baseUrl() . '/' . $image; //Add the hmtl and script to the page - $body = <<< EOT + $body .= <<< EOT
diff --git a/smileybutton/view/default.css b/smileybutton/view/default.css index 5fd60928..97ef8468 100644 --- a/smileybutton/view/default.css +++ b/smileybutton/view/default.css @@ -1,3 +1,14 @@ +/* fix positioning if more than one jot tool */ +.jotplugins > div, +#profile-jot-plugin-wrapper > div { + float: left; +} + .jotplugins::after, + #profile-jot-plugin-wrapper::after { + content: ''; + display: block; + clear: both; + } #profile-smiley-wrapper { display: block; } @@ -11,15 +22,36 @@ width: 18px; } -table.smiley-preview img.smiley { +div.smiley-preview img.smiley { max-height: 25px; max-width: 25px; -} - -table.smiley-preview { - border: 1px solid #AAAAAA; -} - -table.smiley-preview td { cursor: pointer; + vertical-align: baseline; } + +div.smiley-preview { + border: 1px solid #AAAAAA; + max-height: 200px; + overflow: auto; +} + +div.smiley-preview > span { + cursor: pointer; + font-size: 24px; + padding: 5px; + text-align: center; + width: 45px; + height: 45px; + line-height: 45px; + float: left; + display: block; +} + div.smiley-preview > span:hover, + div.smiley-preview > span:focus { + background-color: rgba(0,0,0,.1); + } + div.smiley-preview::after { + content: ''; + display: block; + clear: both; + } diff --git a/smileybutton/view/duepuntozero.css b/smileybutton/view/duepuntozero.css index 92ff4eba..1ad73d24 100644 --- a/smileybutton/view/duepuntozero.css +++ b/smileybutton/view/duepuntozero.css @@ -1,3 +1,15 @@ +/* fix positioning if more than one jot tool */ +.jotplugins > div, +#profile-jot-plugin-wrapper > div { + float: left; +} + .jotplugins::after, + #profile-jot-plugin-wrapper::after { + content: ''; + display: block; + clear: both; + } + #profile-smiley-wrapper { display: block; } @@ -17,21 +29,41 @@ background: none; } -table.smiley-preview img.smiley { +div.smiley-preview img.smiley { max-height: 25px; max-width: 25px; cursor: pointer; + vertical-align: baseline; } -table.smiley-preview { +div.smiley-preview { border: 1px solid #AAAAAA; -moz-border-radius: 3px; border-radius: 3px; position: relative; - left: 285px; + left: auto; top: -36px; + max-height: 200px; + overflow: auto; } -table.smiley-preview td { +div.smiley-preview > span { cursor: pointer; + font-size: 24px; + padding: 5px; + text-align: center; + width: 45px; + height: 45px; + line-height: 45px; + float: left; + display: block; } + div.smiley-preview > span:hover, + div.smiley-preview > span:focus { + background-color: rgba(0,0,0,.1); + } + div.smiley-preview::after { + content: ''; + display: block; + clear: both; + } diff --git a/smileybutton/view/frio.css b/smileybutton/view/frio.css index dce84826..7c1596bf 100644 --- a/smileybutton/view/frio.css +++ b/smileybutton/view/frio.css @@ -1,29 +1,80 @@ +/* fix positioning if more than one jot tool */ +.jotplugins > div, +#profile-jot-plugin-wrapper > div { + float: left; +} + .jotplugins::after, + #profile-jot-plugin-wrapper::after { + content: ''; + display: block; + clear: both; + } + #profile-smiley-wrapper { display: block; } #smileybutton { display: none; + position: fixed; + background-color: #FFF; + width: auto; + border-radius: 8px; + padding: 10px; + -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); + box-shadow: 0 6px 12px rgba(0,0,0,.175); +} +.jotplugins #smileybutton { + position: absolute; +} +/* image does not work with Frio schemes use icon font */ +.smiley_button { + -webkit-box-shadow: none !important; + box-shadow: none !important; } - .smiley_button > img { - height: 14px; - width: 14px; + display: none; } + .smiley_button::before { + content: '\f055'; + font-family: ForkAwesome; + font-size: inherit; + color: inherit; + } -table.smiley-preview img.smiley { +div.smiley-preview img.smiley { max-height: 25px; max-width: 25px; -} - -table.smiley-preview { - border: 1px solid #AAAAAA; -} - -table.smiley-preview td { cursor: pointer; + vertical-align: baseline; } +div.smiley-preview { + border: none; + max-height: 200px; + overflow: auto; +} + +div.smiley-preview > span { + cursor: pointer; + font-size: 24px; + padding: 5px; + text-align: center; + width: 45px; + height: 45px; + line-height: 45px; + float: left; + display: block; +} + div.smiley-preview > span:hover, + div.smiley-preview > span:focus { + background-color: rgba(0,0,0,.1); + } + div.smiley-preview::after { + content: ''; + display: block; + clear: both; + } #profile-smiley-wrapper > .btn-link { position: relative; display: block; diff --git a/smileybutton/view/quattro.css b/smileybutton/view/quattro.css new file mode 100644 index 00000000..c48ef2c6 --- /dev/null +++ b/smileybutton/view/quattro.css @@ -0,0 +1,64 @@ +/* fix positioning if more than one jot tool */ +.jotplugins > div, +#profile-jot-plugin-wrapper > div { + float: left; +} + .jotplugins::after, + #profile-jot-plugin-wrapper::after { + content: ''; + display: block; + clear: both; + } +#profile-smiley-wrapper { + display: block; + margin-bottom: -100px; +} + +#smileybutton { + display: none; + position: absolute; + max-width: 770px; + z-index: 99; + background-color: white; +} +.smiley_button { + height: 42px; +} +.smiley_button > img { + height: 18px; + width: 18px; +} + +div.smiley-preview img.smiley { + max-height: 25px; + max-width: 25px; + cursor: pointer; + vertical-align: baseline; +} + +div.smiley-preview { + border: 1px solid #AAAAAA; + max-height: 200px; + overflow: auto; +} + +div.smiley-preview > span { + cursor: pointer; + font-size: 24px; + padding: 5px; + text-align: center; + width: 45px; + height: 45px; + line-height: 45px; + float: left; + display: block; +} + div.smiley-preview > span:hover, + div.smiley-preview > span:focus { + background-color: rgba(0,0,0,.1); + } + div.smiley-preview::after { + content: ''; + display: block; + clear: both; + } diff --git a/smileybutton/view/smoothly.css b/smileybutton/view/smoothly.css index 2f30799f..13dad74e 100644 --- a/smileybutton/view/smoothly.css +++ b/smileybutton/view/smoothly.css @@ -1,34 +1,80 @@ +/* fix positioning if more than one jot tool */ +#profile-jot-plugin-wrapper { + width: 100%; + margin-top: 10px; +} +.jotplugins > div, +#profile-jot-plugin-wrapper > div { + float: left; +} + .jotplugins::after, + #profile-jot-plugin-wrapper::after { + content: ''; + display: block; + clear: both; + } + #profile-smiley-wrapper { display: block; } #smileybutton { display: none; + position: absolute; + background-color: #FFF; + width: auto; + border-radius: 8px; + padding: 10px; + z-index: 99; + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.7); + box-shadow: 0 0 5px rgba(0,0,0,.7); } - + .jotplugins #smileybutton { + position: absolute; + } .smiley_button > img { height: 22px; width: 22px; position: relative; - left: -330px; + left: 0px; margin: 4px; -moz-border-radius: 0px; border-radius: 0px; } -table.smiley-preview img.smiley { +div.smiley-preview img.smiley { max-height: 25px; max-width: 25px; cursor: pointer; + vertical-align: baseline; } -table.smiley-preview { - border: 1px solid #AAAAAA; +div.smiley-preview { + border: none; -moz-border-radius: 5px; border-radius: 5px; margin: 5px; + max-height: 200px; + overflow: auto; } -table.smiley-preview td { +div.smiley-preview > span { cursor: pointer; + font-size: 24px; + padding: 5px; + text-align: center; + width: 45px; + height: 45px; + line-height: 45px; + float: left; + display: block; } + div.smiley-preview > span:hover, + div.smiley-preview > span:focus { + background-color: rgba(0,0,0,.1); + } + div.smiley-preview::after { + content: ''; + display: block; + clear: both; + } diff --git a/smileybutton/view/vier.css b/smileybutton/view/vier.css index 5862759b..41ed7e5c 100644 --- a/smileybutton/view/vier.css +++ b/smileybutton/view/vier.css @@ -1,3 +1,15 @@ +/* fix positioning if more than one jot tool */ +.jotplugins > div, +#profile-jot-plugin-wrapper > div { + float: left; +} + .jotplugins::after, + #profile-jot-plugin-wrapper::after { + content: ''; + display: block; + clear: both; + } + #profile-smiley-wrapper { float: left; margin-left: 15px; @@ -33,17 +45,37 @@ margin-right: 18px; } -table.smiley-preview { +div.smiley-preview { background-color: #FFF; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); + max-height: 200px; + overflow: auto; } -table.smiley-preview img.smiley { +div.smiley-preview img.smiley { max-height: 25px; max-width: 25px; cursor: pointer; + vertical-align: baseline; } -table.smiley-preview td { +div.smiley-preview > span { cursor: pointer; + font-size: 24px; + padding: 5px; + text-align: center; + width: 45px; + height: 45px; + line-height: 45px; + float: left; + display: block; } + div.smiley-preview > span:hover, + div.smiley-preview > span:focus { + background-color: rgba(0,0,0,.1); + } + div.smiley-preview::after { + content: ''; + display: block; + clear: both; + }