Improved keyboard selection

for gallery inline results

Author: zhukov

app/less/app.less

@@ -3117,16 +3117,16 @@ a.composer_command_option:hover .composer_command_desc,
 
   .user-select(text);
 
-  &:empty:before {
+  &:empty::before {
     content: attr(placeholder);
     color: #9aa2ab;
     display: block;
     margin-top: -1px;
     margin-left: 1px;
     pointer-events: none;
   }
-  &:empty:active:before,
-  &:empty:focus:before {
+  &:empty:active::before,
+  &:empty:focus::before {
     opacity: 0.75;
   }
 
@@ -3279,14 +3279,25 @@ _:-ms-lang(x), .composer_rich_textarea:empty:focus:before {
   }
 }
 
-
 .composer_dropdown > li.inline_result_gif > a,
 .composer_dropdown > li.inline_result_photo > a {
   padding: 0;
   line-height: 0;
   display: block;
   overflow: hidden;
 }
+li.inline_result_gif.composer_autocomplete_option_active a,
+li.inline_result_photo.composer_autocomplete_option_active a {
+  position: relative;
+
+  .inline_result_ind {
+    display: block;
+    background: rgba(255,255,255,0.3);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+}
 .inline_result_gif .img_gif_video,
 .inline_result_photo .inline_result_photo_image {
   object-fit: cover;

app/partials/desktop/inline_results.html

@@ -2,6 +2,7 @@
   <li class="inline_result_wrap" ng-class="'inline_result_' + result.type" ng-repeat="result in botResults.results track by result.qID" ng-switch="result.type">
 
     <a ng-switch-when="gif" class="img_gif_with_progress_wrap" data-inlineid="{{result.qID}}" ng-style="::{width: result.thumbW, height: result.thumbH}" ng-switch="result._">
+      <div class="inline_result_ind"></div>
       <div ng-switch-when="botInlineMediaResultDocument" ng-switch="result.document.url !== undefined" class="inline_result_gif_mtproto">
         <div ng-switch-when="true" ng-switch="result.document.mime_type == 'video/mp4'">
           <video ng-switch-when="true" width="{{result.thumbW}}" height="{{result.thumbH}}" loop autoplay class="img_gif_video">
@@ -25,11 +26,13 @@
     </a>
 
     <a ng-switch-when="photo" data-inlineid="{{result.qID}}" ng-style="::{width: result.thumbW, height: result.thumbH}" ng-switch="result._">
+      <div class="inline_result_ind"></div>
       <div ng-switch-when="botInlineMediaResultPhoto" class="inline_result_photo_mtproto">
         <img
           class="inline_result_photo_image"
           my-load-thumb
           thumb="result.thumb"
+          ng-style="::{width: result.thumbW, height: result.thumbH}"
         />
       </div>
       <div ng-switch-default ng-switch="result.contentUrl !== undefined" class="inline_result_photo_http">