Merge pull request #7646 from opf/feature/dashboard_styling

Feature/dashboard styling

[ci skip]

app/assets/fonts/openproject_icon/README.md

@@ -17,7 +17,7 @@ Since it seldomly changes, it is only rebuilt manually and on demand.
 
 ## Rebuilding
 
-To rebuild the font (e.g., after changing icons in the source `svg` directory), use the node script `generate.js`.
+To rebuild the font (e.g., after changing icons in the source `app/assets/fonts/openproject_icon/src` directory), use the node script `generate.js`.
 
 ```
 $ cd app/assets/fonts/openproject_icon

app/assets/fonts/openproject_icon/openproject-icon-font.svg

@@ -553,203 +553,206 @@
     <glyph glyph-name="reported-by-me"
       unicode="&#xF1B6;"
       horiz-adv-x="512" d=" M478 9C468 23 437 33 406 46C376 59 368 63 368 63V94S380 103 383 131C390 129 398 142 398 149C399 156 397 174 389 172C390 186 392 199 391 205C389 230 365 255 329 255S270 230 268 205C267 199 268 186 270 172C261 174 260 156 260 149C261 142 268 129 276 131C279 103 291 94 291 94L290 63S283 59 252 46C222 33 190 23 181 9C173 -5 175 -68 175 -68H483S486 -5 478 9zM185 102C186 105 187 109 187 113S186 121 185 124C183 128 181 131 179 134C176 136 173 138 169 140C166 141 162 142 158 142C155 142 152 141 149 140C146 138 143 136 141 134C139 131 137 128 136 124C135 121 134 117 134 113S135 105 136 102C137 98 139 95 141 93C143 90 146 88 149 87C152 85 155 84 158 84C162 84 166 85 169 87C173 88 176 90 179 93C181 95 183 98 185 102zM138 221C139 209 140 197 142 185H175C177 198 178 209 180 221C181 232 181 243 181 255V365H136V255C136 243 136 232 138 221zM74 398H284L389 293L422 325L303 444H28V-68H108V-22H74z" />
-    <glyph glyph-name="resizer-vertical-lines"
+    <glyph glyph-name="resizer-bottom-right"
       unicode="&#xF1B7;"
+      horiz-adv-x="512" d=" M465.4545454545455 -53.4545454545455H512V-100H465.4545454545455V-53.4545454545455z M465.4545454545455 39.6363636363636H512V-6.9090909090909H465.4545454545455V39.6363636363636z M465.4545454545455 132.7272727272728H512V86.1818181818182H465.4545454545455V132.7272727272728z M465.4545454545455 225.8181818181818H512V179.2727272727273H465.4545454545455V225.8181818181818z M465.4545454545455 318.9090909090909H512V272.3636363636364H465.4545454545455V318.9090909090909z M465.4545454545455 412H512V365.4545454545455H465.4545454545455V412z M372.3636363636364 -53.4545454545455H418.909090909091V-100H372.3636363636364V-53.4545454545455z M279.2727272727273 -53.4545454545455H325.8181818181818V-100H279.2727272727273V-53.4545454545455z M186.1818181818182 -53.4545454545455H232.7272727272728V-100H186.1818181818182V-53.4545454545455z M93.0909090909091 -53.4545454545455H139.6363636363636V-100H93.0909090909091V-53.4545454545455z M0 -53.4545454545455H46.5454545454545V-100H0V-53.4545454545455z M372.3636363636364 39.6363636363636H418.909090909091V-6.9090909090909H372.3636363636364V39.6363636363636z M279.2727272727273 39.6363636363636H325.8181818181818V-6.9090909090909H279.2727272727273V39.6363636363636z M372.3636363636364 132.7272727272728H418.909090909091V86.1818181818182H372.3636363636364V132.7272727272728z M372.3636363636364 225.8181818181818H418.909090909091V179.2727272727273H372.3636363636364V225.8181818181818z M372.3636363636364 318.9090909090909H418.909090909091V272.3636363636364H372.3636363636364V318.9090909090909z M279.2727272727273 132.7272727272728H325.8181818181818V86.1818181818182H279.2727272727273V132.7272727272728z M279.2727272727273 225.8181818181818H325.8181818181818V179.2727272727273H279.2727272727273V225.8181818181818z M186.1818181818182 39.6363636363636H232.7272727272728V-6.9090909090909H186.1818181818182V39.6363636363636z M186.1818181818182 132.7272727272728H232.7272727272728V86.1818181818182H186.1818181818182V132.7272727272728z M93.0909090909091 39.6363636363636H139.6363636363636V-6.9090909090909H93.0909090909091V39.6363636363636z" />
+    <glyph glyph-name="resizer-vertical-lines"
+      unicode="&#xF1B8;"
       horiz-adv-x="512" d=" M192 412H224V-100H192V412z M256 412H288V-100H256V412z" />
     <glyph glyph-name="roadmap"
-      unicode="&#xF1B8;"
+      unicode="&#xF1B9;"
       horiz-adv-x="512" d=" M381 17C369 3 345 -8 327 -8H33C15 -8 0 6 0 24V352C0 369 15 384 33 384H327C345 384 369 373 381 359L502 213C514 199 514 177 502 163z" />
     <glyph glyph-name="rss"
-      unicode="&#xF1B9;"
+      unicode="&#xF1BA;"
       horiz-adv-x="512" d=" M138 2C138 -36 108 -66 70 -66C33 -66 2 -36 2 2C2 39 33 70 70 70C108 70 138 39 138 2zM336 -62H246C245 2 220 61 175 107C130 152 70 177 6 178V268C187 265 333 119 336 -62zM510 -62H421C418 166 234 350 7 353V442C283 440 507 215 510 -62z" />
     <glyph glyph-name="rubber"
-      unicode="&#xF1BA;"
+      unicode="&#xF1BB;"
       horiz-adv-x="512" d=" M503 -50C503 -59 496 -67 486 -67H45C36 -67 28 -59 28 -50S36 -33 45 -33H486C496 -33 503 -41 503 -50zM477 293L339 432C332 439 323 443 315 443C306 443 297 440 291 433L19 161C5 148 5 126 19 113L97 30C110 16 136 1 155 1H207C226 1 252 16 265 30L477 244C490 257 490 280 477 293zM237 54C231 47 217 35 207 35H155C145 35 128 47 121 54L43 134L166 259L303 122z" />
     <glyph glyph-name="save"
-      unicode="&#xF1BB;"
+      unicode="&#xF1BC;"
       horiz-adv-x="512" d=" M256 60H192V-4H256zM0 444V-68H448L512 -4V444zM352 -36H160V92H352zM416 188H96V412H416z" />
     <glyph glyph-name="search"
-      unicode="&#xF1BC;"
+      unicode="&#xF1BD;"
       horiz-adv-x="512" d=" M497 -2L361 122C361 123 361 123 360 123C386 156 401 197 401 242C401 352 311 441 201 441S2 352 2 242S91 43 201 43C241 43 278 55 309 75C310 73 311 71 313 70L448 -54C463 -68 483 -69 493 -58L504 -46C514 -35 511 -15 497 -2zM201 95C120 95 54 161 54 242S120 389 201 389C283 389 348 323 348 242S283 95 201 95z" />
     <glyph glyph-name="send-mail"
-      unicode="&#xF1BD;"
+      unicode="&#xF1BE;"
       horiz-adv-x="512" d=" M164 288L308 416H20zM325 396C325 398 325 401 324 403L222 313L322 225C324 228 325 231 325 234zM3 404C2 401 2 399 2 396V234C2 231 3 229 4 226L105 313zM207 299L163 261L120 299L21 214H304zM254 -40L129 101C116 115 119 136 135 148C152 159 175 157 188 142L252 71L442 303C454 318 478 321 495 311C511 300 515 279 503 264z" />
     <glyph glyph-name="server-key"
-      unicode="&#xF1BE;"
+      unicode="&#xF1BF;"
       horiz-adv-x="512" d=" M511 180C506 200 491 225 471 234C461 239 450 242 439 245L406 244C395 240 385 236 375 231C347 215 340 181 338 153C338 145 342 138 344 130C206 -14 236 57 203 -53L256 -68C283 -37 264 -53 322 -31L321 3L340 21L359 4L394 40L376 56L399 81L423 77C438 80 455 82 469 88C495 98 504 126 512 148C511 159 513 170 511 180zM454 169C448 163 438 162 432 168C425 174 425 183 431 189C437 196 447 196 453 190S460 175 454 169zM46 398H347V313H394V444H0V-68H132V-22H46zM101 191H287V160H101zM102 252H288V220H102zM102 313H288V281H102z" />
     <glyph glyph-name="settings"
-      unicode="&#xF1BF;"
+      unicode="&#xF1C0;"
       horiz-adv-x="512" d=" M482 238H411C407 251 401 264 394 276L441 323C452 334 452 352 441 363L421 383C410 394 392 394 381 383L333 335C320 343 306 348 291 352V414C291 430 279 442 263 442H235C219 442 207 430 207 414V352C190 348 175 341 161 333L121 373C110 384 92 384 81 373L61 353C50 342 50 324 61 313L102 272C93 257 87 241 83 223H30C14 223 2 211 2 195V167C2 151 14 139 30 139H87C92 122 100 106 110 92L71 53C60 42 60 24 71 13L91 -7C102 -18 120 -18 131 -7L174 36C188 29 204 24 221 21V-38C221 -54 233 -66 249 -66H277C293 -66 305 -54 305 -38V28C320 33 333 40 345 49L391 3C402 -8 420 -8 431 3L451 23C462 34 462 52 451 63L401 113C407 125 412 139 415 153H482C498 153 510 165 510 181V209C510 225 498 238 482 238zM249 117C210 117 178 149 178 188S210 259 249 259S320 227 320 188S288 117 249 117z" />
     <glyph glyph-name="settings2"
-      unicode="&#xF1C0;"
+      unicode="&#xF1C1;"
       horiz-adv-x="512" d=" M332 143H283C280 152 276 161 271 169L304 201C311 209 311 221 304 229L290 242C282 250 270 250 262 242L230 210C221 215 211 219 201 221V264C201 275 192 283 181 283H162C151 283 143 275 143 264V221C131 218 121 214 111 208L84 236C76 243 64 243 56 236L43 222C35 214 35 202 43 194L71 166C65 156 60 145 58 133H21C11 133 2 124 2 113V94C2 83 11 75 21 75H60C64 63 69 52 76 42L50 16C42 8 42 -4 50 -12L63 -25C71 -33 83 -33 91 -25L120 4C130 -1 141 -4 152 -6V-47C152 -57 161 -66 172 -66H191C202 -66 211 -57 211 -47V-1C220 2 230 7 238 13L269 -18C277 -26 289 -26 297 -18L310 -5C318 3 318 15 310 23L276 57C280 66 284 75 286 84H332C343 84 351 93 351 104V123C351 134 343 143 332 143zM172 60C145 60 123 82 123 109C123 135 145 157 172 157S220 135 220 109C220 82 199 60 172 60zM498 353H467C465 359 462 364 459 369L480 390C485 395 485 403 480 407L471 416C466 421 458 421 454 416L433 395C427 398 421 401 414 403V430C414 437 409 442 402 442H390C383 442 377 437 377 430V403C370 401 364 398 357 394L340 412C335 417 327 417 322 412L314 403C309 398 309 390 314 386L332 368C328 361 325 354 323 346H300C293 346 288 341 288 334V322C288 315 293 309 300 309H325C327 302 331 295 335 289L318 272C313 267 313 259 318 255L327 246C332 241 340 241 344 246L363 265C369 261 376 259 384 258V232C384 225 389 220 396 220H408C415 220 421 225 421 232V261C427 263 433 266 438 270L458 250C463 245 471 245 475 250L484 259C489 264 489 272 484 276L462 298C465 304 467 309 468 316H498C505 316 510 321 510 328V340C510 347 505 353 498 353zM396 300C379 300 365 314 365 331S379 362 396 362S427 348 427 331S413 300 396 300z" />
     <glyph glyph-name="settings3"
-      unicode="&#xF1C1;"
+      unicode="&#xF1C2;"
       horiz-adv-x="512" d=" M504 347L436 280L361 296L345 371L413 439C402 441 391 443 380 444C309 444 251 386 251 315C251 300 254 286 259 272L27 42C-1 15 -4 -27 19 -51C43 -75 85 -72 113 -44L347 188C348 189 348 190 349 190C358 188 369 186 379 186C450 186 508 243 508 314C508 326 506 337 504 347z" />
     <glyph glyph-name="settings4"
-      unicode="&#xF1C2;"
+      unicode="&#xF1C3;"
       horiz-adv-x="512" d=" M444 376V0H68V376H444M512 444H0V-68H512zM171 69H137V307H171zM273 69H239V307H273zM375 69H341V307H375zM205 256C205 247 197 239 188 239H119C110 239 102 247 102 256C102 266 110 273 119 273H188C197 273 205 266 205 256zM307 154C307 144 300 137 290 137H222C212 137 205 144 205 154C205 163 212 171 222 171H290C300 171 307 163 307 154zM410 222C410 213 402 205 393 205H324C315 205 307 213 307 222C307 232 315 239 324 239H393C402 239 410 232 410 222z" />
     <glyph glyph-name="shortcuts"
-      unicode="&#xF1C3;"
+      unicode="&#xF1C4;"
       horiz-adv-x="512" d=" M457 -68H55C25 -68 0 -43 0 -13V389C0 419 25 444 55 444H457C487 444 512 419 512 389V-13C512 -43 487 -68 457 -68zM55 412C42 412 32 402 32 389V-13C32 -26 42 -36 55 -36H457C470 -36 480 -26 480 -13V389C480 402 470 412 457 412zM118 17C114 16 106 13 96 13C73 13 58 29 58 52S74 93 99 93C107 93 114 90 118 89L115 78C112 80 106 81 99 81C81 81 72 69 72 53C72 35 83 24 98 24C106 24 111 26 115 28zM153 113V91H173V80H153V39C153 30 155 24 163 24C167 24 169 25 171 25L172 15C169 14 165 13 160 13C153 13 148 15 145 19C141 23 139 30 139 39V80H127V91H139V109zM188 67V91H200V76H201C204 86 213 93 222 93C224 93 225 92 226 92V79C225 79 223 80 221 80C211 80 204 72 203 62C202 60 202 58 202 55V15H188zM240 127H254V15H240zM318 98V61H354V52H318V15H308V52H272V61H308V98z" />
     <glyph glyph-name="show-all-projects"
-      unicode="&#xF1C4;"
+      unicode="&#xF1C5;"
       horiz-adv-x="512" d=" M160 380H512V316H160zM160 220H512V156H160zM160 60H512V-4H160zM0 396H96V300H0zM0 236H96V140H0zM0 76H96V-20H0z" />
     <glyph glyph-name="show-more-horizontal"
-      unicode="&#xF1C5;"
+      unicode="&#xF1C6;"
       horiz-adv-x="512" d=" M71.28998 253.40953C109.79548 253.40953 141.69999 222.60551 141.69999 182.99952C141.69999 144.49496 109.79549 112.59046 71.28998 112.59046C32.78448 112.59046 0.87997 144.49496 0.87997 182.99952C0.87997 222.6055 32.78447 253.40953 71.28998 253.40953zM253.91599 253.40953C293.52103 253.40953 324.326 222.60551 324.326 182.99952C324.326 144.49496 293.52103 112.59046 253.91599 112.59046C215.4104900000001 112.59046 183.50598 144.49496 183.50598 182.99952C183.50693 222.6055 215.41048 253.40953 253.91599 253.40953zM440.9429800000001 253.40953C479.44848 253.40953 511.35299 222.60551 511.35299 182.99952C511.35299 144.49496 479.44849 112.59046 440.9429800000001 112.59046C402.4384200000001 112.59046 370.53392 144.49496 370.53392 182.99952C370.5329700000001 222.6055 402.4374800000001 253.40953 440.9429800000001 253.40953z" />
     <glyph glyph-name="show-more"
-      unicode="&#xF1C6;"
+      unicode="&#xF1C7;"
       horiz-adv-x="512" d=" M326 348C326 313 298 284 262 284C227 284 198 313 198 348S227 412 262 412C298 412 326 383 326 348zM326 182C326 146 298 118 262 118C227 118 198 146 198 182C198 217 227 246 262 246C298 246 326 217 326 182zM326 12C326 -23 298 -52 262 -52C227 -52 198 -23 198 12S227 76 262 76C298 76 326 47 326 12z" />
     <glyph glyph-name="sort-ascending"
-      unicode="&#xF1C7;"
+      unicode="&#xF1C8;"
       horiz-adv-x="512" d=" M256 444L182 315H330zM240 315H272V-68H240z" />
     <glyph glyph-name="sort-by"
-      unicode="&#xF1C8;"
+      unicode="&#xF1C9;"
       horiz-adv-x="512" d=" M363 444L289 315H437zM347 315H379V-68H347zM149 -68L75 61H223zM133 444H165V61H133z" />
     <glyph glyph-name="sort-descending"
-      unicode="&#xF1C9;"
+      unicode="&#xF1CA;"
       horiz-adv-x="512" d=" M256 -68L182 61H330zM240 444H272V61H240z" />
     <glyph glyph-name="sort-down"
-      unicode="&#xF1CA;"
+      unicode="&#xF1CB;"
       horiz-adv-x="512" d=" M256 -67L31 323H481zM31 443H481V385H31z" />
     <glyph glyph-name="sort-up"
-      unicode="&#xF1CB;"
+      unicode="&#xF1CC;"
       horiz-adv-x="512" d=" M256 443L31 53H481zM31 -9H481V-67H31z" />
     <glyph glyph-name="square"
-      unicode="&#xF1CC;"
+      unicode="&#xF1CD;"
       horiz-adv-x="512" d=" M437 113L361 63V-12L437 -63L512 -12V63zM437 15L382 52L437 89L492 52zM393 439L302 378V286L393 225L485 286V378zM393 320L326 364L393 409L460 364zM158 305L0 200V42L158 -63L315 42V200zM158 101L43 177L158 254L273 177z" />
     <glyph glyph-name="star"
-      unicode="&#xF1CD;"
+      unicode="&#xF1CE;"
       horiz-adv-x="512" d=" M256 430L319 249L511 245L358 129L413 -54L256 55L99 -54L154 129L1 245L193 249z" />
     <glyph glyph-name="status-reporting"
-      unicode="&#xF1CE;"
+      unicode="&#xF1CF;"
       horiz-adv-x="512" d=" M374 101V153L448 254H374V305L448 406H374V408C374 428 355 444 331 444H180C156 444 137 428 137 408V406H63L137 305V254H63L137 153V101H63L137 1V-32C137 -52 156 -67 180 -67H331C355 -67 374 -52 374 -32V1L448 101zM324 187C324 150 294 120 257 120S190 150 190 187S220 254 257 254S324 224 324 187zM324 339C324 302 294 272 257 272S190 302 190 339S220 406 257 406S324 376 324 339zM257 -33C220 -33 190 -3 190 34S220 101 257 101S324 71 324 34S294 -33 257 -33z" />
     <glyph glyph-name="status"
-      unicode="&#xF1CF;"
+      unicode="&#xF1D0;"
       horiz-adv-x="512" d=" M256 380C115 380 0 265 0 124V-4H512V124C512 265 397 380 256 380zM254 316C272 316 286 302 286 284C286 276 283 268 277 262S263 252 254 252C237 252 223 266 222 283C222 302 236 316 254 316zM65 82H63C53 83 46 87 40 94C35 101 32 109 33 117C35 134 49 146 65 146H69C77 145 85 141 90 134S98 119 97 110C95 94 82 82 65 82zM124 182C117 173 107 168 97 168C91 168 84 170 79 174C72 178 67 185 66 194C64 202 66 211 71 218C80 232 101 236 115 227C130 216 133 197 124 182zM180 233C176 231 171 229 165 229C154 229 143 236 137 246C129 262 134 281 150 289C165 298 186 291 194 276S196 242 180 233zM256 12C230 12 208 34 208 60S230 108 256 108S304 86 304 60S282 12 256 12zM353 252L304 102C292 115 275 124 256 124C253 124 250 123 248 123L323 265C331 281 344 291 351 288S359 269 353 252zM387 184C382 191 380 200 381 208C383 217 387 224 394 229C409 239 429 235 439 221C444 215 446 206 444 198C443 190 438 182 431 177C426 173 419 171 413 171C402 171 393 176 387 184zM463 81C458 77 451 75 445 75C434 75 425 80 419 88C414 95 412 104 413 112C415 121 419 128 426 133C441 143 461 139 471 125C476 119 478 110 476 102C475 94 470 86 463 81z" />
     <glyph glyph-name="strike-through"
-      unicode="&#xF1D0;"
+      unicode="&#xF1D1;"
       horiz-adv-x="512" d=" M512 205H345C332 210 318 216 304 220C288 225 272 230 257 235S228 246 216 252S195 266 187 275C180 283 177 294 177 307C177 317 179 327 183 336C188 345 194 352 202 359C211 366 221 371 232 375C244 379 257 381 272 381C289 381 303 379 316 375C328 371 339 367 348 362C357 358 364 354 370 350C377 347 382 345 387 345C395 345 400 348 404 356L423 388C405 405 383 419 357 429S302 444 270 444C242 444 217 440 195 432S154 414 139 401S113 373 105 355C97 338 93 320 93 302C93 280 97 262 104 247C112 232 121 219 134 209C135 207 137 206 138 205H0V159H242C252 156 261 153 270 150C286 146 299 140 311 134C323 127 333 120 341 111C348 102 352 90 352 77C352 66 350 55 345 45C341 36 335 27 327 19C318 12 308 6 295 2C282 -3 267 -5 250 -5C230 -5 214 -2 201 2C187 6 176 12 167 17C158 23 150 28 143 32C137 37 130 39 125 39C119 39 114 38 110 36C106 33 103 30 101 26L80 -7C100 -25 123 -39 152 -51C180 -62 211 -68 246 -68C276 -68 303 -64 326 -56C348 -47 368 -36 384 -22S412 9 420 29C428 48 432 69 432 92C432 112 428 129 421 143C418 149 414 154 411 159H512z" />
     <glyph glyph-name="text"
-      unicode="&#xF1D1;"
+      unicode="&#xF1D2;"
       horiz-adv-x="512" d=" M137 -67V-37C166 -36 183 -34 189 -31C194 -29 198 -24 200 -17C203 -6 204 25 204 77V296C204 355 204 389 203 396H151C125 396 101 395 81 393C73 393 69 392 68 390C66 389 64 385 63 378C60 361 58 342 58 320H28C27 370 26 398 26 405C25 415 24 427 22 439L25 443C37 442 49 441 62 440C83 440 123 439 182 439H330C391 439 432 440 452 440C464 441 475 442 486 443L490 439C488 424 486 411 486 400C486 398 485 372 484 320H454C454 339 452 357 449 375C448 383 446 389 445 390C443 392 439 392 433 393C413 395 389 396 361 396H309C308 387 308 354 308 296V78C308 25 309 -7 312 -17C314 -24 317 -28 323 -31C328 -34 346 -36 375 -37V-67C328 -65 288 -64 256 -64C222 -64 182 -65 137 -67z" />
     <glyph glyph-name="ticket-checked"
-      unicode="&#xF1D2;"
+      unicode="&#xF1D3;"
       horiz-adv-x="512" d=" M279 -68L182 42C172 53 174 69 187 78C199 87 218 85 228 74L277 18L425 199C435 211 453 213 466 205C479 196 482 180 472 168zM288 398L393 293L426 325L307 444H32V-68H159V-22H78V398z" />
     <glyph glyph-name="ticket-down"
-      unicode="&#xF1D3;"
+      unicode="&#xF1D4;"
       horiz-adv-x="512" d=" M419 47L461 120H427V238H324V120H292L334 47L377 -26zM306 398L412 293L444 325L326 444H51V-68H278V-22H97V398z" />
     <glyph glyph-name="ticket-edit"
-      unicode="&#xF1D4;"
+      unicode="&#xF1D5;"
       horiz-adv-x="512" d=" M215 -50L221 -7L227 37L264 0L301 -38L258 -44zM425 111L314 0L301 12L413 124L388 148L276 37L264 49L375 161L363 173L239 49L314 -25L437 99zM476 136C483 142 483 153 476 160L426 210C419 216 408 217 402 210C401 209 401 209 401 208L400 209L377 185L451 110L475 134L474 135C475 135 476 135 476 136zM288 398L394 293L426 325L308 444H33V-68H160V-22H79V398z" />
     <glyph glyph-name="ticket-minus"
-      unicode="&#xF1D5;"
+      unicode="&#xF1D6;"
       horiz-adv-x="512" d=" M322 57V100H481V57zM427 326L309 444H34V-68H428V19H382V-22H80V398H290L382 306V138H428V326z" />
     <glyph glyph-name="ticket-note"
-      unicode="&#xF1D6;"
+      unicode="&#xF1D7;"
       horiz-adv-x="512" d=" M82 398H292L397 293L430 325L311 444H36V-68H163V-22H82zM365 241H292C231 241 182 192 182 131C182 77 222 31 274 22V-53L372 21C430 24 476 73 476 131C476 192 426 241 365 241zM365 58H359L310 21V58H292C251 58 219 91 219 131C219 172 251 205 292 205H365C406 205 439 172 439 131C439 91 406 58 365 58z" />
     <glyph glyph-name="ticket"
-      unicode="&#xF1D7;"
+      unicode="&#xF1D8;"
       horiz-adv-x="512" d=" M453 326L334 444H59V-68H453V326zM105 -22V398H315L407 306V-22H105z" />
     <glyph glyph-name="time"
-      unicode="&#xF1D8;"
+      unicode="&#xF1D9;"
       horiz-adv-x="512" d=" M256 368C355 368 436 287 436 188S355 8 256 8S76 89 76 188S157 368 256 368M256 442C116 442 2 328 2 188S116 -66 256 -66S510 48 510 188S396 442 256 442zM260 193C249 193 241 201 241 211V285C241 295 249 304 260 304C270 304 278 295 278 285V211C278 201 270 193 260 193zM352 119C348 119 344 120 341 123L248 197C240 203 239 215 245 223C252 231 263 232 271 226L364 152C372 145 373 134 367 126C363 121 358 119 352 119z" />
     <glyph glyph-name="to-fullscreen"
-      unicode="&#xF1D9;"
+      unicode="&#xF1DA;"
       horiz-adv-x="512" d=" M87 -55.3000000000001L215 -55.3000000000001L215 -23.3000000000001L109 -23.3000000000001L228 91.7000000000001L202 117.7000000000001L87 -1.3000000000001L87 104.7000000000001L55 104.7000000000001L55 -55.3000000000001z M320 183.7L435 302.7000000000001L435 196.7L467 196.7L467 356.7000000000001L307 356.7000000000001L307 324.7000000000001L413 324.7000000000001L294 209.7z" />
     <glyph glyph-name="toggle"
-      unicode="&#xF1DA;"
+      unicode="&#xF1DB;"
       horiz-adv-x="512" d=" M131 445H225V351H131zM131 236H225V142H131zM131 25H225V-69H131zM287 344H381V250H287zM287 130H381V37H287z" />
     <glyph glyph-name="training-consulting"
-      unicode="&#xF1DB;"
+      unicode="&#xF1DC;"
       horiz-adv-x="512" d=" M3 374V-10H512V374zM147 6H13S10 60 19 70C22 73 29 79 35 82V342H480V22H278V6zM275 70C266 82 240 89 214 102C189 111 182 118 182 118V143S192 150 195 175C198 172 205 182 205 188S205 210 195 207C195 220 198 230 198 236C198 258 176 278 147 278C115 278 96 255 93 236C93 230 93 220 96 207C86 210 86 194 86 188S93 172 99 172C102 146 112 140 112 140V114L80 98C64 92 48 86 35 79C29 76 22 73 19 66C13 54 13 2 13 2H282V18C278 38 278 63 275 70zM285 166L256 134L301 156C310 153 320 150 330 150H381C426 150 461 185 461 230C461 274 426 310 381 310H330C285 310 250 274 250 230C250 204 262 178 285 166zM330 297H381C416 297 445 268 445 233S416 169 381 169H330C294 169 266 198 266 233S294 297 330 297zM304 258H403V249H304zM304 236H403V226H304zM304 217H403V207H304z" />
     <glyph glyph-name="two-factor-authentication"
-      unicode="&#xF1DC;"
+      unicode="&#xF1DD;"
       horiz-adv-x="512" d=" M411 242.0000000000001V290C411 375 341 443 256 443S101 375 101 290V242.0000000000001H67V-67H445V242.0000000000001H411zM342 242.0000000000001H170V290C170 336 209 374 256 374S342 336 342 290V242.0000000000001zM214.4 2H147.7L164.1 94.5C154.7 100.4 147.7 109.7000000000001 147.7 122.6C147.7 141.3000000000001 162.9 155.4000000000001 180.5 155.4000000000001C199.2 155.4000000000001 214.4 141.4000000000001 214.4 122.6C214.4 109.7000000000001 207.4 100.4000000000001 196.8 94.5L214.4 2zM364.3 3.1999999999999H297.6L314 95.6999999999999C304.6 101.5999999999999 297.6 110.9 297.6 123.8C297.6 142.5 312.8 156.6 330.4000000000001 156.6C349.1 156.6 364.3 142.6 364.3 123.8C364.3 110.9 357.3 101.6 346.7 95.6999999999999L364.3 3.1999999999999z" />
     <glyph glyph-name="types"
-      unicode="&#xF1DD;"
+      unicode="&#xF1DE;"
       horiz-adv-x="512" d=" M511 347L415 443H288L1 156L224 -67L511 220zM385 266C357 266 334 289 334 317S357 368 385 368C413 367 435 345 435 317S413 266 385 266z" />
     <glyph glyph-name="underline"
-      unicode="&#xF1DE;"
+      unicode="&#xF1DF;"
       horiz-adv-x="512" d=" M79 174V444H139V174C139 155 142 138 147 123C152 107 160 94 170 82C180 71 192 62 207 56C221 50 238 47 256 47C275 47 291 50 305 56C320 62 332 71 342 82S360 107 365 122C370 138 373 155 373 173V444H433V174C433 148 429 124 421 102C413 81 401 62 386 46S352 17 330 8S284 -6 256 -6C229 -6 204 -1 182 8S142 30 126 46C111 62 99 81 91 102C83 124 79 148 79 174zM54 -36H458V-68H54z" />
     <glyph glyph-name="undo"
-      unicode="&#xF1DF;"
+      unicode="&#xF1E0;"
       horiz-adv-x="512" d=" M88 248C98 273 114 295 133 315C175 357 231 380 290 380S405 357 447 315S512 218 512 158C512 99 489 43 447 2C440 -5 431 -8 423 -8C414 -8 405 -5 399 2C385 15 385 37 399 50C428 79 444 117 444 158S428 238 399 267S331 312 290 312S211 296 182 267C160 245 146 219 140 189L213 107H0V346z" />
     <glyph glyph-name="unit"
-      unicode="&#xF1E0;"
+      unicode="&#xF1E1;"
       horiz-adv-x="512" d=" M480 380C480 345 380 316 256 316S32 345 32 380S132 444 256 444S480 415 480 380zM256 284C236 284 96 286 32 329V252C32 217 132 188 256 188S480 217 480 252V329C416 286 276 284 256 284zM256 156C236 156 96 158 32 201V124C32 89 132 60 256 60S480 89 480 124V201C416 158 276 156 256 156zM256 28C236 28 96 30 32 73V-4C32 -39 132 -68 256 -68S480 -39 480 -4V73C416 30 276 28 256 28z" />
     <glyph glyph-name="unlocked"
-      unicode="&#xF1E1;"
+      unicode="&#xF1E2;"
       horiz-adv-x="512" d=" M368 429C289 429 224 364 224 285V235H0V-53H352V235H288V285C288 329 324 365 368 365S448 329 448 285V235H512V285C512 364 447 429 368 429zM201 11H147L161 87C153 91 147 100 147 110C147 125 159 137 174 137S201 125 201 110C201 100 195 91 187 87z" />
     <glyph glyph-name="unordered-list"
-      unicode="&#xF1E2;"
+      unicode="&#xF1E3;"
       horiz-adv-x="512" d=" M160 380H512V316H160zM98 348C98 321 76 300 50 300C23 300 2 321 2 348S23 396 50 396C76 396 98 375 98 348zM160 220H512V156H160zM98 188C98 161 76 140 50 140C23 140 2 161 2 188S23 236 50 236C76 236 98 215 98 188zM160 60H512V-4H160zM98 28C98 1 76 -20 50 -20C23 -20 2 1 2 28S23 76 50 76C76 76 98 55 98 28z" />
     <glyph glyph-name="unwatched"
-      unicode="&#xF1E3;"
+      unicode="&#xF1E4;"
       horiz-adv-x="512" d=" M1 204V185C119 -11 393 -11 511 185V204C393 401 119 401 1 204zM256 77C191 77 138 130 138 195S191 312 256 312S374 260 374 195S321 77 256 77z" />
     <glyph glyph-name="upload"
-      unicode="&#xF1E4;"
+      unicode="&#xF1E5;"
       horiz-adv-x="512" d=" M507 238C496 300 433 330 375 325C356 433 182 434 167 324C124 325 92 297 82 255C37 249 4 216 2 169C-1 119 46 85 91 82C106 81 106 104 91 105C5 109 5 229 91 234H92C97 234 101 236 102 242C103 247 104 252 105 256C114 284 134 301 163 302H177C184 301 187 306 187 312C188 312 188 313 188 314C192 409 348 409 355 314V311C356 310 356 309 357 308C357 307 358 307 358 306C359 306 359 306 359 305C361 303 364 302 368 302H369C492 325 533 152 413 117V116C399 112 405 91 419 95C483 114 519 171 507 238zM273 239C268 246 259 246 254 239C234 211 213 183 193 155C190 150 191 145 194 142C196 140 199 138 203 138H243V-4C243 -18 252 -29 264 -29C275 -29 284 -18 284 -4V138H324C332 138 339 148 334 155C314 183 294 211 273 239z" />
     <glyph glyph-name="user-minus"
-      unicode="&#xF1E5;"
+      unicode="&#xF1E6;"
       horiz-adv-x="512" d=" M295 35V66H465C446 84 403 98 360 115C312 135 301 142 301 142V188S318 202 324 245C335 242 347 262 348 272C348 282 346 310 332 307C335 329 337 348 336 358C333 394 296 433 241 433C185 433 149 394 145 358C144 348 146 329 149 307C135 310 133 282 134 272C134 262 146 242 157 245C163 202 181 188 181 188L180 142S169 135 121 115C74 96 25 82 11 59C-2 39 2 -57 2 -57H295V35zM326 -26V35H511V-26z" />
     <glyph glyph-name="user-plus"
-      unicode="&#xF1E6;"
+      unicode="&#xF1E7;"
       horiz-adv-x="512" d=" M345 -2H281V125H345V128C324 137 318 141 318 141V188S337 202 342 247C354 244 366 264 367 275C367 286 365 315 351 312C354 334 356 353 355 364C351 402 314 442 256 442S161 402 157 364C156 353 158 334 161 312C147 315 145 286 145 275C146 264 158 244 170 247C175 202 194 188 194 188V141S182 133 132 113C83 92 33 78 18 55C5 34 9 -66 9 -66H345V-2zM440 -34H377V157H440zM313 29V93H504V29z" />
     <glyph glyph-name="user"
-      unicode="&#xF1E7;"
+      unicode="&#xF1E8;"
       horiz-adv-x="512" d=" M495 54C480 77 430 92 380 112C331 133 319 140 319 140L318 188S337 202 343 247C354 244 367 265 367 276C368 286 366 315 351 312C354 334 356 354 355 365C352 403 314 443 256 443S160 403 157 365C156 354 158 334 161 312C146 315 144 286 145 276C145 265 158 244 169 247C175 202 194 188 194 188L193 140S181 133 132 112C82 92 32 77 17 54C3 33 7 -67 7 -67H505S509 33 495 54z" />
     <glyph glyph-name="view-card"
-      unicode="&#xF1E8;"
+      unicode="&#xF1E9;"
       horiz-adv-x="512" d=" M0 359H245V167H0V359z M267 359H512V167H267V359z M0 136H245V-56H0V136z M267 136H512V-56H267V136z" />
     <glyph glyph-name="view-fullscreen"
-      unicode="&#xF1E9;"
+      unicode="&#xF1EA;"
       horiz-adv-x="512" d=" M0 348H512V-4H0z" />
     <glyph glyph-name="view-list"
-      unicode="&#xF1EA;"
+      unicode="&#xF1EB;"
       horiz-adv-x="512" d=" M0 348H512V284H0zM0 252H512V188H0zM0 156H512V92H0zM0 60H512V-4H0z" />
     <glyph glyph-name="view-split"
-      unicode="&#xF1EB;"
+      unicode="&#xF1EC;"
       horiz-adv-x="512" d=" M0 348H192V284H0zM0 252H192V188H0zM0 156H192V92H0zM0 60H192V-4H0zM224 348H512V-4H224z" />
     <glyph glyph-name="view-timeline"
-      unicode="&#xF1EC;"
+      unicode="&#xF1ED;"
       horiz-adv-x="512" d=" M44 368H173V317H44zM102 265H466V214H102zM271 162H369V111H271zM53 59H417V8H53zM0 368H33V8H0zM479 368H512V8H479z" />
     <glyph glyph-name="warning"
-      unicode="&#xF1ED;"
+      unicode="&#xF1EE;"
       horiz-adv-x="512" d=" M503 7L429 147C411 181 381 236 363 270L289 407C271 441 241 441 223 407L149 270C131 236 101 180 83 146L9 7C-9 -27 7 -57 46 -57H466C505 -57 521 -27 503 7zM291 13H221V83H291zM291 119H221V259H291z" />
     <glyph glyph-name="watched"
-      unicode="&#xF1EE;"
+      unicode="&#xF1EF;"
       horiz-adv-x="512" d=" M1 205V185C119 -11 393 -11 511 185V205C393 401 119 401 1 205zM256 77C191 77 138 130 138 195S191 312 256 312S374 260 374 195S321 77 256 77zM315 195C315 162 288 136 256 136S197 162 197 195C197 227 224 254 256 254S315 227 315 195z" />
     <glyph glyph-name="wiki-edit"
-      unicode="&#xF1EF;"
+      unicode="&#xF1F0;"
       horiz-adv-x="512" d=" M256 305C256 385 78 401 0 401V49H16C22 49 27 48 32 48V17C96 17 224 36 224 -15H288V305C288 326 322 367 480 369V178H512V401C434 401 256 385 256 305zM224 81V66C177 94 90 96 32 97V369C48 368 62 368 76 367C78 367 81 366 84 366H87C150 362 216 348 223 311C224 308 224 306 224 305zM327 13L322 -18L318 -49L349 -45L381 -40L354 -13zM479 58L470 67L389 -13L381 -4L461 76L443 94L363 14L354 23L434 103L425 112L336 23L389 -31zM471 138C466 143 458 143 453 139V137L452 138L435 120L489 67L506 84C506 85 507 85 507 85C512 90 512 98 507 103z" />
     <glyph glyph-name="wiki"
-      unicode="&#xF1F0;"
+      unicode="&#xF1F1;"
       horiz-adv-x="512" d=" M256 300C256 380 78 396 0 396V44H32V12C96 12 224 31 224 -20H288C288 31 416 12 480 12V44H512V396C434 396 256 380 256 300zM32 364C48 364 62 363 76 362H87C150 357 216 344 223 306C224 304 224 302 224 300V62C177 89 90 92 32 92zM480 92C422 92 335 89 288 62V300C288 321 322 362 480 364z" />
     <glyph glyph-name="wiki2"
-      unicode="&#xF1F1;"
+      unicode="&#xF1F2;"
       horiz-adv-x="512" d=" M239 357C178 392 69 392 69 392V86S178 86 239 51zM273 357C334 392 443 392 443 392V86S334 86 273 51zM477 358V47L273 18H239L35 47V358H1V18L239 -16H273L511 18V358z" />
     <glyph glyph-name="work-packages"
-      unicode="&#xF1F2;"
+      unicode="&#xF1F3;"
       horiz-adv-x="512" d=" M416 124V220H288V252H384V444H160V252H256V220H96V124H0V-68H224V124H128V188H384V124H288V-68H512V124zM192 92V60H32V92zM192 380V412H352V380zM480 60H320V92H480z" />
     <glyph glyph-name="workflow"
-      unicode="&#xF1F3;"
+      unicode="&#xF1F4;"
       horiz-adv-x="512" d=" M437 147L434 141C416 60 342 5 257 5C213 5 171 23 139 51L180 80L28 151L42 -12L77 11C124 -36 188 -64 257 -64C381 -64 486 16 507 135L510 147zM78 226C96 307 170 366 255 366C299 366 341 350 373 322L332 294L484 233L470 392L435 366C388 413 324 440 255 440C131 440 26 352 5 233L2 212H75z" />
     <glyph glyph-name="yes"
-      unicode="&#xF1F4;"
+      unicode="&#xF1F5;"
       horiz-adv-x="512" d=" M176 -46L13 140C-6 156 0 185 19 201C42 217 70 214 90 194L173 102L422 406C438 425 470 428 493 415C515 402 518 374 502 354z" />
     <glyph glyph-name="zen-mode"
-      unicode="&#xF1F5;"
+      unicode="&#xF1F6;"
       horiz-adv-x="512" d=" M160 412V444H0V284H32V390L147 271L173 297L54 412zM480 -14L365 105L339 79L458 -36H352V-68H512V92H480zM480 444H352V412H458L339 297L365 271L480 390V284H512V444zM147 105L32 -14V92H0V-68H160V-36H54L173 79z" />
     <glyph glyph-name="zoom-auto"
-      unicode="&#xF1F6;"
+      unicode="&#xF1F7;"
       horiz-adv-x="512" d=" M469.4 216.8L411.2 216.8L411.2 311.7000000000001L314.7 311.7000000000001L314.7 369.3L469.4 369.3z M104.2 216.8L46 216.8L46 369.3L202.7 369.3L202.7 311.7000000000001L104.2 311.7000000000001z M469.4 -55L314.7 -55L314.7 4.1999999999999L411.2 4.1999999999999L411.2 108.1L469.4 108.1z M202.7 -55L46 -55L46 108.1L104.2 108.1L104.2 4.1999999999999L202.7 4.1999999999999z" />
     <glyph glyph-name="zoom-in"
-      unicode="&#xF1F7;"
+      unicode="&#xF1F8;"
       horiz-adv-x="512" d=" M497 -2L361 122C361 123 361 123 360 123C386 156 401 197 401 242C401 352 311 441 201 441S2 352 2 242S91 43 201 43C241 43 278 55 309 75C310 73 311 71 313 70L448 -54C463 -68 483 -69 493 -58L504 -46C514 -35 511 -15 497 -2zM201 95C120 95 54 161 54 242S120 389 201 389C283 389 348 323 348 242S283 95 201 95zM222 329H181V269H122V227H181V170H222V227H281V269H222z" />
     <glyph glyph-name="zoom-out"
-      unicode="&#xF1F8;"
+      unicode="&#xF1F9;"
       horiz-adv-x="512" d=" M497 -2L361 122C361 123 361 123 360 123C386 156 401 197 401 242C401 352 311 441 201 441S2 352 2 242S91 43 201 43C241 43 278 55 309 75C310 73 311 71 313 70L448 -54C463 -68 483 -69 493 -58L504 -46C514 -35 511 -15 497 -2zM201 95C120 95 54 161 54 242S120 389 201 389C283 389 348 323 348 242S283 95 201 95zM122 269H281V227H122z" />
   </font>
 </defs>

app/assets/fonts/openproject_icon/src/resizer-bottom-right.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="22px" height="22px" viewBox="0 0 22 22" enable-background="new 0 0 22 22" xml:space="preserve">
+<rect x="20" y="20" width="2" height="2"/>
+<rect x="20" y="16" width="2" height="2"/>
+<rect x="20" y="12" width="2" height="2"/>
+<rect x="20" y="8" width="2" height="2"/>
+<rect x="20" y="4" width="2" height="2"/>
+<rect x="20" width="2" height="2"/>
+<rect x="16" y="20" width="2" height="2"/>
+<rect x="12" y="20" width="2" height="2"/>
+<rect x="8" y="20" width="2" height="2"/>
+<rect x="4" y="20" width="2" height="2"/>
+<rect y="20" width="2" height="2"/>
+<rect x="16" y="16" width="2" height="2"/>
+<rect x="12" y="16" width="2" height="2"/>
+<rect x="16" y="12" width="2" height="2"/>
+<rect x="16" y="8" width="2" height="2"/>
+<rect x="16" y="4" width="2" height="2"/>
+<rect x="12" y="12" width="2" height="2"/>
+<rect x="12" y="8" width="2" height="2"/>
+<rect x="8" y="16" width="2" height="2"/>
+<rect x="8" y="12" width="2" height="2"/>
+<rect x="4" y="16" width="2" height="2"/>
+</svg>

app/assets/stylesheets/content/_grid.sass

@@ -60,13 +60,6 @@ $grid--widget-padding: 20px
     &.-column
       width: $grid--gap-width
 
-  .resizer
-    margin-top: 0
-    margin-left: auto
-    margin-right: -$grid--widget-padding
-    margin-bottom: -$grid--widget-padding
-    position: relative
-
   .cdk-drag-handle
     cursor: grab
     float: left
@@ -81,6 +74,23 @@ $grid--widget-padding: 20px
   icon-triggered-context-menu
     visibility: hidden
 
+.grid--resizer
+  position: relative
+  height: $grid--widget-padding
+  margin-bottom: -$grid--widget-padding
+  color: #888
+  cursor: nwse-resize
+  opacity: 0
+
+  i
+    position: absolute
+    bottom: 0
+    right: -$grid--widget-padding
+    padding: 0 3px 3px 0
+
+  .grid--area.-widgeted:hover &
+    opacity: 1
+
 .grid--area-drag-handle
   margin-left: -19px
   padding-right: 1px
@@ -167,6 +177,7 @@ $grid--widget-padding: 20px
   padding: 15px
   background-color: $gray
   border-radius: 50%
+  opacity: 0
 
   &:before
     @include icon-font-common
@@ -185,6 +196,13 @@ $grid--widget-padding: 20px
     &:before
       font-size: 0.75rem
 
+  .grid--area.-addable:hover &, .grid--area.-addable.-help-mode &
+    opacity: 1
+    transition: opacity 1s ease
+
+  .grid--area.-addable:hover &
+    transition-delay: 0.3s
+
 .grid--widget-remove
   float: right
   margin-top: -10px

app/assets/stylesheets/fonts/_openproject_icon_definitions.scss

@@ -1096,399 +1096,405 @@
 .icon-reported-by-me:before {
 	content: "\f1b6";
 }
-@mixin icon-mixin-resizer-vertical-lines {
+@mixin icon-mixin-resizer-bottom-right {
     content: "\f1b7";
 }
-.icon-resizer-vertical-lines:before {
+.icon-resizer-bottom-right:before {
 	content: "\f1b7";
 }
-@mixin icon-mixin-roadmap {
+@mixin icon-mixin-resizer-vertical-lines {
     content: "\f1b8";
 }
-.icon-roadmap:before {
+.icon-resizer-vertical-lines:before {
 	content: "\f1b8";
 }
-@mixin icon-mixin-rss {
+@mixin icon-mixin-roadmap {
     content: "\f1b9";
 }
-.icon-rss:before {
+.icon-roadmap:before {
 	content: "\f1b9";
 }
-@mixin icon-mixin-rubber {
+@mixin icon-mixin-rss {
     content: "\f1ba";
 }
-.icon-rubber:before {
+.icon-rss:before {
 	content: "\f1ba";
 }
-@mixin icon-mixin-save {
+@mixin icon-mixin-rubber {
     content: "\f1bb";
 }
-.icon-save:before {
+.icon-rubber:before {
 	content: "\f1bb";
 }
-@mixin icon-mixin-search {
+@mixin icon-mixin-save {
     content: "\f1bc";
 }
-.icon-search:before {
+.icon-save:before {
 	content: "\f1bc";
 }
-@mixin icon-mixin-send-mail {
+@mixin icon-mixin-search {
     content: "\f1bd";
 }
-.icon-send-mail:before {
+.icon-search:before {
 	content: "\f1bd";
 }
-@mixin icon-mixin-server-key {
+@mixin icon-mixin-send-mail {
     content: "\f1be";
 }
-.icon-server-key:before {
+.icon-send-mail:before {
 	content: "\f1be";
 }
-@mixin icon-mixin-settings {
+@mixin icon-mixin-server-key {
     content: "\f1bf";
 }
-.icon-settings:before {
+.icon-server-key:before {
 	content: "\f1bf";
 }
-@mixin icon-mixin-settings2 {
+@mixin icon-mixin-settings {
     content: "\f1c0";
 }
-.icon-settings2:before {
+.icon-settings:before {
 	content: "\f1c0";
 }
-@mixin icon-mixin-settings3 {
+@mixin icon-mixin-settings2 {
     content: "\f1c1";
 }
-.icon-settings3:before {
+.icon-settings2:before {
 	content: "\f1c1";
 }
-@mixin icon-mixin-settings4 {
+@mixin icon-mixin-settings3 {
     content: "\f1c2";
 }
-.icon-settings4:before {
+.icon-settings3:before {
 	content: "\f1c2";
 }
-@mixin icon-mixin-shortcuts {
+@mixin icon-mixin-settings4 {
     content: "\f1c3";
 }
-.icon-shortcuts:before {
+.icon-settings4:before {
 	content: "\f1c3";
 }
-@mixin icon-mixin-show-all-projects {
+@mixin icon-mixin-shortcuts {
     content: "\f1c4";
 }
-.icon-show-all-projects:before {
+.icon-shortcuts:before {
 	content: "\f1c4";
 }
-@mixin icon-mixin-show-more-horizontal {
+@mixin icon-mixin-show-all-projects {
     content: "\f1c5";
 }
-.icon-show-more-horizontal:before {
+.icon-show-all-projects:before {
 	content: "\f1c5";
 }
-@mixin icon-mixin-show-more {
+@mixin icon-mixin-show-more-horizontal {
     content: "\f1c6";
 }
-.icon-show-more:before {
+.icon-show-more-horizontal:before {
 	content: "\f1c6";
 }
-@mixin icon-mixin-sort-ascending {
+@mixin icon-mixin-show-more {
     content: "\f1c7";
 }
-.icon-sort-ascending:before {
+.icon-show-more:before {
 	content: "\f1c7";
 }
-@mixin icon-mixin-sort-by {
+@mixin icon-mixin-sort-ascending {
     content: "\f1c8";
 }
-.icon-sort-by:before {
+.icon-sort-ascending:before {
 	content: "\f1c8";
 }
-@mixin icon-mixin-sort-descending {
+@mixin icon-mixin-sort-by {
     content: "\f1c9";
 }
-.icon-sort-descending:before {
+.icon-sort-by:before {
 	content: "\f1c9";
 }
-@mixin icon-mixin-sort-down {
+@mixin icon-mixin-sort-descending {
     content: "\f1ca";
 }
-.icon-sort-down:before {
+.icon-sort-descending:before {
 	content: "\f1ca";
 }
-@mixin icon-mixin-sort-up {
+@mixin icon-mixin-sort-down {
     content: "\f1cb";
 }
-.icon-sort-up:before {
+.icon-sort-down:before {
 	content: "\f1cb";
 }
-@mixin icon-mixin-square {
+@mixin icon-mixin-sort-up {
     content: "\f1cc";
 }
-.icon-square:before {
+.icon-sort-up:before {
 	content: "\f1cc";
 }
-@mixin icon-mixin-star {
+@mixin icon-mixin-square {
     content: "\f1cd";
 }
-.icon-star:before {
+.icon-square:before {
 	content: "\f1cd";
 }
-@mixin icon-mixin-status-reporting {
+@mixin icon-mixin-star {
     content: "\f1ce";
 }
-.icon-status-reporting:before {
+.icon-star:before {
 	content: "\f1ce";
 }
-@mixin icon-mixin-status {
+@mixin icon-mixin-status-reporting {
     content: "\f1cf";
 }
-.icon-status:before {
+.icon-status-reporting:before {
 	content: "\f1cf";
 }
-@mixin icon-mixin-strike-through {
+@mixin icon-mixin-status {
     content: "\f1d0";
 }
-.icon-strike-through:before {
+.icon-status:before {
 	content: "\f1d0";
 }
-@mixin icon-mixin-text {
+@mixin icon-mixin-strike-through {
     content: "\f1d1";
 }
-.icon-text:before {
+.icon-strike-through:before {
 	content: "\f1d1";
 }
-@mixin icon-mixin-ticket-checked {
+@mixin icon-mixin-text {
     content: "\f1d2";
 }
-.icon-ticket-checked:before {
+.icon-text:before {
 	content: "\f1d2";
 }
-@mixin icon-mixin-ticket-down {
+@mixin icon-mixin-ticket-checked {
     content: "\f1d3";
 }
-.icon-ticket-down:before {
+.icon-ticket-checked:before {
 	content: "\f1d3";
 }
-@mixin icon-mixin-ticket-edit {
+@mixin icon-mixin-ticket-down {
     content: "\f1d4";
 }
-.icon-ticket-edit:before {
+.icon-ticket-down:before {
 	content: "\f1d4";
 }
-@mixin icon-mixin-ticket-minus {
+@mixin icon-mixin-ticket-edit {
     content: "\f1d5";
 }
-.icon-ticket-minus:before {
+.icon-ticket-edit:before {
 	content: "\f1d5";
 }
-@mixin icon-mixin-ticket-note {
+@mixin icon-mixin-ticket-minus {
     content: "\f1d6";
 }
-.icon-ticket-note:before {
+.icon-ticket-minus:before {
 	content: "\f1d6";
 }
-@mixin icon-mixin-ticket {
+@mixin icon-mixin-ticket-note {
     content: "\f1d7";
 }
-.icon-ticket:before {
+.icon-ticket-note:before {
 	content: "\f1d7";
 }
-@mixin icon-mixin-time {
+@mixin icon-mixin-ticket {
     content: "\f1d8";
 }
-.icon-time:before {
+.icon-ticket:before {
 	content: "\f1d8";
 }
-@mixin icon-mixin-to-fullscreen {
+@mixin icon-mixin-time {
     content: "\f1d9";
 }
-.icon-to-fullscreen:before {
+.icon-time:before {
 	content: "\f1d9";
 }
-@mixin icon-mixin-toggle {
+@mixin icon-mixin-to-fullscreen {
     content: "\f1da";
 }
-.icon-toggle:before {
+.icon-to-fullscreen:before {
 	content: "\f1da";
 }
-@mixin icon-mixin-training-consulting {
+@mixin icon-mixin-toggle {
     content: "\f1db";
 }
-.icon-training-consulting:before {
+.icon-toggle:before {
 	content: "\f1db";
 }
-@mixin icon-mixin-two-factor-authentication {
+@mixin icon-mixin-training-consulting {
     content: "\f1dc";
 }
-.icon-two-factor-authentication:before {
+.icon-training-consulting:before {
 	content: "\f1dc";
 }
-@mixin icon-mixin-types {
+@mixin icon-mixin-two-factor-authentication {
     content: "\f1dd";
 }
-.icon-types:before {
+.icon-two-factor-authentication:before {
 	content: "\f1dd";
 }
-@mixin icon-mixin-underline {
+@mixin icon-mixin-types {
     content: "\f1de";
 }
-.icon-underline:before {
+.icon-types:before {
 	content: "\f1de";
 }
-@mixin icon-mixin-undo {
+@mixin icon-mixin-underline {
     content: "\f1df";
 }
-.icon-undo:before {
+.icon-underline:before {
 	content: "\f1df";
 }
-@mixin icon-mixin-unit {
+@mixin icon-mixin-undo {
     content: "\f1e0";
 }
-.icon-unit:before {
+.icon-undo:before {
 	content: "\f1e0";
 }
-@mixin icon-mixin-unlocked {
+@mixin icon-mixin-unit {
     content: "\f1e1";
 }
-.icon-unlocked:before {
+.icon-unit:before {
 	content: "\f1e1";
 }
-@mixin icon-mixin-unordered-list {
+@mixin icon-mixin-unlocked {
     content: "\f1e2";
 }
-.icon-unordered-list:before {
+.icon-unlocked:before {
 	content: "\f1e2";
 }
-@mixin icon-mixin-unwatched {
+@mixin icon-mixin-unordered-list {
     content: "\f1e3";
 }
-.icon-unwatched:before {
+.icon-unordered-list:before {
 	content: "\f1e3";
 }
-@mixin icon-mixin-upload {
+@mixin icon-mixin-unwatched {
     content: "\f1e4";
 }
-.icon-upload:before {
+.icon-unwatched:before {
 	content: "\f1e4";
 }
-@mixin icon-mixin-user-minus {
+@mixin icon-mixin-upload {
     content: "\f1e5";
 }
-.icon-user-minus:before {
+.icon-upload:before {
 	content: "\f1e5";
 }
-@mixin icon-mixin-user-plus {
+@mixin icon-mixin-user-minus {
     content: "\f1e6";
 }
-.icon-user-plus:before {
+.icon-user-minus:before {
 	content: "\f1e6";
 }
-@mixin icon-mixin-user {
+@mixin icon-mixin-user-plus {
     content: "\f1e7";
 }
-.icon-user:before {
+.icon-user-plus:before {
 	content: "\f1e7";
 }
-@mixin icon-mixin-view-card {
+@mixin icon-mixin-user {
     content: "\f1e8";
 }
-.icon-view-card:before {
+.icon-user:before {
 	content: "\f1e8";
 }
-@mixin icon-mixin-view-fullscreen {
+@mixin icon-mixin-view-card {
     content: "\f1e9";
 }
-.icon-view-fullscreen:before {
+.icon-view-card:before {
 	content: "\f1e9";
 }
-@mixin icon-mixin-view-list {
+@mixin icon-mixin-view-fullscreen {
     content: "\f1ea";
 }
-.icon-view-list:before {
+.icon-view-fullscreen:before {
 	content: "\f1ea";
 }
-@mixin icon-mixin-view-split {
+@mixin icon-mixin-view-list {
     content: "\f1eb";
 }
-.icon-view-split:before {
+.icon-view-list:before {
 	content: "\f1eb";
 }
-@mixin icon-mixin-view-timeline {
+@mixin icon-mixin-view-split {
     content: "\f1ec";
 }
-.icon-view-timeline:before {
+.icon-view-split:before {
 	content: "\f1ec";
 }
-@mixin icon-mixin-warning {
+@mixin icon-mixin-view-timeline {
     content: "\f1ed";
 }
-.icon-warning:before {
+.icon-view-timeline:before {
 	content: "\f1ed";
 }
-@mixin icon-mixin-watched {
+@mixin icon-mixin-warning {
     content: "\f1ee";
 }
-.icon-watched:before {
+.icon-warning:before {
 	content: "\f1ee";
 }
-@mixin icon-mixin-wiki-edit {
+@mixin icon-mixin-watched {
     content: "\f1ef";
 }
-.icon-wiki-edit:before {
+.icon-watched:before {
 	content: "\f1ef";
 }
-@mixin icon-mixin-wiki {
+@mixin icon-mixin-wiki-edit {
     content: "\f1f0";
 }
-.icon-wiki:before {
+.icon-wiki-edit:before {
 	content: "\f1f0";
 }
-@mixin icon-mixin-wiki2 {
+@mixin icon-mixin-wiki {
     content: "\f1f1";
 }
-.icon-wiki2:before {
+.icon-wiki:before {
 	content: "\f1f1";
 }
-@mixin icon-mixin-work-packages {
+@mixin icon-mixin-wiki2 {
     content: "\f1f2";
 }
-.icon-work-packages:before {
+.icon-wiki2:before {
 	content: "\f1f2";
 }
-@mixin icon-mixin-workflow {
+@mixin icon-mixin-work-packages {
     content: "\f1f3";
 }
-.icon-workflow:before {
+.icon-work-packages:before {
 	content: "\f1f3";
 }
-@mixin icon-mixin-yes {
+@mixin icon-mixin-workflow {
     content: "\f1f4";
 }
-.icon-yes:before {
+.icon-workflow:before {
 	content: "\f1f4";
 }
-@mixin icon-mixin-zen-mode {
+@mixin icon-mixin-yes {
     content: "\f1f5";
 }
-.icon-zen-mode:before {
+.icon-yes:before {
 	content: "\f1f5";
 }
-@mixin icon-mixin-zoom-auto {
+@mixin icon-mixin-zen-mode {
     content: "\f1f6";
 }
-.icon-zoom-auto:before {
+.icon-zen-mode:before {
 	content: "\f1f6";
 }
-@mixin icon-mixin-zoom-in {
+@mixin icon-mixin-zoom-auto {
     content: "\f1f7";
 }
-.icon-zoom-in:before {
+.icon-zoom-auto:before {
 	content: "\f1f7";
 }
-@mixin icon-mixin-zoom-out {
+@mixin icon-mixin-zoom-in {
     content: "\f1f8";
 }
-.icon-zoom-out:before {
+.icon-zoom-in:before {
 	content: "\f1f8";
 }
+@mixin icon-mixin-zoom-out {
+    content: "\f1f9";
+}
+.icon-zoom-out:before {
+	content: "\f1f9";
+}

app/assets/stylesheets/fonts/_openproject_icon_font.lsg

@@ -185,6 +185,7 @@
 <li><span class="icon icon-remove"></span>remove</li>
 <li><span class="icon icon-rename"></span>rename</li>
 <li><span class="icon icon-reported-by-me"></span>reported-by-me</li>
+<li><span class="icon icon-resizer-bottom-right"></span>resizer-bottom-right</li>
 <li><span class="icon icon-resizer-vertical-lines"></span>resizer-vertical-lines</li>
 <li><span class="icon icon-roadmap"></span>roadmap</li>
 <li><span class="icon icon-rss"></span>rss</li>

config/locales/en.yml

@@ -197,8 +197,6 @@ en:
     index:
       no_results_title_text: There is currently no news to report.
       no_results_content_text: Add a news item
-    my_page:
-      no_results_title_text: Nothing new to report.
 
   users:
     memberships:
@@ -1415,7 +1413,6 @@ en:
   label_move_work_package: "Move work package"
   label_my_account: "My account"
   label_my_account_data: "My account data"
-  label_my_page: "My page"
   label_my_projects: "My projects"
   label_my_queries: "My custom queries"
   label_never: "Never"

config/locales/js-en.yml

@@ -294,7 +294,6 @@ en:
     label_menu_collapse: "collapse"
     label_menu_expand: "expand"
     label_more_than_ago: "more than days ago"
-    label_my_page: "My page"
     label_next: "Next"
     label_no_color: "No color"
     label_no_data: "No data to display"

frontend/src/app/angular4-modules.ts

@@ -92,6 +92,7 @@ import {OpenprojectWorkPackageGraphsModule} from "core-app/modules/work-package-
 import {WpPreviewModal} from "core-components/modals/preview-modal/wp-preview-modal/wp-preview.modal";
 import {PreviewTriggerService} from "core-app/globals/global-listeners/preview-trigger.service";
 import {OpenprojectOverviewModule} from "core-app/modules/overview/openproject-overview.module";
+import {OpenprojectMyPageModule} from "core-app/modules/my-page/openproject-my-page.module";
 
 @NgModule({
   imports: [
@@ -130,6 +131,9 @@ import {OpenprojectOverviewModule} from "core-app/modules/overview/openproject-o
     // Overview
     OpenprojectOverviewModule,
 
+    // MyPage
+    OpenprojectMyPageModule,
+
     // Global Search
     OpenprojectGlobalSearchModule,
 

frontend/src/app/components/routing/my-page/my-page.component.html

@@ -1,5 +0,0 @@
-<h2 [textContent]="text.title"></h2>
-
-<ng-container *ngIf="(grid$ | async) as grid">
-  <grid [grid]="grid"></grid>
-</ng-container>

frontend/src/app/components/routing/my-page/my-page.component.ts

@@ -1,36 +0,0 @@
-import {Component, OnInit} from "@angular/core";
-import {GridResource} from "core-app/modules/hal/resources/grid-resource";
-import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
-import {HalResourceService} from "core-app/modules/hal/services/hal-resource.service";
-import {I18nService} from "core-app/modules/common/i18n/i18n.service";
-import {Title} from '@angular/platform-browser';
-import {GridInitializationService} from "core-app/modules/grids/grid/initialization.service";
-
-@Component({
-  templateUrl: './my-page.component.html'
-})
-export class MyPageComponent implements OnInit {
-  public text = { title: this.i18n.t('js.label_my_page'),
-                  html_title: this.i18n.t('js.label_my_page') };
-
-  public grid$:Promise<GridResource>;
-
-  constructor(readonly gridInitialization:GridInitializationService,
-              readonly pathHelper:PathHelperService,
-              readonly halResourceService:HalResourceService,
-              readonly i18n:I18nService,
-              readonly title:Title) {}
-
-
-  ngOnInit() {
-    this.grid$ = this
-      .gridInitialization
-      .initialize(this.pathHelper.myPagePath());
-
-    this.setHtmlTitle();
-  }
-
-  private setHtmlTitle() {
-    this.title.setTitle(this.text.html_title);
-  }
-}

frontend/src/app/modules/common/resizer/resizer.component.html

@@ -1,4 +1,5 @@
 <div class="resizer"
+     [ngClass]="resizerClass"
      *ngIf="!customHandler">
 </div>
 <ng-content></ng-content>

frontend/src/app/modules/common/resizer/resizer.component.ts

@@ -31,6 +31,7 @@ export class ResizerComponent implements OnDestroy {
 
   @Input() customHandler = false;
   @Input() cursorClass = 'nwse-resize';
+  @Input() resizerClass = 'resizer';
 
   ngOnDestroy() {
     this.removeEventListener();

frontend/src/app/modules/dashboards/dashboard/dashboard.component.ts

@@ -1,25 +1,14 @@
-import {Component, OnInit} from '@angular/core';
-import {I18nService} from "core-app/modules/common/i18n/i18n.service";
-import {Title} from '@angular/platform-browser';
-import {GridInitializationService} from "core-app/modules/grids/grid/initialization.service";
-import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
-import {CurrentProjectService} from "core-components/projects/current-project.service";
+import {Component} from '@angular/core';
 import {GridPageComponent} from "core-app/modules/grids/grid/page/grid-page.component";
+import {GRID_PROVIDERS} from "core-app/modules/grids/grid/grid.component";
 
 @Component({
   selector: 'dashboard',
   templateUrl: '../../grids/grid/page/grid-page.component.html',
   styleUrls: ['../../grids/grid/page/grid-page.component.sass'],
+  providers: GRID_PROVIDERS
 })
 export class DashboardComponent extends GridPageComponent {
-  constructor(readonly gridInitialization:GridInitializationService,
-              readonly pathHelper:PathHelperService,
-              readonly currentProject:CurrentProjectService,
-              readonly i18n:I18nService,
-              readonly title:Title) {
-    super(gridInitialization, pathHelper, i18n, title);
-  }
-
   protected i18nNamespace():string {
     return 'dashboards';
   }

frontend/src/app/modules/dashboards/openproject-dashboards.module.ts

@@ -28,7 +28,6 @@
 
 import {NgModule} from '@angular/core';
 import {OpenprojectCommonModule} from "core-app/modules/common/openproject-common.module";
-import {OpenprojectWorkPackagesModule} from "core-app/modules/work_packages/openproject-work-packages.module";
 import {Ng2StateDeclaration, UIRouter, UIRouterModule} from "@uirouter/angular";
 import {DashboardComponent} from "core-app/modules/dashboards/dashboard/dashboard.component";
 import {OpenprojectGridsModule} from "core-app/modules/grids/openproject-grids.module";
@@ -63,14 +62,10 @@ export function uiRouterDashboardsConfiguration(uiRouter:UIRouter) {
 @NgModule({
   imports: [
     OpenprojectCommonModule,
-    OpenprojectWorkPackagesModule,
 
     OpenprojectGridsModule,
 
-    // Dynamic Module for actions
-    //DynamicModule.withComponents([VersionBoardHeaderComponent]),
-
-    // Routes for /boards
+    // Routes for /dashboards
     UIRouterModule.forChild({
       states: DASHBOARDS_ROUTES,
       config: uiRouterDashboardsConfiguration

frontend/src/app/modules/grids/grid/add-widget.service.ts

@@ -10,23 +10,27 @@ import {GridDragAndDropService} from "core-app/modules/grids/grid/drag-and-drop.
 import {GridResizeService} from "core-app/modules/grids/grid/resize.service";
 import {GridMoveService} from "core-app/modules/grids/grid/move.service";
 import {GridGap} from "core-app/modules/grids/areas/grid-gap";
+import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 
 @Injectable()
 export class GridAddWidgetService {
 
+  text = { add: this.i18n.t('js.grid.add_widget') };
+
   constructor(readonly opModalService:OpModalService,
               readonly injector:Injector,
               readonly halResource:HalResourceService,
               readonly layout:GridAreaService,
               readonly drag:GridDragAndDropService,
               readonly move:GridMoveService,
-              readonly resize:GridResizeService) {
+              readonly resize:GridResizeService,
+              readonly i18n:I18nService) {
   }
 
   public isAddable(area:GridArea) {
     return !this.drag.currentlyDragging &&
       !this.resize.currentlyResizing &&
-      (this.layout.mousedOverArea === area || this.layout.isSingleCell || this.layout.isNewlyCreated) &&
+      (this.layout.mousedOverArea === area || this.layout.isSingleCell || this.layout.inHelpMode) &&
       this.isAllowed;
   }
 
@@ -50,6 +54,10 @@ export class GridAddWidgetService {
       });
   }
 
+  public get addText() {
+    return this.text.add;
+  }
+
   private select(area:GridArea) {
     return new Promise<GridWidgetResource>((resolve, reject) => {
       const modal = this.opModalService.show(AddGridWidgetModal, this.injector, { schema: this.layout.schema });
@@ -109,7 +117,7 @@ export class GridAddWidgetService {
     this.layout.rebuildAndPersist();
   }
 
-  private get isAllowed() {
-    return this.layout.gridResource.updateImmediately;
+  public get isAllowed() {
+    return this.layout.gridResource && this.layout.gridResource.updateImmediately;
   }
 }

frontend/src/app/modules/grids/grid/area.service.ts

@@ -22,6 +22,7 @@ export class GridAreaService {
   public widgetAreas:GridWidgetArea[];
   public gridAreaIds:string[];
   public mousedOverArea:GridArea|null;
+  public helpMode = false;
 
   constructor (private gridDm:GridDmService) { }
 
@@ -32,6 +33,8 @@ export class GridAreaService {
     this.numRows = this.resource.rowCount;
     this.numColumns = this.resource.columnCount;
 
+    this.helpMode = this.isNewlyCreated;
+
     this.buildAreas(true);
   }
 
@@ -112,10 +115,18 @@ export class GridAreaService {
     return this.numRows === 1 && this.numColumns === 1 && this.widgetResources.length === 0;
   }
 
-  public get isNewlyCreated() {
+  private get isNewlyCreated() {
     return moment(moment.utc()).diff(moment(this.resource.createdAt), 'seconds') < 20;
   }
 
+  public get inHelpMode() {
+    return this.helpMode;
+  }
+
+  public toggleHelpMode() {
+    this.helpMode = !this.helpMode;
+  }
+
   private saveGrid(resource:GridWidgetResource|any, schema?:SchemaResource) {
     this
       .gridDm

frontend/src/app/modules/grids/grid/grid.component.html

@@ -33,9 +33,15 @@
       </ndc-dynamic>
     </div>
     <resizer *ngIf="resize.isResizable"
+             [customHandler]="true"
              (end)="resize.end(area, $event)"
              (start)="resize.start(area)"
              (move)="resize.moving($event)">
+      <div class="grid--resizer">
+        <i class="icon-resizer-bottom-right"
+           aria-hidden="true">
+        </i>
+      </div>
     </resizer>
   </div>
 
@@ -44,23 +50,21 @@
        class="grid--area"
        [ngClass] = "{'-drop-target': drag.currentlyDragging,
                      '-resize-target': resize.isTarget(area),
-                     '-addable': add.isAddable(area)}"
+                     '-addable': add.isAddable(area),
+                     '-help-mode': layout.inHelpMode}"
        [style.grid-row-start]="area.gridStartRow"
        [style.grid-row-end]="area.gridEndRow"
        [style.grid-column-start]="area.gridStartColumn"
        [style.grid-column-end]="area.gridEndColumn"
        cdkDropList
        [id]="area.guid"
-       (mouseenter)="layout.setMousedOverArea(area)"
-       (mouseleave)="layout.setMousedOverArea(null)"
+       (mouseover)="layout.setMousedOverArea(area)"
        [cdkDropListData]="area"
        (cdkDropListDropped)="drag.drop($event)"
        (cdkDropListEntered)="drag.entered($event)"
        [cdkDropListConnectedTo]="layout.gridAreaIds">
     <div class="grid--widget-add"
-         *ngIf="add.isAddable(area)"
-         (mouseenter)="layout.setMousedOverArea(area)"
-         (mouseleave)="layout.setMousedOverArea(null)"
+         [title]="add.addText"
          (click)="add.widget(area)">
     </div>
   </div>
@@ -68,6 +72,7 @@
   <div *ngFor="let gap of layout.gridGaps; trackBy: identifyGridArea;"
        class="grid--area -gap"
        [ngClass] = "{'-addable': add.isAddable(gap),
+                     '-help-mode': layout.inHelpMode,
                      '-row': gap.isRow,
                      '-column': gap.isColumn}"
        [style.grid-row-start]="gap.gridStartRow"
@@ -75,12 +80,9 @@
        [style.grid-column-start]="gap.gridStartColumn"
        [style.grid-column-end]="gap.gridEndColumn"
        [id]="gap.guid"
-       (mouseleave)="layout.setMousedOverArea(null)"
-       (mouseenter)="layout.setMousedOverArea(gap)">
+       (mouseover)="layout.setMousedOverArea(gap)">
     <div class="grid--widget-add -gap"
-         *ngIf="add.isAddable(gap)"
-         (mouseenter)="layout.setMousedOverArea(gap)"
-         (mouseleave)="layout.setMousedOverArea(null)"
+         [title]="add.addText"
          (click)="add.widget(gap, layout.schema)">
     </div>
   </div>

frontend/src/app/modules/grids/grid/grid.component.ts

@@ -25,17 +25,18 @@ export interface WidgetRegistration {
   properties?:any;
 }
 
+export const GRID_PROVIDERS = [
+  GridAreaService,
+  GridMoveService,
+  GridDragAndDropService,
+  GridResizeService,
+  GridAddWidgetService,
+  GridRemoveWidgetService
+];
+
 @Component({
   templateUrl: './grid.component.html',
-  selector: 'grid',
-  providers: [
-    GridAreaService,
-    GridMoveService,
-    GridDragAndDropService,
-    GridResizeService,
-    GridAddWidgetService,
-    GridRemoveWidgetService
-  ]
+  selector: 'grid'
 })
 export class GridComponent implements OnDestroy, OnInit {
   public uiWidgets:ComponentRef<any>[] = [];

frontend/src/app/modules/grids/grid/page/grid-page.component.html

@@ -3,6 +3,19 @@
     <div class="title-container">
       <h2 [textContent]="text.title"></h2>
     </div>
+
+    <ul class="toolbar-items">
+      <li class="toolbar-item">
+        <button class="button"
+                *ngIf="addWidget.isAllowed"
+                [title]="addWidget.addText"
+                (click)="areas.toggleHelpMode()"
+                [ngClass]="{'-active': areas.inHelpMode}">
+          <op-icon icon-classes="button--icon icon-add">
+          </op-icon>
+        </button>
+      </li>
+    </ul>
   </div>
 </div>
 

frontend/src/app/modules/grids/grid/page/grid-page.component.sass

@@ -1,2 +1,8 @@
 .title-container
   margin-left: 20px
+
+.toolbar-container
+  margin-bottom: 0
+
+.toolbar-items
+  padding-right: 20px

frontend/src/app/modules/grids/grid/page/grid-page.component.ts

@@ -4,15 +4,22 @@ import {Title} from '@angular/platform-browser';
 import {GridInitializationService} from "core-app/modules/grids/grid/initialization.service";
 import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
 import {GridResource} from "core-app/modules/hal/resources/grid-resource";
+import {GridAddWidgetService} from "core-app/modules/grids/grid/add-widget.service";
+import {GridAreaService} from "core-app/modules/grids/grid/area.service";
+import {CurrentProjectService} from "core-components/projects/current-project.service";
 
 export abstract class GridPageComponent implements OnInit {
   public text = { title: this.i18n.t(`js.${this.i18nNamespace()}.label`),
                   html_title: this.i18n.t(`js.${this.i18nNamespace()}.label`) };
 
-  protected constructor(readonly gridInitialization:GridInitializationService,
-                        readonly pathHelper:PathHelperService,
-                        readonly i18n:I18nService,
-                        readonly title:Title) {}
+  constructor(readonly gridInitialization:GridInitializationService,
+              // not used in the base class but will be used throughout the subclasses
+              readonly pathHelper:PathHelperService,
+              readonly currentProject:CurrentProjectService,
+              readonly i18n:I18nService,
+              readonly title:Title,
+              readonly addWidget:GridAddWidgetService,
+              readonly areas:GridAreaService) {}
 
   public grid:GridResource;
 

frontend/src/app/modules/grids/openproject-grids.module.ts

@@ -29,7 +29,6 @@
 import {NgModule, APP_INITIALIZER, Injector} from '@angular/core';
 import {DynamicModule} from 'ng-dynamic-component';
 import {HookService} from "core-app/modules/plugins/hook-service";
-import {MyPageComponent} from "core-components/routing/my-page/my-page.component";
 import {OpenprojectCommonModule} from "core-app/modules/common/openproject-common.module";
 import {BrowserModule} from '@angular/platform-browser';
 import {FormsModule} from '@angular/forms';
@@ -41,7 +40,7 @@ import {GridWidgetsService} from "core-app/modules/grids/widgets/widgets.service
 import {GridComponent} from "core-app/modules/grids/grid/grid.component";
 import {AddGridWidgetModal} from "core-app/modules/grids/widgets/add/add.modal";
 import {OpenprojectCalendarModule} from "core-app/modules/calendar/openproject-calendar.module";
-import {Ng2StateDeclaration, UIRouterModule} from '@uirouter/angular';
+import {UIRouterModule} from '@uirouter/angular';
 import {WidgetDocumentsComponent} from "core-app/modules/grids/widgets/documents/documents.component";
 import {WidgetNewsComponent} from "core-app/modules/grids/widgets/news/news.component";
 import {WidgetWpTableComponent} from "core-app/modules/grids/widgets/wp-table/wp-table.component";
@@ -65,19 +64,6 @@ import {WidgetSubprojectsComponent} from "core-app/modules/grids/widgets/subproj
 import {OpenprojectAttachmentsModule} from "core-app/modules/attachments/openproject-attachments.module";
 import {WidgetMembersComponent} from "core-app/modules/grids/widgets/members/members.component";
 
-export const GRID_ROUTES:Ng2StateDeclaration[] = [
-  {
-    name: 'my_page',
-    url: '/my/page',
-    component: MyPageComponent,
-    data: {
-      bodyClasses: 'router--work-packages-my-page',
-      parent: 'work-packages'
-    }
-  },
-];
-
-
 @NgModule({
   imports: [
     BrowserModule,
@@ -109,8 +95,6 @@ export const GRID_ROUTES:Ng2StateDeclaration[] = [
     // Support for inline editig fields
     OpenprojectFieldsModule,
 
-    // Routes for grid pages
-    UIRouterModule.forChild({ states: GRID_ROUTES }),
   ],
   providers: [
     {
@@ -149,15 +133,9 @@ export const GRID_ROUTES:Ng2StateDeclaration[] = [
     AddGridWidgetModal,
 
     WidgetHeaderComponent,
-
-    // MyPage
-    MyPageComponent,
   ],
   entryComponents: [
     AddGridWidgetModal,
-
-    // MyPage
-    MyPageComponent,
   ],
   exports: [
     GridComponent

frontend/src/app/modules/grids/widgets/add/add.modal.ts

@@ -12,7 +12,7 @@ import {AbstractWidgetComponent} from "core-app/modules/grids/widgets/abstract-w
 })
 export class AddGridWidgetModal extends OpModalComponent {
 
-  text = { title: this.i18n.t('js.grid.add_modal.choose_widget'),
+  text = { title: this.i18n.t('js.grid.add_widget'),
            close_popup: this.i18n.t('js.button_close') };
 
   public chosenWidget:WidgetRegistration;

frontend/src/app/modules/grids/widgets/project-description/project-description.component.html

@@ -8,5 +8,11 @@
   </widget-menu>
 </widget-header>
 
-<div class="grid--widget-content"
-     [innerHTML]="description" ></div>
+<div class="grid--widget-content">
+  <div *ngIf="hasDescription"
+       [innerHTML]="description">
+  </div>
+  <no-results *ngIf="!hasDescription && isLoaded"
+              [title]="text.noResults">
+  </no-results>
+</div>

frontend/src/app/modules/grids/widgets/project-description/project-description.component.ts

@@ -31,17 +31,23 @@ import {AbstractWidgetComponent} from "app/modules/grids/widgets/abstract-widget
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {CurrentProjectService} from "core-components/projects/current-project.service";
 import {ProjectCacheService} from "core-components/projects/project-cache.service";
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Component({
   templateUrl: './project-description.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class WidgetProjectDescriptionComponent extends AbstractWidgetComponent implements OnInit {
-  public description:string;
+  public description:SafeHtml;
+
+  public text = {
+    noResults: this.i18n.t('js.grid.widgets.project_description.no_results'),
+  };
 
   constructor(protected readonly i18n:I18nService,
               protected readonly injector:Injector,
               protected readonly projectCache:ProjectCacheService,
+              protected readonly sanitization:DomSanitizer,
               protected readonly currentProject:CurrentProjectService,
               protected readonly cdr:ChangeDetectorRef) {
     super(i18n, injector);
@@ -55,11 +61,19 @@ export class WidgetProjectDescriptionComponent extends AbstractWidgetComponent i
     this
       .loadCurrentProject()
       .then(project => {
-        this.description = project.description.html;
+        this.description = this.sanitization.bypassSecurityTrustHtml(project.description.html);
         this.cdr.detectChanges();
       });
   }
 
+  public get hasDescription() {
+    return this.isLoaded && this.description;
+  }
+
+  public get isLoaded() {
+    return this.projectCache.state(this.currentProject.id as string).value;
+  }
+
   private loadCurrentProject() {
     return this.projectCache.require(this.currentProject.id as string);
   }

frontend/src/app/modules/grids/widgets/project-details/project-details.component.html

@@ -8,6 +8,11 @@
   </widget-menu>
 </widget-header>
 
-<div class="grid--widget-content"
-     #contentContainer>
+<div class="grid--widget-content">
+  <div class="attributes-map"
+       #contentContainer>
+  </div>
+  <no-results *ngIf="noFields"
+              [title]="text.noResults">
+  </no-results>
 </div>

frontend/src/app/modules/grids/widgets/project-details/project-details.component.ts

@@ -53,10 +53,14 @@ export const emptyPlaceholder = '-';
   ]
 })
 export class WidgetProjectDetailsComponent extends AbstractWidgetComponent implements OnInit {
-  public customFieldsMap:Array<DisplayField> = [];
-
   @ViewChild('contentContainer', { static: true }) readonly contentContainer:ElementRef;
 
+  public noFields = false;
+
+  public text = {
+    noResults: this.i18n.t('js.grid.widgets.project_details.no_results'),
+  };
+
   constructor(protected readonly i18n:I18nService,
               protected readonly injector:Injector,
               protected readonly projectDm:ProjectDmService,
@@ -87,6 +91,10 @@ export class WidgetProjectDetailsComponent extends AbstractWidgetComponent imple
     return this.projectCache.require(this.currentProject.id as string);
   }
 
+  public get isLoaded() {
+    return this.projectCache.state(this.currentProject.id as string).value;
+  }
+
   private loadProjectSchema() {
     return this.projectDm.schema();
   }
@@ -94,6 +102,8 @@ export class WidgetProjectDetailsComponent extends AbstractWidgetComponent imple
   private renderCFs(project:ProjectResource, schema:SchemaResource) {
     const cfFields = this.collectFieldsForCfs(project, schema);
 
+    this.noFields = cfFields.length === 0;
+
     this.sortFieldsLexicographically(cfFields);
     this.renderFields(cfFields);
   }
@@ -122,29 +132,18 @@ export class WidgetProjectDetailsComponent extends AbstractWidgetComponent imple
     this.contentContainer.nativeElement.innerHTML = '';
 
     fields.forEach(field => {
-      this.contentContainer.nativeElement.appendChild(this.displayKeyValue(field));
+      this.renderKeyValue(field);
     });
   }
 
-  private displayKeyValue(field:DisplayField) {
-    const container = this.containerElement();
-
-    container.appendChild(this.labelElement(field));
-    container.appendChild(this.valueElement(field));
-
-    return container;
-  }
-
-  private containerElement() {
-    const container = document.createElement('div');
-    container.classList.add('attributes-key-value');
-
-    return container;
+  private renderKeyValue(field:DisplayField) {
+    this.contentContainer.nativeElement.appendChild(this.labelElement(field));
+    this.contentContainer.nativeElement.appendChild(this.valueElement(field));
   }
 
   private labelElement(field:DisplayField) {
     const label = document.createElement('div');
-    label.classList.add('attributes-key-value--key');
+    label.classList.add('attributes-map--key');
     label.innerText = field.label;
 
     return label;
@@ -152,7 +151,7 @@ export class WidgetProjectDetailsComponent extends AbstractWidgetComponent imple
 
   private valueElement(field:DisplayField) {
     const value = document.createElement('div');
-    value.classList.add('attributes-key-value--value-container');
+    value.classList.add('attributes-map--value');
     field.render(value, this.getText(field));
 
     return value;

frontend/src/app/modules/my-page/my-page.component.ts

@@ -0,0 +1,18 @@
+import {Component} from "@angular/core";
+import {GRID_PROVIDERS} from "core-app/modules/grids/grid/grid.component";
+import {GridPageComponent} from "core-app/modules/grids/grid/page/grid-page.component";
+
+@Component({
+  templateUrl: '../grids/grid/page/grid-page.component.html',
+  styleUrls: ['../grids/grid/page/grid-page.component.sass'],
+  providers: GRID_PROVIDERS
+})
+export class MyPageComponent extends GridPageComponent {
+  protected i18nNamespace():string {
+    return 'my_page';
+  }
+
+  protected gridScopePath():string {
+    return this.pathHelper.myPagePath();
+  }
+}

frontend/src/app/modules/my-page/openproject-my-page.module.ts

@@ -0,0 +1,64 @@
+// -- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2018 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+// ++
+
+import {NgModule} from '@angular/core';
+import {OpenprojectCommonModule} from "core-app/modules/common/openproject-common.module";
+import {Ng2StateDeclaration, UIRouterModule} from "@uirouter/angular";
+import {OpenprojectGridsModule} from "core-app/modules/grids/openproject-grids.module";
+import {MyPageComponent} from "core-app/modules/my-page/my-page.component";
+
+export const MY_PAGE_ROUTES:Ng2StateDeclaration[] = [
+  {
+    name: 'my_page',
+    url: '/my/page',
+    component: MyPageComponent,
+    data: {
+      bodyClasses: 'router--work-packages-my-page',
+      parent: 'work-packages'
+    }
+  },
+];
+
+@NgModule({
+  imports: [
+    OpenprojectCommonModule,
+
+    OpenprojectGridsModule,
+
+    // Routes for my_page
+    UIRouterModule.forChild({ states: MY_PAGE_ROUTES }),
+  ],
+  declarations: [
+    MyPageComponent
+  ],
+  entryComponents: [
+  ]
+})
+export class OpenprojectMyPageModule {
+}
+

frontend/src/app/modules/overview/openproject-overview.module.ts

@@ -28,8 +28,7 @@
 
 import {NgModule} from '@angular/core';
 import {OpenprojectCommonModule} from "core-app/modules/common/openproject-common.module";
-import {OpenprojectWorkPackagesModule} from "core-app/modules/work_packages/openproject-work-packages.module";
-import {Ng2StateDeclaration, UIRouter, UIRouterModule, Transition} from "@uirouter/angular";
+import {Ng2StateDeclaration, UIRouter, UIRouterModule} from "@uirouter/angular";
 import {OpenprojectGridsModule} from "core-app/modules/grids/openproject-grids.module";
 import {OverviewComponent} from "core-app/modules/overview/overview.component";
 
@@ -63,7 +62,6 @@ export function uiRouterOverviewConfiguration(uiRouter:UIRouter) {
 @NgModule({
   imports: [
     OpenprojectCommonModule,
-    OpenprojectWorkPackagesModule,
 
     OpenprojectGridsModule,
 

frontend/src/app/modules/overview/overview.component.ts

@@ -1,25 +1,14 @@
-import {Component, OnInit} from '@angular/core';
-import {I18nService} from "core-app/modules/common/i18n/i18n.service";
-import {Title} from '@angular/platform-browser';
-import {GridInitializationService} from "core-app/modules/grids/grid/initialization.service";
-import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
-import {CurrentProjectService} from "core-components/projects/current-project.service";
+import {Component} from '@angular/core';
 import {GridPageComponent} from "core-app/modules/grids/grid/page/grid-page.component";
+import {GRID_PROVIDERS} from "core-app/modules/grids/grid/grid.component";
 
 @Component({
   selector: 'overview',
   templateUrl: '../grids/grid/page/grid-page.component.html',
   styleUrls: ['../grids/grid/page/grid-page.component.sass'],
+  providers: GRID_PROVIDERS
 })
 export class OverviewComponent extends GridPageComponent {
-  constructor(readonly gridInitialization:GridInitializationService,
-              readonly pathHelper:PathHelperService,
-              readonly currentProject:CurrentProjectService,
-              readonly i18n:I18nService,
-              readonly title:Title) {
-    super(gridInitialization, pathHelper, i18n, title);
-  }
-
   protected i18nNamespace():string {
     return 'overviews';
   }

modules/dashboards/spec/features/read_only_allowed_spec.rb

@@ -73,6 +73,7 @@ describe 'Read only mode when user lacks edit permission on dashboard', type: :f
 
   it 'can not modify the dashboard but can still use it' do
     dashboard_page.expect_unable_to_add_widget(dashboard.row_count, dashboard.column_count, :row)
+    dashboard_page.expect_no_help_mode
 
     table_widget = Components::Grids::GridArea.new('.grid--area.-widgeted:nth-of-type(1)')
 

modules/grids/config/locales/js-en.yml

@@ -1,8 +1,7 @@
 en:
   js:
     grid:
-      add_modal:
-        choose_widget: 'Choose widget'
+      add_widget: 'Add widget'
       remove: 'Remove widget'
       widgets:
         custom_text:
@@ -22,8 +21,10 @@ en:
           no_results: 'Nothing new to report.'
         project_description:
           title: 'Project description'
+          no_results: 'No description has been written yet.'
         project_details:
           title: 'Project details'
+          no_results: 'No custom fields have been defined for projects.'
         subprojects:
           title: 'Subprojects'
           no_results: 'No subprojects.'

modules/grids/spec/support/pages/grid.rb

@@ -33,12 +33,17 @@ module Pages
     def add_widget(row_number, column_number, location, name)
       within_add_widget_modal(row_number, column_number, location) do
         expect(page)
-          .to have_content(I18n.t('js.grid.add_modal.choose_widget'))
+          .to have_content(I18n.t('js.grid.add_widget'))
 
         page.find('.grid--addable-widget', text: Regexp.new("^#{name}$")).click
       end
     end
 
+    def expect_no_help_mode
+      expect(page)
+        .to have_no_selector('.toolbar-item .icon-add')
+    end
+
     def expect_unable_to_add_widget(row_number, column_number, location, name = nil)
       if name
         expect_specific_widget_unaddable(row_number, column_number, location, name)
@@ -83,7 +88,7 @@ module Pages
     def expect_specific_widget_unaddable(row_number, column_number, location, name)
       within_add_widget_modal(row_number, column_number, location) do
         expect(page)
-          .to have_content(I18n.t('js.grid.add_modal.choose_widget'))
+          .to have_content(I18n.t('js.grid.add_widget'))
 
         expect(page)
           .not_to have_selector('.grid--addable-widget', text: Regexp.new("^#{name}$"))

modules/meeting/app/helpers/meetings_helper.rb

@@ -20,11 +20,16 @@
 
 module MeetingsHelper
   def format_participant_list(participants)
-    participants.sort.map { |p| link_to_user p.user }.join('; ').html_safe
+    if participants.any?
+      participants.sort.map { |p| link_to_user p.user }.join('; ').html_safe
+    else
+      t('placeholders.default')
+    end
   end
 
   def render_meeting_journal(model, journal, options = {})
     return '' if journal.initial?
+
     journal_content = render_journal_details(journal, :label_updated_time_by, model, options)
     content_tag 'div', journal_content,  id: "change-#{journal.id}", class: 'journal'
   end

modules/meeting/features/meetings_new.feature

@@ -1,107 +0,0 @@
-#-- copyright
-# OpenProject Meeting Plugin
-#
-# Copyright (C) 2011-2014 the OpenProject Foundation (OPF)
-#
-# This program is free software; you can redistribute it and/or
-# modify it under the terms of the GNU General Public License version 3.
-#
-# This program is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU General Public License for more details.
-#
-# You should have received a copy of the GNU General Public License
-# along with this program; if not, write to the Free Software
-# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-#
-# See doc/COPYRIGHT.md for more details.
-#++
-
-Feature: Create new meetings
-
-  Background:
-        Given there is 1 project with the following:
-              | identifier | dingens |
-              | name       | dingens |
-          And the project "dingens" uses the following modules:
-              | meetings |
-          And there is 1 user with:
-              | login    | alice |
-              | language | en    |
-          And there is a role "user"
-          And the user "alice" is a "user" in the project "dingens"
-
-  Scenario: Navigate to the meeting index page with no permission to create new meetings
-      Given the role "user" may have the following rights:
-            | view_meetings   |
-       When I am already logged in as "alice"
-        And I go to the Meetings page for the project called "dingens"
-       Then I should not see "Meeting" within ".toolbar-items"
-
-  Scenario: Navigate to the meeting index page with permission to create new meetings
-      Given the role "user" may have the following rights:
-            | view_meetings   |
-            | create_meetings |
-       When I am already logged in as "alice"
-        And I go to the Meetings page for the project called "dingens"
-       Then I should see "Meeting" within ".toolbar-items"
-
-  Scenario: Create a new meeting with no title
-      Given the role "user" may have the following rights:
-            | view_meetings   |
-            | create_meetings |
-       When I am already logged in as "alice"
-        And I go to the Meetings page for the project called "dingens"
-        And I click on "New Meeting"
-        And I click on "Create"
-       Then I should see "Title can't be blank"
-
-  Scenario Outline: Create a new meeting with a title and a date, time, and duration with no and different time zones set
-      Given the role "user" may have the following rights:
-            | view_meetings   |
-            | create_meetings |
-       When I am already logged in as "alice"
-       And the user "alice" has the following preferences
-              | time_zone | <t_zone> |
-        And I go to the Meetings page for the project called "dingens"
-        And I click on "New Meeting"
-        And I fill in the following:
-            | meeting_title           | FSR Sitzung 123 |
-            | meeting-form-start-date | 2013-03-28      |
-            | meeting-form-start-time | 13:30           |
-            | meeting-form-duration   | 1.5             |
-        And I click on "Create"
-       Then I should see "Successful creation."
-        And I should see "FSR Sitzung 123"
-        And I should see "03/28/2013 01:30 PM - 03:00 PM"
-
-  Examples:
-    | t_zone                     |
-    | CET                        |
-    | UTC                        |
-    |                            |
-    | Pacific Time (US & Canada) |
-
-  Scenario: Visit the new meeting page to make sure the author is selected as invited
-      Given the role "user" may have the following rights:
-            | view_meetings   |
-            | create_meetings |
-       When I am already logged in as "alice"
-        And I go to the Meetings page for the project called "dingens"
-        And I click on "New Meeting"
-       Then the "meeting[participants_attributes][][invited]" checkbox should be checked
-
-  Scenario: Create a meeting in a project without members shouldn't error out
-    Given there is 1 project with the following:
-      | identifier | foreverempty |
-      | name       | foreverempty |
-    And the project "foreverempty" uses the following modules:
-      | meetings |
-    When I am already admin
-    And I go to the Meetings page for the project called "foreverempty"
-    And I click on "New Meeting"
-    And I fill in the following:
-      | meeting_title | Emtpy Meetings |
-    And I press "Create"
-    Then I should see "Successful creation."

modules/meeting/spec/features/meetings_new_spec.rb

@@ -0,0 +1,127 @@
+#-- copyright
+# OpenProject is a project management system.
+# Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See doc/COPYRIGHT.rdoc for more details.
+#++
+
+require 'spec_helper'
+
+require_relative '../support/pages/meetings/index'
+
+describe 'Meetings new', type: :feature do
+  let(:project) { FactoryBot.create :project, enabled_module_names: %w[meetings] }
+  let(:time_zone) { 'utc' }
+  let(:user) do
+    FactoryBot.create(:user,
+                      lastname: 'First',
+                      member_in_project: project,
+                      member_with_permissions: permissions).tap do |u|
+      u.pref[:time_zone] = time_zone
+
+      u.save!
+    end
+  end
+  let(:other_user) do
+    FactoryBot.create(:user,
+                      lastname: 'Second',
+                      member_in_project: project,
+                      member_with_permissions: permissions)
+  end
+  let(:admin) do
+    FactoryBot.create(:admin)
+  end
+  let(:permissions) { %i[view_meetings create_meetings] }
+  let(:current_user) { user }
+
+  before do
+    login_as(current_user)
+  end
+
+  let(:index_page) { ::Pages::Meetings::Index.new(project) }
+
+  context 'with permission to create meetings' do
+    before do
+      other_user
+    end
+
+    ['CET', 'UTC', '', 'Pacific Time (US & Canada)'].each do |zone|
+      let(:time_zone) { zone }
+
+      it "allows creating a project and handles errors in time zone #{zone}" do
+        index_page.visit!
+
+        new_page = index_page.click_create_new
+
+        # Error when no title is provided. Only works without js as otherwise html5 would already catch this
+        new_page.click_create
+
+        new_page.expect_notification(type: :error, message: "Title can't be blank")
+
+        new_page.set_title 'Some title'
+        new_page.set_start_date '2013-03-28'
+        new_page.set_start_time '13:30'
+        new_page.set_duration '1.5'
+        new_page.invite(other_user)
+
+        show_page = new_page.click_create
+
+        show_page.expect_notification(message: 'Successful creation')
+
+        show_page.expect_invited(user, other_user)
+
+        show_page.expect_date_time "03/28/2013 01:30 PM - 03:00 PM"
+      end
+    end
+  end
+
+  context 'without permission to create meetings' do
+    let(:permissions) { %i[view_meetings] }
+
+    it 'shows no edit link' do
+      index_page.visit!
+
+      index_page.expect_no_create_new_button
+    end
+  end
+
+  context 'as an admin' do
+    let(:current_user) { admin }
+
+    it 'allows creating meeting in a project without members' do
+      index_page.visit!
+
+      new_page = index_page.click_create_new
+
+      new_page.set_title 'Some title'
+
+      show_page = new_page.click_create
+
+      show_page.expect_notification(message: 'Successful creation')
+
+      # Not sure if that is then intended behaviour but that is what is currently programmed
+      show_page.expect_invited(admin)
+    end
+  end
+end

modules/meeting/spec/support/pages/meetings/base.rb

@@ -0,0 +1,41 @@
+#-- copyright
+# OpenProject is a project management system.
+# Copyright (C) 2012-2018 the OpenProject Foundation (OPF)
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2017 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See docs/COPYRIGHT.rdoc for more details.
+#++
+
+module Pages::Meetings
+  class Base < Pages::Page
+    attr_accessor :project
+
+    def initialize(project)
+      self.project = project
+    end
+
+    def notification_type
+      :rails
+    end
+  end
+end

modules/meeting/spec/support/pages/meetings/index.rb

@@ -0,0 +1,58 @@
+#-- copyright
+# OpenProject is a project management system.
+# Copyright (C) 2012-2018 the OpenProject Foundation (OPF)
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2017 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See docs/COPYRIGHT.rdoc for more details.
+#++
+
+require_relative './new'
+
+module Pages::Meetings
+  class Index < Pages::Page
+    attr_accessor :project
+
+    def initialize(project)
+      self.project = project
+    end
+
+    def click_create_new
+      within '.toolbar-items' do
+        click_link 'Meeting'
+      end
+
+      New.new(project)
+    end
+
+    def expect_no_create_new_button
+      within '.toolbar-items' do
+        expect(page)
+          .to have_no_link 'Meeting'
+      end
+    end
+
+    def path
+      meetings_path(project)
+    end
+  end
+end

modules/meeting/spec/support/pages/meetings/new.rb

@@ -0,0 +1,70 @@
+#-- copyright
+# OpenProject is a project management system.
+# Copyright (C) 2012-2018 the OpenProject Foundation (OPF)
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2017 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See docs/COPYRIGHT.rdoc for more details.
+#++
+
+require_relative './base'
+require_relative './show'
+
+module Pages::Meetings
+  class New < Base
+    def click_create
+      click_button 'Create'
+
+      meeting = Meeting.last
+
+      if meeting
+        Pages::Meetings::Show.new(meeting)
+      else
+        self
+      end
+    end
+
+    def set_title(text)
+      fill_in 'Title', with: text
+    end
+
+    def set_start_date(date)
+      fill_in 'Start date', with: date
+    end
+
+    def set_start_time(time)
+      fill_in 'Time', with: time
+    end
+
+    def set_duration(duration)
+      fill_in 'Duration', with: duration
+    end
+
+    def invite(user)
+      check "#{user.name} invited"
+    end
+
+    def path
+      new_meeting_path(project)
+    end
+  end
+end

modules/meeting/spec/support/pages/meetings/show.rb

@@ -0,0 +1,62 @@
+#-- copyright
+# OpenProject is a project management system.
+# Copyright (C) 2012-2018 the OpenProject Foundation (OPF)
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2017 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See docs/COPYRIGHT.rdoc for more details.
+#++
+
+require_relative './base'
+
+module Pages::Meetings
+  class Show < Base
+    attr_accessor :meeting
+
+    def initialize(meeting)
+      self.meeting = meeting
+    end
+
+    def expect_no_invited
+      expect(page)
+        .to have_content("#{Meeting.human_attribute_name(:participants_invited)}: -")
+    end
+
+    def expect_no_attended
+      expect(page)
+        .to have_content("#{Meeting.human_attribute_name(:participants_attended)}: -")
+    end
+
+    def expect_invited(*users)
+      users.map(&:name).sort.join('; ')
+    end
+
+    def expect_date_time(expected)
+      expect(page)
+        .to have_content("Time: #{expected}")
+    end
+
+    def path
+      meeting_path(meeting)
+    end
+  end
+end

modules/my_page/config/locales/js-en.yml

@@ -0,0 +1,4 @@
+en:
+  js:
+    my_page:
+      label: "My page"

spec/support/components/grids/grid_area.rb

@@ -11,7 +11,9 @@ module Components
       end
 
       def resize_to(row, column)
-        area.find('.resizer').drag_to self.class.of(row * 2, column * 2).area
+        area.hover
+
+        area.find('.grid--resizer').drag_to self.class.of(row * 2, column * 2).area
       end
 
       def open_menu

spec/support/pages/page.rb

@@ -90,6 +90,8 @@ module Pages
         expect(page).to have_selector(".notification-box.-#{type}", text: message, wait: 20)
       elsif type == :error
         expect(page).to have_selector(".errorExplanation", text: message)
+      elsif type == :success
+        expect(page).to have_selector(".flash.notice", text: message)
       else
         raise NotImplementedError
       end