diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index ac7991aa69..a71d55a499 100644 --- a/phpBB/adm/style/admin.css +++ b/phpBB/adm/style/admin.css @@ -1676,76 +1676,99 @@ fieldset.submit-buttons legend { font-weight: bold; } -.atwho-view { - background: #ffffff; - border: 1px solid #dddddd; - border-radius: 3px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - color: #000000; +.atwho-view { /* mention-container */ + text-align: left; + background-color: #ffffff; + border-radius: 2px; + box-shadow: + 0 3px 1px -2px rgba(0, 0, 0, 0.2), + 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12); position: absolute; - z-index: 11110 !important; - top: 0; - left: 0; - display: none; - min-width: 260px; - margin-top: 18px; + z-index: 999; + top: 20px; + overflow: auto; + transition: all 0.2s ease; } -.atwho-view-ul { - overflow-y: auto; - max-height: 200px; - margin: auto; +.rtl .atwho-view { /* mention-container */ + text-align: right; +} + +.atwho-view-ul { /* mention-list */ + margin: 0; padding: 0; - list-style: none; + list-style-type: none; } -.mention-name { - font-size: 12px; +.mention-media { + color: #757575; + display: inline-flex; + flex-shrink: 0; + justify-content: center; + align-items: center; + margin-right: 10px; + margin-left: 0; +} + +.rtl .mention-media { + margin-right: 0; + margin-left: 10px; +} + +.mention-media-avatar { + font-size: 32px; + line-height: 36px; + text-align: center; + vertical-align: center; + width: 36px; + height: 36px; +} + +.mention-item { + font-size: 14px; + font-weight: 400; + line-height: 1.5; + letter-spacing: 0.04em; border-bottom: 1px solid #dddddd; + color: #212121; position: relative; - display: block; - padding: 15px 5px 15px 45px; + display: flex; + overflow: hidden; + justify-content: flex-start; + align-items: center; + max-width: 300px; + padding: 10px; cursor: pointer; } -.rtl .mention-name { - padding-right: 45px; - padding-left: 15px; +.mention-item:hover, +.mention-item.cur { + text-decoration: none; + background-color: #eeeeee; + color: #2d80d2; } -.mention-name:hover, -.mention-name.cur { - background-color: #0077b3; - color: #ffffff; +.mention-item:hover .mention-media-avatar, +.mention-item.cur .mention-media-avatar { + color: #2d80d2; } -.mention-avatar { - font-size: 14px; - line-height: 30px; - text-align: center; - vertical-align: middle; - background-color: #0077b3; - border: 1px solid #ffffff; - border-radius: 100%; - color: #ffffff; - position: absolute; - top: 50%; - left: 7px; - display: inline-block; - width: 30px; - height: 30px; - margin-top: -16px; +.mention-name, +.mention-rank { + display: block; } -.rtl .mention-avatar { - right: 7px; - left: auto; +.mention-name { + line-height: 1.25; } .mention-rank { - font-size: 10px; - display: block; - margin-top: 2px; + font-size: 12px; + font-weight: 400; + line-height: 1.2871; + letter-spacing: 0.04em; + color: #757575; } /* Input field styles diff --git a/phpBB/assets/javascript/editor.js b/phpBB/assets/javascript/editor.js index 10dbc18935..c80d47ddf8 100644 --- a/phpBB/assets/javascript/editor.js +++ b/phpBB/assets/javascript/editor.js @@ -386,17 +386,17 @@ function getCaretPosition(txtarea) { (function($) { function handle_mentions(txtarea) { - var $mentionDataContainer = $('#format-buttons'), + var $mentionDataContainer = $('[data-mention-url]'), mentionURL = $mentionDataContainer.data('mentionUrl'), mentionNamesLimit = $mentionDataContainer.data('mentionNamesLimit'), mentionTopicId = $mentionDataContainer.data('topicId'); $(txtarea).atwho({ at: "@", displayTpl: function(data) { - var avatar = (data.avatar.src) ? "" : - "", + 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, @@ -436,7 +436,7 @@ function getCaretPosition(txtarea) { phpbb.showDragNDrop(textarea); } - if ($('#mention_params').length) { + if ($('[data-mention-url]').length) { handle_mentions(textarea); } diff --git a/phpBB/styles/prosilver/theme/bidi.css b/phpBB/styles/prosilver/theme/bidi.css index 493d05bea8..5a3286da56 100644 --- a/phpBB/styles/prosilver/theme/bidi.css +++ b/phpBB/styles/prosilver/theme/bidi.css @@ -365,6 +365,24 @@ float: left; } +/** +* mentions.css +*/ + +/* Mention block +---------------------------------------- */ + +/* Mention dropdown +---------------------------------------- */ +.rtl .atwho-view { /* mention-container */ + text-align: right; +} + +.rtl .mention-media { + margin-right: 0; + margin-left: 10px; +} + /** * content.css */ @@ -930,17 +948,6 @@ float: left; } -/* Mention dropdown */ -.rtl .mention-name { - padding-right: 45px; - padding-left: 15px; -} - -.rtl .mention-avatar { - right: 7px; - left: auto; -} - /* Search box ---------------------------------------- */ diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 01b69d331b..96cac04ee1 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -369,6 +369,41 @@ p.post-notice { background-image: none; } +/* colours and backgrounds for mentions.css */ + +/* mention dropdown */ +.atwho-view { /* mention-container */ + background-color: #ffffff; + box-shadow: + 0 3px 1px -2px rgba(0, 0, 0, 0.2), + 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} + +.mention-media { + color: #757575; +} + +.mention-item { + border-bottom-color: #dddddd; + color: #212121; +} + +.mention-item:hover, +.mention-item.cur { + background-color: #eeeeee; + color: #2d80d2; +} + +.mention-item:hover .mention-media-avatar, +.mention-item.cur .mention-media-avatar { + color: #2d80d2; +} + +.mention-rank { + color: #757575; +} + /* colours and backgrounds for content.css */ ul.forums { background-color: #edf4f7; @@ -983,29 +1018,6 @@ fieldset.fields2 dl:hover dt label { outline-color: rgba(19, 164, 236, 0.5); } -.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; -} - -.mention-avatar { - background-color: #0077b3; - border-color: #ffffff; - color: #ffffff; -} - /* input field styles */ .inputbox { background-color: #ffffff; diff --git a/phpBB/styles/prosilver/theme/content.css b/phpBB/styles/prosilver/theme/content.css index 701fa5fd94..338016ac2c 100644 --- a/phpBB/styles/prosilver/theme/content.css +++ b/phpBB/styles/prosilver/theme/content.css @@ -576,11 +576,6 @@ blockquote .codebox { padding: 5px 3px; } -/* Mention block */ -.mention { - font-weight: bold; -} - /* Attachments ---------------------------------------- */ .attachbox { diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index 787122d10b..e05cf090ca 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -284,58 +284,6 @@ fieldset.submit-buttons input { margin: 3px; } -/* Mention dropdown */ -.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-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 { - font-size: 14px; - line-height: 30px; - text-align: center; - vertical-align: middle; - border: 1px solid transparent; - border-radius: 100%; - position: absolute; - top: 50%; - left: 7px; - display: inline-block; - width: 30px; - height: 30px; - margin-top: -16px; -} - -.mention-rank { - font-size: 10px; - display: block; - margin-top: 2px; -} - /* Input field styles ---------------------------------------- */ .inputbox { diff --git a/phpBB/styles/prosilver/theme/mentions.css b/phpBB/styles/prosilver/theme/mentions.css new file mode 100644 index 0000000000..01146e1128 --- /dev/null +++ b/phpBB/styles/prosilver/theme/mentions.css @@ -0,0 +1,87 @@ +/* -------------------------------------------------------------- /* + $Mentions +/* -------------------------------------------------------------- */ + +/* stylelint-disable selector-max-compound-selectors */ +/* stylelint-disable selector-no-qualifying-type */ + +/* Mention block +---------------------------------------- */ +.mention { + font-weight: bold; +} + +/* Mention dropdown +---------------------------------------- */ +.atwho-view { /* mention-container */ + text-align: left; + border-radius: 2px; + position: absolute; + z-index: 999; + top: 20px; + overflow: auto; + transition: all 0.2s ease; +} + +.atwho-view-ul { /* mention-list */ + margin: 0; + padding: 0; + list-style-type: none; +} + +.mention-media { + display: inline-flex; + flex-shrink: 0; + justify-content: center; + align-items: center; + margin-right: 10px; + margin-left: 0; +} + +.mention-media-avatar { + font-size: 32px; + line-height: 36px; + text-align: center; + vertical-align: center; + width: 36px; + height: 36px; +} + +.mention-item { + font-size: 14px; + font-weight: 400; + line-height: 1.5; + letter-spacing: 0.04em; + border-bottom: 1px solid transparent; + position: relative; + display: flex; + overflow: hidden; + justify-content: flex-start; + align-items: center; + max-width: 300px; + padding: 10px; + cursor: pointer; +} + +.mention-item:hover { + text-decoration: none; +} + +.mention-name, +.mention-rank { + display: block; +} + +.mention-name { + line-height: 1.25; +} + +.mention-rank { + font-size: 12px; + font-weight: 400; + line-height: 1.2871; + letter-spacing: 0.04em; +} + +/* stylelint-enable selector-max-compound-selectors */ +/* stylelint-enable selector-no-qualifying-type */ diff --git a/phpBB/styles/prosilver/theme/stylesheet.css b/phpBB/styles/prosilver/theme/stylesheet.css index 94bea37750..8ae9d1ea42 100644 --- a/phpBB/styles/prosilver/theme/stylesheet.css +++ b/phpBB/styles/prosilver/theme/stylesheet.css @@ -14,6 +14,7 @@ @import url("common.css?hash=658f990b"); @import url("buttons.css?hash=eb16911f"); @import url("links.css?hash=5fec3654"); +@import url("mentions.css?hash=a67fa183"); @import url("content.css?hash=f7bdea58"); @import url("buttons.css?hash=eb16911f"); @import url("cp.css?hash=73c6f37d");