Gh 1451 mobile sidebar (#1675)
* temporary checkin * hide sidebar by default < 768 * update to use function * remove unused snapshot * unhide sidebar on expansion * update to handle manual close in personal server
This commit is contained in:
Scott Bishel
GitHub
parent
8dbc6eeff7
commit
754109e168
6 changed files with 859 additions and 4 deletions
|
|
@ -1,5 +1,563 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/sidebarSidebar global templates 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Sidebar octo-sidebar"
|
||||
>
|
||||
<div
|
||||
class="octo-sidebar-header"
|
||||
>
|
||||
<div
|
||||
class="heading"
|
||||
>
|
||||
<div
|
||||
class="SidebarUserMenu"
|
||||
>
|
||||
<div
|
||||
class="ModalWrapper"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="logo"
|
||||
>
|
||||
<div
|
||||
class="logo-title"
|
||||
>
|
||||
<svg
|
||||
class="FocalboardLogoIcon Icon"
|
||||
version="1.1"
|
||||
viewBox="0 0 52.589677 64"
|
||||
x="0px"
|
||||
y="0px"
|
||||
>
|
||||
<path
|
||||
d="m 33.071077,12.069805 c -12.663,-3.4670001 -27.0530002,3.289 -31.6760002,16.943 -4.655,13.75 2.719,28.67 16.4690002,33.325 13.75,4.655 28.67,-2.719 33.326,-16.469 3.804,-11.235 -0.462,-22.701 -8.976,-29.249 l -0.46,4.871 h -0.001 c 4.631,4.896 6.709,11.941 4.325,18.985 -3.362,9.931 -14.447,15.151 -24.76,11.66 -10.313,-3.49 -15.9480002,-14.37 -12.5870002,-24.301 2.9750002,-8.788 11.9980002,-13.715 20.7430002,-12.625 v -10e-4 z m -6.175,16.488 c 3.456,-0.665 6.986,2.754 5.762,6.37 -0.854,2.522 -3.67,3.85 -6.291,2.962 -2.62,-0.887 -4.052,-3.651 -3.197,-6.174 0.573,-1.697 2.034,-2.852 3.726,-3.158 z m -1.285,-4.944 c -1.786,0.323 -3.45,1.104 -4.812,2.258 -1.299,1.101 -2.319,2.545 -2.898,4.258 -0.879,2.597 -0.579,5.323 0.617,7.632 1.206,2.329 3.325,4.234 6.07,5.164 2.744,0.929 5.584,0.701 7.959,-0.417 2.352,-1.107 4.246,-3.091 5.125,-5.688 0.555,-1.639 0.633,-3.254 0.344,-4.761 -0.21,-1.093 -0.615,-2.134 -1.174,-3.091 l 1.019,-5.107 c 0.189,0.187 0.374,0.378 0.552,0.574 1.75,1.919 3.008,4.283 3.508,6.877 0.415,2.154 0.304,4.457 -0.484,6.784 -1.239,3.661 -3.898,6.453 -7.193,8.005 -3.273,1.541 -7.175,1.858 -10.93,0.588 -3.754,-1.271 -6.661,-3.895 -8.326,-7.108 -1.674,-3.233 -2.09,-7.065 -0.851,-10.728 0.819,-2.419 2.26,-4.46 4.097,-6.016 1.88,-1.593 4.181,-2.673 6.656,-3.125 l -0.001,-0.004 c 1.759,-0.339 3.522,-0.313 5.213,0.016 l -3.583,3.761 c -0.294,0.028 -0.588,0.071 -0.883,0.127 h -0.025 z"
|
||||
/>
|
||||
<polygon
|
||||
points="26.057,32.594 37.495,11.658 36.79,8.44 41.066,0.207 43.683,4.611 48.803,4.434 44.185,12.48 40.902,13.697 29.542,34.491 "
|
||||
transform="translate(7.6780426e-5,-0.21919512)"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Focalboard
|
||||
</span>
|
||||
<div
|
||||
class="versionFrame"
|
||||
>
|
||||
<div
|
||||
class="version"
|
||||
>
|
||||
v0.10.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-spacer"
|
||||
/>
|
||||
<div
|
||||
class="sidebarSwitcher"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="HideSidebarIcon Icon"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline
|
||||
points="80,20 50,50 80,80"
|
||||
/>
|
||||
<polyline
|
||||
points="50,20 20,50, 50,80"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-sidebar-list"
|
||||
/>
|
||||
<div
|
||||
class="octo-spacer"
|
||||
/>
|
||||
<div
|
||||
class="SidebarAddBoardMenu"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="menu-entry"
|
||||
>
|
||||
+ Add board
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="SidebarSettingsMenu"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="menu-entry"
|
||||
>
|
||||
Settings
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/sidebarSidebar sidebar expect hidden 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Sidebar octo-sidebar hidden"
|
||||
>
|
||||
<div
|
||||
class="octo-sidebar-header show-button"
|
||||
>
|
||||
<div
|
||||
class="hamburger-icon"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="HamburgerIcon Icon"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline
|
||||
points="20,25 80,25"
|
||||
/>
|
||||
<polyline
|
||||
points="20,50 80,50"
|
||||
/>
|
||||
<polyline
|
||||
points="20,75 80,75"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="show-icon"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="ShowSidebarIcon Icon"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline
|
||||
points="20,20 50,50 20,80"
|
||||
/>
|
||||
<polyline
|
||||
points="50,20 80,50, 50,80"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/sidebarSidebar sidebar hidden 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Sidebar octo-sidebar"
|
||||
>
|
||||
<div
|
||||
class="octo-sidebar-header"
|
||||
>
|
||||
<div
|
||||
class="heading"
|
||||
>
|
||||
<div
|
||||
class="SidebarUserMenu"
|
||||
>
|
||||
<div
|
||||
class="ModalWrapper"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="logo"
|
||||
>
|
||||
<div
|
||||
class="logo-title"
|
||||
>
|
||||
<svg
|
||||
class="FocalboardLogoIcon Icon"
|
||||
version="1.1"
|
||||
viewBox="0 0 52.589677 64"
|
||||
x="0px"
|
||||
y="0px"
|
||||
>
|
||||
<path
|
||||
d="m 33.071077,12.069805 c -12.663,-3.4670001 -27.0530002,3.289 -31.6760002,16.943 -4.655,13.75 2.719,28.67 16.4690002,33.325 13.75,4.655 28.67,-2.719 33.326,-16.469 3.804,-11.235 -0.462,-22.701 -8.976,-29.249 l -0.46,4.871 h -0.001 c 4.631,4.896 6.709,11.941 4.325,18.985 -3.362,9.931 -14.447,15.151 -24.76,11.66 -10.313,-3.49 -15.9480002,-14.37 -12.5870002,-24.301 2.9750002,-8.788 11.9980002,-13.715 20.7430002,-12.625 v -10e-4 z m -6.175,16.488 c 3.456,-0.665 6.986,2.754 5.762,6.37 -0.854,2.522 -3.67,3.85 -6.291,2.962 -2.62,-0.887 -4.052,-3.651 -3.197,-6.174 0.573,-1.697 2.034,-2.852 3.726,-3.158 z m -1.285,-4.944 c -1.786,0.323 -3.45,1.104 -4.812,2.258 -1.299,1.101 -2.319,2.545 -2.898,4.258 -0.879,2.597 -0.579,5.323 0.617,7.632 1.206,2.329 3.325,4.234 6.07,5.164 2.744,0.929 5.584,0.701 7.959,-0.417 2.352,-1.107 4.246,-3.091 5.125,-5.688 0.555,-1.639 0.633,-3.254 0.344,-4.761 -0.21,-1.093 -0.615,-2.134 -1.174,-3.091 l 1.019,-5.107 c 0.189,0.187 0.374,0.378 0.552,0.574 1.75,1.919 3.008,4.283 3.508,6.877 0.415,2.154 0.304,4.457 -0.484,6.784 -1.239,3.661 -3.898,6.453 -7.193,8.005 -3.273,1.541 -7.175,1.858 -10.93,0.588 -3.754,-1.271 -6.661,-3.895 -8.326,-7.108 -1.674,-3.233 -2.09,-7.065 -0.851,-10.728 0.819,-2.419 2.26,-4.46 4.097,-6.016 1.88,-1.593 4.181,-2.673 6.656,-3.125 l -0.001,-0.004 c 1.759,-0.339 3.522,-0.313 5.213,0.016 l -3.583,3.761 c -0.294,0.028 -0.588,0.071 -0.883,0.127 h -0.025 z"
|
||||
/>
|
||||
<polygon
|
||||
points="26.057,32.594 37.495,11.658 36.79,8.44 41.066,0.207 43.683,4.611 48.803,4.434 44.185,12.48 40.902,13.697 29.542,34.491 "
|
||||
transform="translate(7.6780426e-5,-0.21919512)"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Focalboard
|
||||
</span>
|
||||
<div
|
||||
class="versionFrame"
|
||||
>
|
||||
<div
|
||||
class="version"
|
||||
>
|
||||
v0.10.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-spacer"
|
||||
/>
|
||||
<div
|
||||
class="sidebarSwitcher"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="HideSidebarIcon Icon"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline
|
||||
points="80,20 50,50 80,80"
|
||||
/>
|
||||
<polyline
|
||||
points="50,20 20,50, 50,80"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="WorkspaceSwitcherWrapper"
|
||||
>
|
||||
<div
|
||||
class="WorkspaceSwitcher"
|
||||
>
|
||||
<span>
|
||||
Dashboard
|
||||
</span>
|
||||
<i
|
||||
class="CompassIcon icon-chevron-down ChevronDownIcon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Sidebar__onboarding"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
fill="none"
|
||||
height="224"
|
||||
viewBox="0 0 140 224"
|
||||
width="140"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#clip0)"
|
||||
>
|
||||
<path
|
||||
d="M79.7585 57.1415L77.2974 48.396L80.5538 44.7262C81.2834 40.092 78.9882 39.09 77.7357 38.2038C74.8738 36.1748 73.8217 33.3442 71.5735 33.9955C70.321 34.4307 67.409 37.5306 65.6492 40.164C64.7099 41.5856 63.4574 42.5312 64.1212 43.9058C64.607 44.7553 65.1642 45.5619 65.787 46.3168L67.9037 58.0652L79.7585 57.1415Z"
|
||||
fill="#FFBC1F"
|
||||
/>
|
||||
<path
|
||||
d="M68.4455 37.399C64.9479 37.8813 64.3248 38.21 64.3248 38.21C63.4387 39.1682 66.1409 41.4916 66.1409 41.4916L68.4455 37.399Z"
|
||||
fill="#FFBC1F"
|
||||
/>
|
||||
<path
|
||||
d="M68.7711 48.6245C67.6332 48.1122 66.6291 47.3438 65.8371 46.3794C65.5522 46.0099 66.2348 47.3188 66.5323 47.6851C66.8297 48.0515 67.2462 48.6808 67.9194 48.9376C68.3578 49.1067 69.1938 48.828 68.7711 48.6245Z"
|
||||
fill="#332A5F"
|
||||
/>
|
||||
<path
|
||||
d="M68.1822 30.3538C68.7677 29.7683 69.6945 29.9687 70.3333 30.4979C72.9009 32.624 73.809 29.834 77.5946 32.9872C80.2311 35.179 83.5815 36.5223 85.3225 39.4782C86.0364 40.69 86.5906 42.0802 86.3996 43.4736C86.2086 44.867 85.0626 46.2041 83.6567 46.1915C83.4198 46.153 83.1769 46.1891 82.9615 46.2949C82.7915 46.4512 82.6864 46.6658 82.6672 46.8961C82.401 48.1893 81.9345 49.7142 80.657 50.0617C79.943 50.2465 79.0663 50.0116 78.5371 50.522C78.2428 50.8038 78.152 51.2391 77.889 51.5491C77.1719 52.3882 75.6501 51.6993 75.3464 50.641C75.0427 49.5826 75.5249 48.4711 75.9977 47.4753C76.4204 46.5892 76.9652 45.5966 77.9203 45.3868C78.368 45.2866 78.8784 45.3618 79.2448 45.0893C79.6737 44.7762 79.6831 44.1093 79.4859 43.6114C78.9285 42.2243 76.9496 41.6575 75.7441 42.5405C75.1992 42.9382 74.7233 43.5958 74.0501 43.5457C73.214 43.4862 72.8978 42.337 73.2234 41.5667C73.5491 40.7964 74.2442 40.2485 74.692 39.544C75.1397 38.8394 75.2431 37.7466 74.5385 37.2957C74.2969 37.1642 74.0341 37.0763 73.762 37.0358C72.1118 36.605 70.594 35.7724 69.3439 34.6123C68.6888 34.0994 68.1677 33.4354 67.8252 32.6772C67.5277 31.9038 67.5904 30.9394 68.1822 30.3538Z"
|
||||
fill="#1D1400"
|
||||
/>
|
||||
<path
|
||||
d="M71.0849 38.0473C71.0849 38.0066 71.0849 37.9721 71.0849 37.9346C73.3362 38.9961 76.0948 40.3738 77.9266 41.476C79.7583 42.5782 80.4315 43.3171 80.4315 45.509C80.4315 45.891 79.8429 45.8221 79.8429 45.4401C79.8429 44.1657 79.6018 43.2827 78.5121 42.5281C77.626 41.9175 76.6334 41.3946 75.694 40.8717C74.5041 40.211 72.5847 39.2873 70.9784 38.5389C71.0348 38.3761 71.0661 38.2132 71.0849 38.0473Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M69.4443 39.3654C68.7398 39.0773 68.4705 38.1129 68.8463 37.1923C69.2189 36.2843 70.0988 35.7833 70.8001 36.0714C71.5015 36.3594 71.7708 37.3238 71.3982 38.2444C71.2863 38.5672 71.0851 38.8516 70.8179 39.0644C70.5507 39.2773 70.2286 39.4099 69.889 39.4468C69.7367 39.4514 69.5851 39.4237 69.4443 39.3654ZM69.2658 37.3646C68.9872 38.044 69.1437 38.7517 69.6165 38.9458C70.0894 39.14 70.6999 38.7486 70.9786 38.0722C71.2573 37.3959 71.1007 36.6851 70.6279 36.4909C70.542 36.4541 70.4489 36.437 70.3555 36.4408C70.106 36.4785 69.872 36.5848 69.6795 36.748C69.4871 36.9111 69.3438 37.1246 69.2658 37.3646V37.3646Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M72.9856 56.3461C48.8031 56.5308 48.8752 54.2638 46.4641 82.7704C44.0531 111.277 44.0061 112.295 67.8973 113.87C83.8196 114.922 93.2289 121.306 94.0493 112.548C94.8853 103.621 95.4208 103.884 96.8674 88.726C100.105 55.1969 99.5571 56.1457 72.9856 56.3461Z"
|
||||
fill="#FFBC1F"
|
||||
/>
|
||||
<path
|
||||
d="M62.1735 77.3722C55.2848 85.2003 39.7007 91.2498 27.6705 91.2498C25.9501 91.2617 24.2357 91.0437 22.5729 90.6016C21.5529 90.3246 20.5612 89.9524 19.6108 89.4901C9.70673 84.6523 6.75712 69.707 4.59971 64.5749C1.9507 58.2687 4.70617 62.1921 2.91198 58.588C2.28574 57.2948 0.695076 56.4557 0.181555 55.7887C-0.554281 54.8306 0.851636 53.5969 6.14966 57.1884C14.4631 62.8246 13.5425 74.003 21.8058 75.1772C22.8452 75.3108 23.8975 75.3108 24.937 75.1772C25.8618 75.0789 26.7785 74.9146 27.6799 74.6856C42.3716 71.0597 43.6147 57.1759 58.0778 56.6122C58.0684 56.6248 69.0715 69.5348 62.1735 77.3722Z"
|
||||
fill="#FFBC1F"
|
||||
/>
|
||||
<path
|
||||
d="M137.705 66.9797C137.987 67.7625 136.784 71.6608 136.452 75.1678C135.651 83.6973 133.027 96.7889 120.853 101.783C119.312 102.401 117.677 102.746 116.018 102.804C114.964 102.852 113.907 102.804 112.862 102.66C105.394 101.683 97.2589 96.3098 93.2071 87.8618C87.6085 76.2011 85.379 56.4149 85.379 56.4149C90.7459 56.4149 104 55.3848 108.763 76.6082C109.637 80.5253 111.838 83.1837 114.418 84.5302C115.34 85.0119 116.341 85.3227 117.374 85.4476C118.778 85.6304 120.205 85.429 121.503 84.865C122.802 84.3009 123.923 83.3952 124.748 82.2444C131.95 72.5814 132.845 62.2046 138.04 61.1775C143.235 60.1505 136.355 63.1752 137.705 66.9797Z"
|
||||
fill="#FFBC1F"
|
||||
/>
|
||||
<path
|
||||
d="M58.0653 56.6248C43.6053 57.1884 42.3591 71.0722 27.6705 74.695C26.1388 75.1024 24.5586 75.2983 22.9737 75.2774C22.288 80.231 21.7964 85.2097 21.3204 90.1946C23.3599 90.9125 25.5084 91.2716 27.6705 91.2561C39.7007 91.2561 55.2785 85.2097 62.1735 77.3754C69.0684 69.541 58.0653 56.6248 58.0653 56.6248Z"
|
||||
fill="#5D89EA"
|
||||
/>
|
||||
<path
|
||||
d="M115.655 85.0593C112.555 84.0072 109.771 81.1453 108.766 76.605C104.004 55.3816 90.746 56.4055 85.3822 56.4118C85.3822 56.4118 87.6242 76.1949 93.2103 87.8587C97.7255 97.2523 107.301 102.863 115.382 102.813C114.687 96.8922 114.606 90.9648 115.655 85.0593Z"
|
||||
fill="#5D89EA"
|
||||
/>
|
||||
<path
|
||||
d="M75.9007 106.778L74.5261 106.731C77.1939 107.15 79.8649 107.535 82.5421 107.908C82.6005 107.597 82.6443 107.296 82.6736 107.006C80.4149 106.944 78.1573 106.867 75.9007 106.778Z"
|
||||
fill="#67909A"
|
||||
/>
|
||||
<path
|
||||
d="M45.4277 99.3597C31.3372 140.66 30.4824 157.6 31.7912 171.8C33.1001 186.001 43.4801 200.655 57.0195 211.373C59.8783 213.399 63.4479 214.817 61.1871 220.347C57.9025 228.379 66.5415 217.842 68.702 212.578C70.8626 207.315 47.9984 198.175 53.2808 170.16C58.5632 142.145 72.7194 130.706 81.5745 110.898C90.4296 91.0901 45.4277 99.3597 45.4277 99.3597Z"
|
||||
fill="#174AB4"
|
||||
/>
|
||||
<path
|
||||
d="M63.5198 132.751C62.2673 135.121 60.8457 137.651 59.3396 140.266L59.85 140.682C61.4156 137.905 62.9186 135.243 64.0584 133.058C64.2587 132.71 63.7202 132.394 63.5198 132.751Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M55.8641 199.95C56.7659 200.983 57.6834 202.004 58.5977 203.028C58.7292 202.884 58.8607 202.74 58.9954 202.602C58.0936 201.602 57.197 200.598 56.3056 199.59L55.8641 199.95Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M61.9075 102.109C60.2041 148.388 64.6348 169.681 84.6746 184.648C104.714 199.615 120.261 200.154 120.859 207.697C121.457 215.24 123.283 213.518 123.99 205.774C124.945 195.272 129.313 203.072 106.011 185.108C82.7082 167.144 93.7113 119.782 94.8792 105.757C96.0472 91.732 61.9075 102.109 61.9075 102.109Z"
|
||||
fill="#1C58D9"
|
||||
/>
|
||||
<path
|
||||
d="M121.113 200C109.427 194.242 97.2651 187.814 91.8387 175.232C85.7986 161.233 88.3756 145.536 88.7545 130.797C88.9799 121.93 88.7232 113.062 88.1783 104.21C88.1533 103.812 87.5302 103.809 87.5521 104.21C88.0531 112.351 88.313 120.492 88.1783 128.633C88.0437 136.775 87.239 144.935 87.2922 153.095C87.336 160.168 88.1094 167.342 90.6645 173.986C93.0167 180.029 96.9212 185.344 101.984 189.395C107.67 194.023 114.261 197.32 120.796 200.536C121.156 200.717 121.473 200.179 121.113 200Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M51.9344 195.153C52.3227 195.676 52.7235 196.193 53.1306 196.7C53.7255 197.442 54.3392 198.172 54.9592 198.892L55.3976 198.535C54.3831 197.351 53.403 196.146 52.4762 194.906L51.9344 195.153Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M48.8346 190.438C49.5249 191.665 50.2795 192.856 51.0953 194.004L51.637 193.76C50.8412 192.633 50.1043 191.465 49.4295 190.262L48.8346 190.438Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M47.1278 185.042L46.5204 185.183C46.9699 186.554 47.5237 187.889 48.1768 189.176L48.778 188.997C48.3897 188.224 48.0202 187.432 47.7009 186.627C47.4817 186.101 47.3001 185.572 47.1278 185.042Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M45.4026 173.209C45.2806 174.453 45.2241 175.702 45.2336 176.951L45.8598 176.886C45.8515 175.667 45.9121 174.449 46.0414 173.238L45.4026 173.209Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M46.6332 166.578C46.5017 167.054 46.3796 167.517 46.27 167.996C45.9757 169.249 45.7419 170.522 45.5686 171.816L46.1948 171.844C46.4388 170.14 46.787 168.452 47.2375 166.791L46.6332 166.578Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M48.2458 161.765C47.7949 162.933 47.3785 164.091 47.0247 165.234L47.6509 165.444C48.0047 164.279 48.4024 163.127 48.8314 162L48.2458 161.765Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M50.5849 156.385C49.9336 157.757 49.3168 159.125 48.7594 160.481L49.3168 160.697C49.8772 159.297 50.491 157.926 51.1329 156.583C50.9481 156.511 50.7665 156.442 50.5849 156.385Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M56.4278 145.373C55.5573 146.907 54.6868 148.457 53.8383 150.02L54.3612 150.402C55.169 148.939 56.0552 147.374 56.9664 145.774L56.4278 145.373Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M58.651 141.5L57.1229 144.174L57.6584 144.578L59.1645 141.935C58.9954 141.775 58.8232 141.641 58.651 141.5Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M53.1869 151.257C52.5043 152.54 51.8405 153.827 51.208 155.111L51.7591 155.312C52.0378 154.751 52.3227 154.2 52.6108 153.652C52.9427 153.026 53.3122 152.34 53.6973 151.632C53.5001 151.51 53.3435 151.376 53.1869 151.257Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M45.2838 178.345C45.383 180.199 45.6651 182.038 46.1261 183.837L46.7524 183.696C46.291 181.923 46.0099 180.108 45.9132 178.279L45.2838 178.345Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M59.5339 204.077C60.2416 204.872 60.9409 205.673 61.6319 206.479L62.0546 206.047C61.3594 205.242 60.6486 204.443 59.9347 203.645L59.5339 204.077Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M62.9689 207.111C62.8206 207.255 62.6766 207.403 62.5367 207.553C63.3039 208.492 64.0585 209.432 64.7787 210.387C65.0135 210.7 65.5584 210.387 65.3173 210.073C64.5689 209.071 63.7798 208.088 62.9689 207.111Z"
|
||||
fill="#29355B"
|
||||
/>
|
||||
<path
|
||||
d="M79.7178 56.2991C79.1305 57.2749 78.238 58.0298 77.1784 58.4471C73.3614 60.0127 68.4955 60.0127 66.36 56.3617C48.8001 56.3868 48.6436 57.1508 46.4643 82.7673C45.3683 95.6429 44.7609 102.91 46.6271 107.153C56.3119 111.352 67.4622 112.758 77.6262 114.706C82.0391 115.564 86.4729 116.306 90.9276 116.932C92.7343 116.503 93.7989 115.247 94.0588 112.548C94.8948 103.621 95.4303 103.884 96.8769 88.726C99.8046 58.3031 99.6261 56.2647 79.7178 56.2991Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M56.1021 105.131C58.7261 100.086 60.943 95.1733 62.3238 89.631C65.0046 78.7151 66.7012 67.5808 67.3933 56.3618C48.8064 56.3618 46.9151 55.6761 44.6919 81.7905C44.5855 83.0429 46.0478 85.3193 45.5906 86.6094C41.9991 96.7076 29.1204 107.019 30.1725 109.377C31.6567 112.708 37.2929 116.265 44.3945 119.043C46.2732 119.519 48.1519 119.894 50.0651 120.198C51.6186 115.004 53.6392 109.961 56.1021 105.131V105.131Z"
|
||||
fill="#5D89EA"
|
||||
/>
|
||||
<path
|
||||
d="M97.0242 107.46C97.5533 113.647 98.2547 118.933 97.8164 123.664C93.7458 122.985 89.6376 122.559 85.5263 122.271C81.0518 112.877 78.4529 102.776 77.5511 92.3771C77.0157 86.1898 75.3592 62.4614 75.7506 58.9451C76.0199 56.5559 78.9821 58.5693 79.5895 56.2992C99.6293 56.2554 101.765 57.7896 98.834 88.2783C98.69 89.8032 96.6421 91.7227 96.5733 93.1693C96.4037 97.9377 96.5543 102.712 97.0242 107.46V107.46Z"
|
||||
fill="#5D89EA"
|
||||
/>
|
||||
<path
|
||||
d="M66.1094 55.1625C64.738 56.2678 64.9822 55.9641 65.9216 57.7082C66.8609 59.4522 67.3369 61.0147 68.1134 58.9043C68.89 56.7938 68.9776 57.1289 67.9756 55.8701C66.9737 54.6114 66.8108 54.5988 66.1094 55.1625Z"
|
||||
fill="#3859D4"
|
||||
/>
|
||||
<path
|
||||
d="M77.6104 55.5225C74.4948 56.8815 75.6377 56.5715 75.0397 58.6193C73.7527 63.0375 75.5532 60.6985 79.9651 58.1465C82.9679 56.4087 82.6204 56.1457 81.5651 55.081C80.5099 54.0164 80.8387 54.0665 77.7732 55.5225C74.7078 56.9786 80.7416 54.1667 77.6104 55.5225Z"
|
||||
fill="#3859D4"
|
||||
/>
|
||||
<path
|
||||
d="M117.327 85.6449C115.82 91.2334 115.378 97.0551 116.021 102.807C114.967 102.855 113.91 102.807 112.865 102.663C112.267 96.6754 112.756 90.629 114.308 84.8151C114.334 84.7187 114.368 84.6244 114.409 84.5333C115.33 85.015 116.332 85.3259 117.364 85.4508C117.358 85.5165 117.345 85.5815 117.327 85.6449V85.6449Z"
|
||||
fill="#3859D4"
|
||||
/>
|
||||
<path
|
||||
d="M24.9275 75.1898C24.3597 80.3667 23.5748 85.504 22.5728 90.6016C21.5529 90.3246 20.5611 89.9524 19.6107 89.4901C20.5334 84.7452 21.264 79.9743 21.8026 75.1772C22.8394 75.3144 23.8896 75.3186 24.9275 75.1898V75.1898Z"
|
||||
fill="#3859D4"
|
||||
/>
|
||||
<path
|
||||
d="M60.8866 214.385C61.9543 215.703 62.3676 217.466 61.1997 220.334C57.9151 228.366 66.5541 217.829 68.7146 212.566C69.2438 211.27 68.2481 209.748 66.5228 207.738C64.5877 209.929 62.7309 212.149 60.8866 214.385Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M121.253 196.127C121.125 196.44 120.997 196.753 120.868 197.066C119.985 199.161 119.105 201.265 118.179 203.329C119.779 204.581 120.721 205.956 120.859 207.694C121.46 215.24 123.282 213.515 123.99 205.771C124.623 198.782 126.771 199.909 121.253 196.127Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M34.3743 27.7901C34.8106 27.8595 35.2206 27.562 35.2901 27.1257C35.3595 26.6894 35.062 26.2794 34.6257 26.2099L34.3743 27.7901ZM7.4116 0.814006C7.03273 0.586687 6.54132 0.709539 6.31401 1.0884L2.60964 7.26235C2.38232 7.64122 2.50517 8.13263 2.88403 8.35994C3.2629 8.58726 3.75431 8.46441 3.98162 8.08555L7.2744 2.59759L12.7624 5.89036C13.1412 6.11768 13.6326 5.99483 13.8599 5.61597C14.0873 5.2371 13.9644 4.74569 13.5855 4.51838L7.4116 0.814006ZM34.5 27C34.6257 26.2099 34.626 26.21 34.6262 26.21C34.6261 26.21 34.6262 26.21 34.6261 26.21C34.626 26.21 34.6254 26.2099 34.6246 26.2098C34.6229 26.2095 34.6199 26.209 34.6156 26.2083C34.607 26.2068 34.5931 26.2045 34.5743 26.2012C34.5365 26.1946 34.4785 26.1842 34.4015 26.1695C34.2475 26.1401 34.0175 26.0936 33.7206 26.0264C33.1269 25.8919 32.2669 25.6747 31.2153 25.3458C29.1107 24.6877 26.2471 23.585 23.2169 21.8097C17.1631 18.2631 10.461 12.0454 7.77611 1.30597L6.22389 1.69403C9.03903 12.9546 16.0869 19.4869 22.4081 23.1903C25.5654 25.04 28.5455 26.1873 30.7378 26.8729C31.8346 27.2159 32.7364 27.444 33.3672 27.5869C33.6827 27.6583 33.9307 27.7085 34.1016 27.7411C34.1871 27.7575 34.2534 27.7694 34.2992 27.7774C34.3221 27.7814 34.3399 27.7844 34.3525 27.7865C34.3588 27.7875 34.3637 27.7884 34.3674 27.7889C34.3692 27.7892 34.3707 27.7895 34.3719 27.7897C34.3724 27.7898 34.373 27.7899 34.3733 27.7899C34.3739 27.79 34.3743 27.7901 34.5 27Z"
|
||||
fill="white"
|
||||
opacity="0.6"
|
||||
/>
|
||||
<defs>
|
||||
<clippath
|
||||
id="clip0"
|
||||
>
|
||||
<rect
|
||||
fill="white"
|
||||
height="193.262"
|
||||
transform="translate(0 30)"
|
||||
width="140"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
Use the switcher to easily change channels
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-spacer"
|
||||
/>
|
||||
<div
|
||||
class="SidebarSettingsMenu"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="menu-entry"
|
||||
>
|
||||
Settings
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/sidebarSidebar sidebar hidden 2`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Sidebar octo-sidebar hidden"
|
||||
>
|
||||
<div
|
||||
class="octo-sidebar-header show-button"
|
||||
>
|
||||
<div
|
||||
class="hamburger-icon"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="HamburgerIcon Icon"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline
|
||||
points="20,25 80,25"
|
||||
/>
|
||||
<polyline
|
||||
points="20,50 80,50"
|
||||
/>
|
||||
<polyline
|
||||
points="20,75 80,75"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="show-icon"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="ShowSidebarIcon Icon"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline
|
||||
points="20,20 50,50 20,80"
|
||||
/>
|
||||
<polyline
|
||||
points="50,20 80,50, 50,80"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/sidebarSidebar sidebar in dashboard page 1`] = `
|
||||
<div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/sidebarBoardItem sidebar call hideSidebar 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="SidebarBoardItem"
|
||||
>
|
||||
<div
|
||||
class="octo-sidebar-item ' expanded "
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="DisclosureTriangleIcon Icon"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polygon
|
||||
points="37,35 37,65 63,50"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="octo-sidebar-title"
|
||||
title="board title"
|
||||
>
|
||||
i board title
|
||||
</div>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-sidebar-item subitem "
|
||||
>
|
||||
<svg
|
||||
class="BoardIcon Icon"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
height="80"
|
||||
rx="5"
|
||||
ry="5"
|
||||
width="80"
|
||||
x="10"
|
||||
y="10"
|
||||
/>
|
||||
<polyline
|
||||
points="28,25 28,55"
|
||||
style="stroke-width: 15px;"
|
||||
/>
|
||||
<polyline
|
||||
points="50,25 50,70"
|
||||
style="stroke-width: 15px;"
|
||||
/>
|
||||
<polyline
|
||||
points="72,25 72,45"
|
||||
style="stroke-width: 15px;"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="octo-sidebar-title"
|
||||
title="view title"
|
||||
>
|
||||
view title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-sidebar-item subitem "
|
||||
>
|
||||
<svg
|
||||
class="BoardIcon Icon"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
height="80"
|
||||
rx="5"
|
||||
ry="5"
|
||||
width="80"
|
||||
x="10"
|
||||
y="10"
|
||||
/>
|
||||
<polyline
|
||||
points="28,25 28,55"
|
||||
style="stroke-width: 15px;"
|
||||
/>
|
||||
<polyline
|
||||
points="50,25 50,70"
|
||||
style="stroke-width: 15px;"
|
||||
/>
|
||||
<polyline
|
||||
points="72,25 72,45"
|
||||
style="stroke-width: 15px;"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="octo-sidebar-title"
|
||||
title="view title"
|
||||
>
|
||||
view title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -69,6 +69,85 @@ describe('components/sidebarSidebar', () => {
|
|||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('sidebar hidden', () => {
|
||||
const store = mockStore({
|
||||
workspace: {
|
||||
userWorkspaces: new Array<UserWorkspace>(workspace1, workspace2, workspace3),
|
||||
},
|
||||
boards: {
|
||||
boards: [],
|
||||
},
|
||||
views: {
|
||||
views: [],
|
||||
},
|
||||
users: {
|
||||
me: {},
|
||||
},
|
||||
})
|
||||
|
||||
const history = createMemoryHistory()
|
||||
|
||||
const component = wrapIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<Router history={history}>
|
||||
<Sidebar isDashboard={true}/>
|
||||
</Router>
|
||||
</ReduxProvider>,
|
||||
)
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
|
||||
const hideSidebar = container.querySelector('.Button > .HideSidebarIcon')
|
||||
expect(hideSidebar).toBeDefined()
|
||||
|
||||
userEvent.click(hideSidebar as Element)
|
||||
expect(container).toMatchSnapshot()
|
||||
|
||||
const showSidebar = container.querySelector('.Button > .ShowSidebarIcon')
|
||||
expect(showSidebar).toBeDefined()
|
||||
})
|
||||
|
||||
test('sidebar expect hidden', () => {
|
||||
const customGlobal = global as any
|
||||
|
||||
customGlobal.innerWidth = 500
|
||||
|
||||
const store = mockStore({
|
||||
workspace: {
|
||||
userWorkspaces: new Array<UserWorkspace>(workspace1, workspace2, workspace3),
|
||||
},
|
||||
boards: {
|
||||
boards: [],
|
||||
},
|
||||
views: {
|
||||
views: [],
|
||||
},
|
||||
users: {
|
||||
me: {},
|
||||
},
|
||||
})
|
||||
|
||||
const history = createMemoryHistory()
|
||||
|
||||
const component = wrapIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<Router history={history}>
|
||||
<Sidebar isDashboard={true}/>
|
||||
</Router>
|
||||
</ReduxProvider>,
|
||||
)
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
|
||||
const hideSidebar = container.querySelector('.Button > .HideSidebarIcon')
|
||||
expect(hideSidebar).toBeNull()
|
||||
|
||||
const showSidebar = container.querySelector('.Button > .ShowSidebarIcon')
|
||||
expect(showSidebar).toBeDefined()
|
||||
|
||||
customGlobal.innerWidth = 1024
|
||||
})
|
||||
|
||||
test('global templates', () => {
|
||||
const store = mockStore({
|
||||
workspace: {
|
||||
|
|
@ -104,6 +183,8 @@ describe('components/sidebarSidebar', () => {
|
|||
</ReduxProvider>,
|
||||
)
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
|
||||
const addBoardButton = container.querySelector('.SidebarAddBoardMenu > .MenuWrapper')
|
||||
expect(addBoardButton).toBeDefined()
|
||||
userEvent.click(addBoardButton as Element)
|
||||
|
|
|
|||
|
|
@ -32,8 +32,18 @@ type Props = {
|
|||
isDashboard?: boolean
|
||||
}
|
||||
|
||||
function getWindowDimensions() {
|
||||
const {innerWidth: width, innerHeight: height} = window
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
}
|
||||
}
|
||||
|
||||
const Sidebar = React.memo((props: Props) => {
|
||||
const [isHidden, setHidden] = useState(false)
|
||||
const [userHidden, setUserHidden] = useState(false)
|
||||
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())
|
||||
const boards = useAppSelector(getSortedBoards)
|
||||
const views = useAppSelector(getSortedViews)
|
||||
const intl = useIntl()
|
||||
|
|
@ -42,11 +52,34 @@ const Sidebar = React.memo((props: Props) => {
|
|||
loadTheme()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setWindowDimensions(getWindowDimensions())
|
||||
}
|
||||
|
||||
window.addEventListener('resize', handleResize)
|
||||
return () => window.removeEventListener('resize', handleResize)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
hideSidebar()
|
||||
}, [windowDimensions])
|
||||
|
||||
const workspace = useAppSelector(getCurrentWorkspace)
|
||||
if (!boards) {
|
||||
return <div/>
|
||||
}
|
||||
|
||||
const hideSidebar = () => {
|
||||
if (!userHidden) {
|
||||
if (windowDimensions.width < 768) {
|
||||
setHidden(true)
|
||||
} else {
|
||||
setHidden(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isHidden) {
|
||||
return (
|
||||
<div className='Sidebar octo-sidebar hidden'>
|
||||
|
|
@ -54,13 +87,19 @@ const Sidebar = React.memo((props: Props) => {
|
|||
<div className='hamburger-icon'>
|
||||
<IconButton
|
||||
icon={<HamburgerIcon/>}
|
||||
onClick={() => setHidden(false)}
|
||||
onClick={() => {
|
||||
setUserHidden(false)
|
||||
setHidden(false)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className='show-icon'>
|
||||
<IconButton
|
||||
icon={<ShowSidebarIcon/>}
|
||||
onClick={() => setHidden(false)}
|
||||
onClick={() => {
|
||||
setUserHidden(false)
|
||||
setHidden(false)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,7 +118,10 @@ const Sidebar = React.memo((props: Props) => {
|
|||
<div className='octo-spacer'/>
|
||||
<div className='sidebarSwitcher'>
|
||||
<IconButton
|
||||
onClick={() => setHidden(true)}
|
||||
onClick={() => {
|
||||
setUserHidden(true)
|
||||
setHidden(true)
|
||||
}}
|
||||
icon={<HideSidebarIcon/>}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -92,7 +134,10 @@ const Sidebar = React.memo((props: Props) => {
|
|||
<div className='octo-spacer'/>
|
||||
<div className='sidebarSwitcher'>
|
||||
<IconButton
|
||||
onClick={() => setHidden(true)}
|
||||
onClick={() => {
|
||||
setUserHidden(true)
|
||||
setHidden(true)
|
||||
}}
|
||||
icon={<HideSidebarIcon/>}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -129,6 +174,7 @@ const Sidebar = React.memo((props: Props) => {
|
|||
const nextBoardId = boards.length > 1 ? boards.find((o) => o.id !== board.id)?.id : undefined
|
||||
return (
|
||||
<SidebarBoardItem
|
||||
hideSidebar={hideSidebar}
|
||||
key={board.id}
|
||||
views={views}
|
||||
board={board}
|
||||
|
|
|
|||
47
webapp/src/components/sidebar/sidebarBoardItem.test.tsx
Normal file
47
webapp/src/components/sidebar/sidebarBoardItem.test.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
import React from 'react'
|
||||
|
||||
import {createMemoryHistory} from 'history'
|
||||
import {Router} from 'react-router-dom'
|
||||
|
||||
import {render} from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
|
||||
import {TestBlockFactory} from '../../test/testBlockFactory'
|
||||
|
||||
import {wrapIntl} from '../../testUtils'
|
||||
|
||||
import SidebarBoardItem from './sidebarBoardItem'
|
||||
|
||||
describe('components/sidebarBoardItem', () => {
|
||||
test('sidebar call hideSidebar', () => {
|
||||
const board = TestBlockFactory.createBoard()
|
||||
const view = TestBlockFactory.createBoardView(board)
|
||||
|
||||
const view2 = TestBlockFactory.createBoardView(board)
|
||||
view2.fields.sortOptions = []
|
||||
const history = createMemoryHistory()
|
||||
|
||||
const mockHide = jest.fn()
|
||||
|
||||
const component = wrapIntl(
|
||||
<Router history={history}>
|
||||
|
||||
<SidebarBoardItem
|
||||
hideSidebar={mockHide}
|
||||
key={board.id}
|
||||
views={[view, view2]}
|
||||
board={board}
|
||||
/>
|
||||
</Router>,
|
||||
)
|
||||
const {container} = render(component)
|
||||
expect(container).toMatchSnapshot()
|
||||
|
||||
const subItems = container.querySelectorAll('.subitem > .BoardIcon')
|
||||
expect(subItems).toBeDefined()
|
||||
userEvent.click(subItems[0] as Element)
|
||||
expect(mockHide).toBeCalled()
|
||||
})
|
||||
})
|
||||
|
|
@ -26,6 +26,7 @@ type Props = {
|
|||
activeBoardId?: string
|
||||
activeViewId?: string
|
||||
nextBoardId?: string
|
||||
hideSidebar: () => void
|
||||
}
|
||||
|
||||
const SidebarBoardItem = React.memo((props: Props) => {
|
||||
|
|
@ -44,11 +45,13 @@ const SidebarBoardItem = React.memo((props: Props) => {
|
|||
}
|
||||
const newPath = generatePath(match.path, params)
|
||||
history.push(newPath)
|
||||
props.hideSidebar()
|
||||
}, [match, history])
|
||||
|
||||
const showView = useCallback((viewId, boardId) => {
|
||||
const newPath = generatePath(match.path, {...match.params, boardId: boardId || '', viewId: viewId || ''})
|
||||
history.push(newPath)
|
||||
props.hideSidebar()
|
||||
}, [match, history])
|
||||
|
||||
const iconForViewType = (viewType: IViewType): JSX.Element => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue