forked from friendica/friendica-addons
Compare commits
2 commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 2c75b00b16 | |||
|
6d3dd9b8b2 |
7 changed files with 296 additions and 44 deletions
|
|
@ -2,7 +2,7 @@
|
|||
/**
|
||||
* Name: Smileybutton
|
||||
* Description: Adds a smileybutton to the Inputbox
|
||||
* Version: 1.0
|
||||
* Version: 1.1
|
||||
* Author: Johannes Schwab <https://friendica.jschwab.org/profile/ddorian>
|
||||
* Maintainer: Hypolite Petovan <https://friendica.mrpetovan.com/profile/hypolite>
|
||||
*/
|
||||
|
|
@ -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 = '<table class="smiley-preview"><tr>';
|
||||
$s = '<div class="smiley-preview">';
|
||||
for ($x = 0; $x < count($params['texts']); $x++) {
|
||||
$icon = $params['icons'][$x];
|
||||
$s .= '<td onclick="smileybutton_addsmiley(\'' . $params['texts'][$x] . '\')">' . $icon . '</td>';
|
||||
$s .= '<span onclick="smileybutton_addsmiley(\'' . $params['texts'][$x] . '\')">' . $icon . '</span>';
|
||||
if (($x + 1) % (floor(sqrt(count($params['texts']))) + 1) == 0) {
|
||||
$s .= '</tr><tr>';
|
||||
$s .= '</div>';
|
||||
}
|
||||
}
|
||||
$s .= '</tr></table>';
|
||||
|
|
@ -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
|
||||
<div id="profile-smiley-wrapper">
|
||||
<button type="button" class="btn btn-link smiley_button" onclick="toggle_smileybutton()"><img src="$image_url" alt="smiley"></button>
|
||||
<div id="smileybutton">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
64
smileybutton/view/quattro.css
Normal file
64
smileybutton/view/quattro.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue