[ticket/13713] Fix styles for mention dropdown

PHPBB3-13713
This commit is contained in:
lavigor 2018-06-15 02:38:48 +03:00 committed by Marc Alexander
parent 31e4fb4729
commit 50400cb785
No known key found for this signature in database
GPG key ID: 50E0D2423696F995
8 changed files with 75 additions and 16 deletions

View file

@ -11,7 +11,6 @@
<!-- IF S_ALLOW_MENTIONS --> <!-- IF S_ALLOW_MENTIONS -->
<div id="mention_params" style="display: none;" data-mention-url="{U_MENTION_URL}" data-mention-names-limit="{S_MENTION_NAMES_LIMIT}" data-topic-id="{S_TOPIC_ID}"></div> <div id="mention_params" style="display: none;" data-mention-url="{U_MENTION_URL}" data-mention-names-limit="{S_MENTION_NAMES_LIMIT}" data-topic-id="{S_TOPIC_ID}"></div>
<!-- ENDIF --> <!-- ENDIF -->
<!-- INCLUDECSS {T_ASSETS_PATH}/css/jquery.atwho.min.css -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.caret.min.js --> <!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.caret.min.js -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.atwho.min.js --> <!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.atwho.min.js -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/editor.js --> <!-- INCLUDEJS {T_ASSETS_PATH}/javascript/editor.js -->

View file

@ -1676,18 +1676,45 @@ fieldset.submit-buttons legend {
font-weight: bold; font-weight: bold;
} }
.atwho-container .atwho-view { .atwho-view {
font-size: 12px; 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; 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; position: relative;
display: block;
padding: 15px 5px 15px 45px; padding: 15px 5px 15px 45px;
cursor: pointer;
} }
.atwho-container .atwho-view ul li:hover, .rtl .mention-name {
.atwho-container .atwho-view ul li.cur { padding-right: 45px;
padding-left: 15px;
}
.mention-name:hover,
.mention-name.cur {
background-color: #0077b3; background-color: #0077b3;
color: #ffffff; color: #ffffff;
} }
@ -1710,6 +1737,11 @@ fieldset.submit-buttons legend {
margin-top: -16px; margin-top: -16px;
} }
.rtl .mention-avatar {
right: 7px;
left: auto;
}
.mention-rank { .mention-rank {
font-size: 10px; font-size: 10px;
display: block; display: block;

View file

@ -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}

View file

@ -396,7 +396,7 @@ function getCaretPosition(txtarea) {
var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "'>" : var avatar = (data.avatar.src) ? "<img src='" + data.avatar.src + "'>" :
"<span class='mention-avatar'><i class='fa fa-" + data.avatar.type + "'></i></span>", "<span class='mention-avatar'><i class='fa fa-" + data.avatar.type + "'></i></span>",
rank = (data.rank) ? "<span class='mention-rank'>" + data.rank + "</span>" : ''; rank = (data.rank) ? "<span class='mention-rank'>" + data.rank + "</span>" : '';
return "<li>" + avatar + "<span>" + data.name + "</span>" + rank + "</li>"; return "<li class='mention-name'>" + avatar + "<span>" + data.name + "</span>" + rank + "</li>";
}, },
insertTpl: "[mention ${param}=${id}]${name}[/mention]", insertTpl: "[mention ${param}=${id}]${name}[/mention]",
limit: mentionNamesLimit, limit: mentionNamesLimit,

View file

@ -29,7 +29,6 @@
<!-- IF S_ALLOW_MENTIONS --> <!-- IF S_ALLOW_MENTIONS -->
<div id="mention_params" style="display: none;" data-mention-url="{U_MENTION_URL}" data-mention-names-limit="{S_MENTION_NAMES_LIMIT}" data-topic-id="{S_TOPIC_ID}"></div> <div id="mention_params" style="display: none;" data-mention-url="{U_MENTION_URL}" data-mention-names-limit="{S_MENTION_NAMES_LIMIT}" data-topic-id="{S_TOPIC_ID}"></div>
<!-- ENDIF --> <!-- ENDIF -->
<!-- INCLUDECSS {T_ASSETS_PATH}/css/jquery.atwho.min.css -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.caret.min.js --> <!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.caret.min.js -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.atwho.min.js --> <!-- INCLUDEJS {T_ASSETS_PATH}/javascript/jquery.atwho.min.js -->
<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/editor.js --> <!-- INCLUDEJS {T_ASSETS_PATH}/javascript/editor.js -->

View file

@ -931,12 +931,12 @@
} }
/* Mention dropdown */ /* Mention dropdown */
.atwho-container .atwho-view ul li { .rtl .mention-name {
padding-right: 45px; padding-right: 45px;
padding-left: 15px; padding-left: 15px;
} }
.mention-avatar { .rtl .mention-avatar {
right: 7px; right: 7px;
left: auto; left: auto;
} }

View file

@ -983,8 +983,19 @@ fieldset.fields2 dl:hover dt label {
outline-color: rgba(19, 164, 236, 0.5); outline-color: rgba(19, 164, 236, 0.5);
} }
.atwho-container .atwho-view ul li:hover, .atwho-view {
.atwho-container .atwho-view ul li.cur { 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; background-color: #0077b3;
color: #ffffff; color: #ffffff;
} }

View file

@ -285,14 +285,33 @@ fieldset.submit-buttons input {
} }
/* Mention dropdown */ /* Mention dropdown */
.atwho-container .atwho-view { .atwho-view {
font-size: 12px; border: 1px solid transparent;
border-radius: 3px;
position: absolute;
z-index: 11110 !important;
top: 0;
left: 0;
display: none;
min-width: 260px; 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; position: relative;
display: block;
padding: 15px 5px 15px 45px; padding: 15px 5px 15px 45px;
cursor: pointer;
} }
.mention-avatar { .mention-avatar {