Merge pull request #7494 from opf/feature/30600-Create-grid-layout-icon

[30600] Create grid layout icon

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

@@ -697,53 +697,56 @@
     <glyph glyph-name="user"
       unicode="&#xF1E6;"
       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-fullscreen"
+    <glyph glyph-name="view-card"
       unicode="&#xF1E7;"
+      horiz-adv-x="512" d=" M0 359H245V167H0V359z M267 359H512V167H267V359z M0 136H245V-56H0V136z M267 136H512V-56H267V136z" />
+    <glyph glyph-name="view-fullscreen"
+      unicode="&#xF1E8;"
       horiz-adv-x="512" d=" M0 348H512V-4H0z" />
     <glyph glyph-name="view-list"
-      unicode="&#xF1E8;"
+      unicode="&#xF1E9;"
       horiz-adv-x="512" d=" M0 348H512V284H0zM0 252H512V188H0zM0 156H512V92H0zM0 60H512V-4H0z" />
     <glyph glyph-name="view-split"
-      unicode="&#xF1E9;"
+      unicode="&#xF1EA;"
       horiz-adv-x="512" d=" M0 348H192V284H0zM0 252H192V188H0zM0 156H192V92H0zM0 60H192V-4H0zM224 348H512V-4H224z" />
     <glyph glyph-name="view-timeline"
-      unicode="&#xF1EA;"
+      unicode="&#xF1EB;"
       horiz-adv-x="512" d=" M44 368H173V317H44zM102 265H466V214H102zM271 162H369V111H271zM53 59H417V8H53zM0 368H33V8H0zM479 368H512V8H479z" />
     <glyph glyph-name="warning"
-      unicode="&#xF1EB;"
+      unicode="&#xF1EC;"
       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="&#xF1EC;"
+      unicode="&#xF1ED;"
       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="&#xF1ED;"
+      unicode="&#xF1EE;"
       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="&#xF1EE;"
+      unicode="&#xF1EF;"
       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="&#xF1EF;"
+      unicode="&#xF1F0;"
       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="&#xF1F0;"
+      unicode="&#xF1F1;"
       horiz-adv-x="512" d=" M416 124V220H288V252H384V444H160V252H256V220H96V124H0V-68H224V124H128V188H384V124H288V-68H512V124zM192 92V60H32V92zM192 380V412H352V380zM480 60H320V92H480z" />
     <glyph glyph-name="workflow"
-      unicode="&#xF1F1;"
+      unicode="&#xF1F2;"
       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="&#xF1F2;"
+      unicode="&#xF1F3;"
       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="&#xF1F3;"
+      unicode="&#xF1F4;"
       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="&#xF1F4;"
+      unicode="&#xF1F5;"
       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="&#xF1F5;"
+      unicode="&#xF1F6;"
       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="&#xF1F6;"
+      unicode="&#xF1F7;"
       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/view-card.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 512 512" width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+ <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
+ <g>
+  <title>Layer 1</title>
+  <rect id="svg_3" height="192" width="245" y="53" x="0" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#000000"/>
+  <rect id="svg_5" height="192" width="245" y="53" x="267" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#000000"/>
+  <rect id="svg_6" height="192" width="245" y="276" x="0" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#000000"/>
+  <rect id="svg_7" height="192" width="245" y="276" x="267" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#000000"/>
+ </g>
+</svg>

app/assets/stylesheets/fonts/_openproject_icon_definitions.scss

@@ -1384,99 +1384,105 @@
 .icon-user:before {
 	content: "\f1e6";
 }
-@mixin icon-mixin-view-fullscreen {
+@mixin icon-mixin-view-card {
     content: "\f1e7";
 }
-.icon-view-fullscreen:before {
+.icon-view-card:before {
 	content: "\f1e7";
 }
-@mixin icon-mixin-view-list {
+@mixin icon-mixin-view-fullscreen {
     content: "\f1e8";
 }
-.icon-view-list:before {
+.icon-view-fullscreen:before {
 	content: "\f1e8";
 }
-@mixin icon-mixin-view-split {
+@mixin icon-mixin-view-list {
     content: "\f1e9";
 }
-.icon-view-split:before {
+.icon-view-list:before {
 	content: "\f1e9";
 }
-@mixin icon-mixin-view-timeline {
+@mixin icon-mixin-view-split {
     content: "\f1ea";
 }
-.icon-view-timeline:before {
+.icon-view-split:before {
 	content: "\f1ea";
 }
-@mixin icon-mixin-warning {
+@mixin icon-mixin-view-timeline {
     content: "\f1eb";
 }
-.icon-warning:before {
+.icon-view-timeline:before {
 	content: "\f1eb";
 }
-@mixin icon-mixin-watched {
+@mixin icon-mixin-warning {
     content: "\f1ec";
 }
-.icon-watched:before {
+.icon-warning:before {
 	content: "\f1ec";
 }
-@mixin icon-mixin-wiki-edit {
+@mixin icon-mixin-watched {
     content: "\f1ed";
 }
-.icon-wiki-edit:before {
+.icon-watched:before {
 	content: "\f1ed";
 }
-@mixin icon-mixin-wiki {
+@mixin icon-mixin-wiki-edit {
     content: "\f1ee";
 }
-.icon-wiki:before {
+.icon-wiki-edit:before {
 	content: "\f1ee";
 }
-@mixin icon-mixin-wiki2 {
+@mixin icon-mixin-wiki {
     content: "\f1ef";
 }
-.icon-wiki2:before {
+.icon-wiki:before {
 	content: "\f1ef";
 }
-@mixin icon-mixin-work-packages {
+@mixin icon-mixin-wiki2 {
     content: "\f1f0";
 }
-.icon-work-packages:before {
+.icon-wiki2:before {
 	content: "\f1f0";
 }
-@mixin icon-mixin-workflow {
+@mixin icon-mixin-work-packages {
     content: "\f1f1";
 }
-.icon-workflow:before {
+.icon-work-packages:before {
 	content: "\f1f1";
 }
-@mixin icon-mixin-yes {
+@mixin icon-mixin-workflow {
     content: "\f1f2";
 }
-.icon-yes:before {
+.icon-workflow:before {
 	content: "\f1f2";
 }
-@mixin icon-mixin-zen-mode {
+@mixin icon-mixin-yes {
     content: "\f1f3";
 }
-.icon-zen-mode:before {
+.icon-yes:before {
 	content: "\f1f3";
 }
-@mixin icon-mixin-zoom-auto {
+@mixin icon-mixin-zen-mode {
     content: "\f1f4";
 }
-.icon-zoom-auto:before {
+.icon-zen-mode:before {
 	content: "\f1f4";
 }
-@mixin icon-mixin-zoom-in {
+@mixin icon-mixin-zoom-auto {
     content: "\f1f5";
 }
-.icon-zoom-in:before {
+.icon-zoom-auto:before {
 	content: "\f1f5";
 }
-@mixin icon-mixin-zoom-out {
+@mixin icon-mixin-zoom-in {
     content: "\f1f6";
 }
-.icon-zoom-out:before {
+.icon-zoom-in:before {
 	content: "\f1f6";
 }
+@mixin icon-mixin-zoom-out {
+    content: "\f1f7";
+}
+.icon-zoom-out:before {
+	content: "\f1f7";
+}

app/assets/stylesheets/fonts/_openproject_icon_font.lsg

@@ -233,6 +233,7 @@
 <li><span class="icon icon-user-minus"></span>user-minus</li>
 <li><span class="icon icon-user-plus"></span>user-plus</li>
 <li><span class="icon icon-user"></span>user</li>
+<li><span class="icon icon-view-card"></span>view-card</li>
 <li><span class="icon icon-view-fullscreen"></span>view-fullscreen</li>
 <li><span class="icon icon-view-list"></span>view-list</li>
 <li><span class="icon icon-view-split"></span>view-split</li>

frontend/src/app/components/wp-buttons/wp-view-toggle-button/work-package-view-toggle-button.component.ts

@@ -70,7 +70,7 @@ import {untilComponentDestroyed} from "ng2-rx-componentdestroyed";
 })
 export class WorkPackageViewToggleButton extends AbstractWorkPackageButtonComponent implements OnInit, OnDestroy {
   public iconListView:string = 'icon-view-list';
-  public iconCardView:string = 'icon-image2';
+  public iconCardView:string = 'icon-view-card';
 
   public inListView:boolean = true;