From 50400cb785f646c97cd02d331c5b03d09bd88898 Mon Sep 17 00:00:00 2001 From: lavigor Date: Fri, 15 Jun 2018 02:38:48 +0300 Subject: [PATCH] [ticket/13713] Fix styles for mention dropdown PHPBB3-13713 --- phpBB/adm/style/acp_posting_buttons.html | 1 - phpBB/adm/style/admin.css | 42 ++++++++++++++++--- phpBB/assets/css/jquery.atwho.min.css | 1 - phpBB/assets/javascript/editor.js | 2 +- .../prosilver/template/posting_buttons.html | 1 - phpBB/styles/prosilver/theme/bidi.css | 4 +- phpBB/styles/prosilver/theme/colours.css | 15 ++++++- phpBB/styles/prosilver/theme/forms.css | 25 +++++++++-- 8 files changed, 75 insertions(+), 16 deletions(-) delete mode 100644 phpBB/assets/css/jquery.atwho.min.css diff --git a/phpBB/adm/style/acp_posting_buttons.html b/phpBB/adm/style/acp_posting_buttons.html index 8a6a4462c7..74ebc88d78 100644 --- a/phpBB/adm/style/acp_posting_buttons.html +++ b/phpBB/adm/style/acp_posting_buttons.html @@ -11,7 +11,6 @@ - diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index 620a658167..ac7991aa69 100644 --- a/phpBB/adm/style/admin.css +++ b/phpBB/adm/style/admin.css @@ -1676,18 +1676,45 @@ fieldset.submit-buttons legend { font-weight: bold; } -.atwho-container .atwho-view { - font-size: 12px; +.atwho-view { + background: #ffffff; + border: 1px solid #dddddd; + border-radius: 3px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + color: #000000; + position: absolute; + z-index: 11110 !important; + top: 0; + left: 0; + display: none; min-width: 260px; + margin-top: 18px; } -.atwho-container .atwho-view ul li { +.atwho-view-ul { + overflow-y: auto; + max-height: 200px; + margin: auto; + padding: 0; + list-style: none; +} + +.mention-name { + font-size: 12px; + border-bottom: 1px solid #dddddd; position: relative; + display: block; padding: 15px 5px 15px 45px; + cursor: pointer; } -.atwho-container .atwho-view ul li:hover, -.atwho-container .atwho-view ul li.cur { +.rtl .mention-name { + padding-right: 45px; + padding-left: 15px; +} + +.mention-name:hover, +.mention-name.cur { background-color: #0077b3; color: #ffffff; } @@ -1710,6 +1737,11 @@ fieldset.submit-buttons legend { margin-top: -16px; } +.rtl .mention-avatar { + right: 7px; + left: auto; +} + .mention-rank { font-size: 10px; display: block; diff --git a/phpBB/assets/css/jquery.atwho.min.css b/phpBB/assets/css/jquery.atwho.min.css deleted file mode 100644 index f770dc73b3..0000000000 --- a/phpBB/assets/css/jquery.atwho.min.css +++ /dev/null @@ -1 +0,0 @@ -.atwho-view{position:absolute;top:0;left:0;display:none;margin-top:18px;background:#fff;color:#000;border:1px solid #DDD;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.1);min-width:120px;z-index:11110!important}.atwho-view .atwho-header{padding:5px;margin:5px;cursor:pointer;border-bottom:solid 1px #eaeff1;color:#6f8092;font-size:11px;font-weight:700}.atwho-view .atwho-header .small{color:#6f8092;float:right;padding-top:2px;margin-right:-5px;font-size:12px;font-weight:400}.atwho-view .atwho-header:hover{cursor:default}.atwho-view .cur{background:#36F;color:#fff}.atwho-view .cur small{color:#fff}.atwho-view strong{color:#36F}.atwho-view .cur strong{color:#fff;font:700}.atwho-view ul{list-style:none;padding:0;margin:auto;max-height:200px;overflow-y:auto}.atwho-view ul li{display:block;padding:5px 10px;border-bottom:1px solid #DDD;cursor:pointer}.atwho-view small{font-size:smaller;color:#777;font-weight:400} \ No newline at end of file diff --git a/phpBB/assets/javascript/editor.js b/phpBB/assets/javascript/editor.js index 61d852d254..f96ccbbd01 100644 --- a/phpBB/assets/javascript/editor.js +++ b/phpBB/assets/javascript/editor.js @@ -396,7 +396,7 @@ function getCaretPosition(txtarea) { var avatar = (data.avatar.src) ? "" : "", rank = (data.rank) ? "" + data.rank + "" : ''; - return "
  • " + avatar + "" + data.name + "" + rank + "
    • "; + return "
  • " + avatar + "" + data.name + "" + rank + "
    • "; }, insertTpl: "[mention ${param}=${id}]${name}[/mention]", limit: mentionNamesLimit, diff --git a/phpBB/styles/prosilver/template/posting_buttons.html b/phpBB/styles/prosilver/template/posting_buttons.html index df4c038323..73b3159349 100644 --- a/phpBB/styles/prosilver/template/posting_buttons.html +++ b/phpBB/styles/prosilver/template/posting_buttons.html @@ -29,7 +29,6 @@ - diff --git a/phpBB/styles/prosilver/theme/bidi.css b/phpBB/styles/prosilver/theme/bidi.css index 127ac48c71..493d05bea8 100644 --- a/phpBB/styles/prosilver/theme/bidi.css +++ b/phpBB/styles/prosilver/theme/bidi.css @@ -931,12 +931,12 @@ } /* Mention dropdown */ -.atwho-container .atwho-view ul li { +.rtl .mention-name { padding-right: 45px; padding-left: 15px; } -.mention-avatar { +.rtl .mention-avatar { right: 7px; left: auto; } diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 12e432cbbb..01b69d331b 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -983,8 +983,19 @@ fieldset.fields2 dl:hover dt label { outline-color: rgba(19, 164, 236, 0.5); } -.atwho-container .atwho-view ul li:hover, -.atwho-container .atwho-view ul li.cur { +.atwho-view { + background: #ffffff; + border-color: #dddddd; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + color: #000000; +} + +.mention-name { + border-bottom-color: #dddddd; +} + +.mention-name:hover, +.mention-name.cur { background-color: #0077b3; color: #ffffff; } diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index 6a5048ad8d..787122d10b 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -285,14 +285,33 @@ fieldset.submit-buttons input { } /* Mention dropdown */ -.atwho-container .atwho-view { - font-size: 12px; +.atwho-view { + border: 1px solid transparent; + border-radius: 3px; + position: absolute; + z-index: 11110 !important; + top: 0; + left: 0; + display: none; min-width: 260px; + margin-top: 18px; } -.atwho-container .atwho-view ul li { +.atwho-view-ul { + overflow-y: auto; + max-height: 200px; + margin: auto; + padding: 0; + list-style: none; +} + +.mention-name { + font-size: 12px; + border-bottom: 1px solid transparent; position: relative; + display: block; padding: 15px 5px 15px 45px; + cursor: pointer; } .mention-avatar {