You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

actions.web.js 2.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. // @flow
  2. import { CHAT_SIZE } from '../chat/constants';
  3. import { SET_HORIZONTAL_VIEW_DIMENSIONS, SET_TILE_VIEW_DIMENSIONS } from './actionTypes';
  4. import { calculateThumbnailSizeForHorizontalView, calculateThumbnailSizeForTileView } from './functions';
  5. /**
  6. * The size of the side margins for each tile as set in CSS.
  7. */
  8. const TILE_VIEW_SIDE_MARGINS = 10 * 2;
  9. /**
  10. * Sets the dimensions of the tile view grid.
  11. *
  12. * @param {Object} dimensions - Whether the filmstrip is visible.
  13. * @param {Object} windowSize - The size of the window.
  14. * @param {boolean} isChatOpen - Whether the chat panel is displayed, in
  15. * order to properly compute the tile view size.
  16. * @param {boolean} isToolboxVisible - Whether the toolbox is visible, in order
  17. * to adjust the available size.
  18. * @returns {{
  19. * type: SET_TILE_VIEW_DIMENSIONS,
  20. * dimensions: Object
  21. * }}
  22. */
  23. export function setTileViewDimensions(
  24. dimensions: Object, windowSize: Object, isChatOpen: boolean, isToolboxVisible: boolean) {
  25. const { clientWidth, clientHeight } = windowSize;
  26. let heightToUse = clientHeight;
  27. let widthToUse = clientWidth;
  28. if (isChatOpen) {
  29. widthToUse -= CHAT_SIZE;
  30. }
  31. if (isToolboxVisible) {
  32. // The distance from the top and bottom of the screen, to avoid overlapping UI elements.
  33. heightToUse -= 150;
  34. }
  35. const thumbnailSize = calculateThumbnailSizeForTileView({
  36. ...dimensions,
  37. clientWidth: widthToUse,
  38. clientHeight: heightToUse
  39. });
  40. const filmstripWidth = dimensions.columns * (TILE_VIEW_SIDE_MARGINS + thumbnailSize.width);
  41. return {
  42. type: SET_TILE_VIEW_DIMENSIONS,
  43. dimensions: {
  44. gridDimensions: dimensions,
  45. thumbnailSize,
  46. filmstripWidth
  47. }
  48. };
  49. }
  50. /**
  51. * Sets the dimensions of the thumbnails in horizontal view.
  52. *
  53. * @param {number} clientHeight - The height of the window.
  54. * @returns {{
  55. * type: SET_HORIZONTAL_VIEW_DIMENSIONS,
  56. * dimensions: Object
  57. * }}
  58. */
  59. export function setHorizontalViewDimensions(clientHeight: number = 0) {
  60. return {
  61. type: SET_HORIZONTAL_VIEW_DIMENSIONS,
  62. dimensions: calculateThumbnailSizeForHorizontalView(clientHeight)
  63. };
  64. }
  65. export * from './actions.native';