Add better admin widget sizing options and improve layout.

 






 

 


  Review Request #10757
  —
  Created Oct. 17, 2019 and submitted 

 


















 

  

   Information

  





 
 

  chipx86
 









 
 

  Review Board
 









 
 

  release-4.0.x
 









 
 

  
 









 
 

  
 









 
 

  a330a04...
 






 




 

  

   Reviewers

  





 
 

  reviewboard
 









 
 

  
 






 








 





  


 
 

  
Admin dashboard widgets used to require a size specification, telling

the widget that it's large or small. Small widgets were placed off to

the right, and large widgets were on the left. Large widgets weren't

really that large, and widgets that truly needed to be larger didn't

have a standard way of making this happen.


Now, we have a clearly-defined set of sizes that are based on column

widths. Default widget sizes now take 2 columns (the equivalent of

"large" before), while small widget sizes take 1, and large widget sizes

now take 3. This gives us a lot more flexibility in the kinds of widgets

we provide.


If they need something more custom (such as a 4 column mode), they can

use the #rb-ns-ui.admin.widget.set-colspan() mixin, which will compute

a proper size for the number of columns desired.


Widgets can also be set to full-width mode, which is 100% of the content

area.


In order to properly lay out widgets of various sizes, we now pre-sort

the widgets based on their initial size, placing larger widgets first

and smaller widgets last.


After any new layout computation, any widgets that had a change to their

width (such as full-size widgets, or any standard/large widget if the

viewport is too small) will have their updateSize() method called,

allowing them to recompute their size.


Unit tests were added to ensure that widget setup and layout ordering

was correct.

 








  


 
 

  
Tested that all current widgets look as they did before, meaning that

sizes and the new layout rules were correct.


Tested altering the sizes of the widgets in various orders to ensure

that the new layout rules were properly ordering the widgets from

largest to smallest, and that their orders were stable.

 







 









 





  








 






 
 
 

  

   

    

     
    

    
    
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
    

   

   

    
     

      Description
      From
      Last Updated
     

    
    



     

      
       
       
Col: 31 Duplicate key 'ViewType'.

      		
      
       reviewbotreviewbot
      
      
       
      
     




     

      
       
       
Col: 15 'containerWidth' is defined but never used.

      		
      
       reviewbotreviewbot
      
      
       
      
     




     

      
       
       
Col: 13 Unexpected ')'.

      		
      
       reviewbotreviewbot
      
      
       
      
     




     

      
       
       
Col: 13 Expected an identifier and instead saw ')'.

      		
      
       reviewbotreviewbot
      
      
       
      
     




     

      
       
       
Col: 14 Expected ')' and instead saw ';'.

      		
      
       reviewbotreviewbot
      
      
       
      
     




     

      
       
       
Col: 15 Missing semicolon.

      		
      
       reviewbotreviewbot
      
      
       
      
     




     

      
       
       
Handler -> Handle

      		
      
       daviddavid
      
      
       
      
     


    
   

  

 







 






  

 



















 




 

  


   

   

    
 
Checks run (1 failed, 1 succeeded)


    
   


  

  

  





 

 flake8
 passed.
 





 

 JSHint
 failed.
 
















 
JSHint

 


 







  

 





 














 



 

  

   




chipx86




   

   

  

 



 















 





 

  

   




david




   

   









  

 



 

  


   

   

    
 
david


    
   


  

  

  



    




  1. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    Handler -> Handle
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 




  3. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 




  

 
















 



 

  

   




chipx86




   

   

  

 



 















 



 

  

   




chipx86




   

   

  

 



 

  


   

   

    
 Review request changed

    
   


  

  

  






 

  Status:
  

  Closed (submitted)

  
 




 
Change Summary:

 
Pushed to release-4.0.x (158d108)





 


 










  

 









     

    

   

  

  

   
   Loading...