Add dark mode support for file thumbnails and improve overall styling.

 






 

 


  Review Request #13837
  —
  Created May 7, 2024 and submitted 

 




















 

  

   Information

  





 
 

  chipx86
 









 
 

  Review Board
 









 
 

  release-7.x
 









 
 

  
 









 
 

  
 






 




 

  

   Reviewers

  





 
 

  reviewboard
 









 
 

  
 






 








 





  


 
 

  
This introduces dark mode styling for the file attachment thumbnails,

helping them fit in on the review request page and addressing the

invisible text issue that would occur.


Along with that, some interaction issues have been addressed. There were

two issues in our styling:


    

  1. 

    When editing a caption, the caption area and actions area didn't feel
    
   seamless, as they were semi-transparent and had some overlaps that
    
   looked strange. These are no longer semi-transparent during edit.
    

    2. 

  2. 

    When editing, moving the mouse over another thumbnail made the
    
   thumbnail being edited semi-transparent, which didn't feel right. It
    
   now stays at 100% opacity while in edit mode.
    

    3. 


 








  


 
 

  
Tested the visuals for the file attachments in light and dark mode,

including the caption area, empty captions, actions menu, and the

unsaved caption indicator.


Tested editing the caption and then moving the mouse over another

thumbnail. Verified that the file attachment did not fade out.

 







 









 





  

 


 
 

  



 

  
   


    Summary
    ID

   

  
  

   


    

     

      Add dark mode support for file thumbnails and improve overall styling.
      
This introduces dark mode styling for the file attachment thumbnails,
helping them fit in on the review request page and addressing the
invisible text issue that would occur.

Along with that, some interaction issues have been addressed. There were
two issues in our styling:

1. When editing a caption, the caption area and actions area didn't feel
   seamless, as they were semi-transparent and had some overlaps that
   looked strange. These are no longer semi-transparent during edit.

2. When editing, moving the mouse over another thumbnail made the
   thumbnail being edited semi-transparent, which didn't feel right. It
   now stays at 100% opacity while in edit mode.

     


    		
    f70ef6fd6b9ccc1d7c941fb4c335386130b1706a

   



  
 




 













 

  
  


   

    

     

     

     

    

   


   

    

     

     

     

    

   


   

    

     

     

     

    

   


   

  

 







 
 
 

  

   

    

     
    

    
    
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
    

   

   

    
     

      Description
      From
      Last Updated
     

    
    



     

      
       
       
While you're here, I wonder if we should change these to icon-only buttons. I'm thinking that would look better since …

      		
      
       maubinmaubin
      
      
       
      
     


    
   

  

 







 






  

 



















 




 




 














 





 

  

   




maubin




   

   







  

 



 

  


   

   

    
 
maubin


    
   


  

  

  



    




  1. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 














  2. 
 
    
  
  
    
  
 
    
  
   Light mode

   


    (Revision 1)


   

  


  
    While you're here, I wonder if we should change these to icon-only buttons. I'm thinking that would look better since this is a pretty small space.
    


 
    

   
    
    
    




    
 
    
  
  
  

  
  
   Show all issues
  
 
    

    



    
    While you're here, I wonder if we should change these to icon-only buttons. I'm thinking that would look better since this is a pretty small space.
    
  
    
 
    

 
    
  


    
 
    
 
      

  


    1. 
 
 
      
 
      
  
 
      
 
      
  
      IIRC, these started off as buttons alongside the caption early on, and we moved them to their own dedicated panel below in order to give the caption a 1:1 between editing and display, and ensure maximum space for the caption editing.
      

      We could keep them down here and make them icon-only, but I think in general, if we have room for a label, it's better to use the label in order to be explicit about the action.
      

      I think there's room for rethinking this design more thoroughly, but I want to keep these changes more minimal right now.
      
 
      

      2. 



    2. 
 
 
      
 
      
  
 
      
 
      
  
      I think I agree with Christian here. There's not enough space to put them on the same line, and if they're going to be on their own line, we might as well take advantage and use labels.
      
 
      

      3. 



    3. 
 
 
      
 
      
  
 
      
 
      
  
      Good points.
      
 
      

      4. 


 
    


    

 
    

    3. 







  3. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 




  

 
















 





 

  

   




david




   

   







  

 



 

  


   

   

    
 
david


    
   


  

  

  



    




  1. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 















  2. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 




  

 
















 





 

  

   




maubin




   

   







  

 



 

  


   

   

    
 
maubin


    
   


  

  

  



    




  1. 
 
    
  
    
   
    Ship It!
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 















  2. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 




  

 
















 



 

  

   




chipx86




   

   

  

 



 

  


   

   

    
 Review request changed

    
   


  

  

  







  

   

    Status:
   

   


    Completed

   

  




  

   

    Change Summary:
   

   

    
Pushed to release-7.x (99ca6f0)