PhabricatorActionHeaderView v0

Summary: Initial pass at an action header. The idea is to support current and future planned needs in 'headers' with various colors and icons. The overall goal here is to keep markup light and allow other classes to wrap and extend with more specific features.

Test Plan: Tested UIExamples and Workboards.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Differential Revision: https://secure.phabricator.com/D5585

resources/sprite/manifest/actions.json

@@ -1,139 +1,139 @@
 {
   "version" : 1,
   "sprites" : {
-    "action-icon-flag-dark"      : {
+    "actions-flag-dark"      : {
-      "name" : "action-icon-flag-dark",
+      "name" : "actions-flag-dark",
-      "rule" : ".action-icon-flag-dark",
+      "rule" : ".actions-flag-dark, .device-desktop .actions-flag-grey.phabricator-action-icon-item-link:hover",
       "hash" : "4ae54fc28dd2d6cfa6e57dde7bd640cf"
     },
-    "action-icon-flag-grey"      : {
+    "actions-flag-grey"      : {
-      "name" : "action-icon-flag-grey",
+      "name" : "actions-flag-grey",
-      "rule" : ".action-icon-flag-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-flag",
+      "rule" : ".actions-flag-grey",
       "hash" : "50e739ca2d6a5527ce2bb8aafd4eb93f"
     },
-    "action-icon-flag-white"     : {
+    "actions-flag-white"     : {
-      "name" : "action-icon-flag-white",
+      "name" : "actions-flag-white",
-      "rule" : ".action-icon-flag-white",
+      "rule" : ".actions-flag-white",
       "hash" : "d29ba4e3f88d5b2f3b0ea14754f7b89a"
     },
-    "action-icon-heart-dark"     : {
+    "actions-heart-dark"     : {
-      "name" : "action-icon-heart-dark",
+      "name" : "actions-heart-dark",
-      "rule" : ".action-icon-heart-dark",
+      "rule" : ".actions-heart-dark, .device-desktop .actions-heart-grey.phabricator-action-icon-item-link:hover",
       "hash" : "90b437a281724a4961e33272eafd616b"
     },
-    "action-icon-heart-grey"     : {
+    "actions-heart-grey"     : {
-      "name" : "action-icon-heart-grey",
+      "name" : "actions-heart-grey",
-      "rule" : ".action-icon-heart-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-heart",
+      "rule" : ".actions-heart-grey",
       "hash" : "cd521a7267b321516223462860373f09"
     },
-    "action-icon-heart-white"    : {
+    "actions-heart-white"    : {
-      "name" : "action-icon-heart-white",
+      "name" : "actions-heart-white",
-      "rule" : ".action-icon-heart-white",
+      "rule" : ".actions-heart-white",
       "hash" : "505ebd7324f9c39fa2366a85996d1194"
     },
-    "action-icon-move-dark"      : {
+    "actions-move-dark"      : {
-      "name" : "action-icon-move-dark",
+      "name" : "actions-move-dark",
-      "rule" : ".action-icon-move-dark",
+      "rule" : ".actions-move-dark, .device-desktop .actions-move-grey.phabricator-action-icon-item-link:hover",
       "hash" : "38f5b9168bf04d1a904b09805e589cd7"
     },
-    "action-icon-move-grey"      : {
+    "actions-move-grey"      : {
-      "name" : "action-icon-move-grey",
+      "name" : "actions-move-grey",
-      "rule" : ".action-icon-move-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-move",
+      "rule" : ".actions-move-grey",
       "hash" : "35dcc45f04a81cbf9e5ecdf0fcd5bebc"
     },
-    "action-icon-move-white"     : {
+    "actions-move-white"     : {
-      "name" : "action-icon-move-white",
+      "name" : "actions-move-white",
-      "rule" : ".action-icon-move-white",
+      "rule" : ".actions-move-white",
       "hash" : "2b1b790a494a079d288d5a3a47c6bd62"
     },
-    "action-icon-new-dark"       : {
+    "actions-new-dark"       : {
-      "name" : "action-icon-new-dark",
+      "name" : "actions-new-dark",
-      "rule" : ".action-icon-new-dark",
+      "rule" : ".actions-new-dark, .device-desktop .actions-new-grey.phabricator-action-icon-item-link:hover",
       "hash" : "52c45b76d0dbd51e6eb65f0597d5098a"
     },
-    "action-icon-new-grey"       : {
+    "actions-new-grey"       : {
-      "name" : "action-icon-new-grey",
+      "name" : "actions-new-grey",
-      "rule" : ".action-icon-new-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-new",
+      "rule" : ".actions-new-grey",
       "hash" : "c51315bd83a20806625ca3a887f86215"
     },
-    "action-icon-new-white"      : {
+    "actions-new-white"      : {
-      "name" : "action-icon-new-white",
+      "name" : "actions-new-white",
-      "rule" : ".action-icon-new-white",
+      "rule" : ".actions-new-white",
       "hash" : "5a344c62e037d672516dae0e3a8dd589"
     },
-    "action-icon-search-dark"    : {
+    "actions-search-dark"    : {
-      "name" : "action-icon-search-dark",
+      "name" : "actions-search-dark",
-      "rule" : ".action-icon-search-dark",
+      "rule" : ".actions-search-dark, .device-desktop .actions-search-grey.phabricator-action-icon-item-link:hover",
       "hash" : "6ff124bc9423bf98be5a53e22508cd26"
     },
-    "action-icon-search-grey"    : {
+    "actions-search-grey"    : {
-      "name" : "action-icon-search-grey",
+      "name" : "actions-search-grey",
-      "rule" : ".action-icon-search-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-search",
+      "rule" : ".actions-search-grey",
       "hash" : "57b5c47c0676da7f97d3b2f7eefbbea4"
     },
-    "action-icon-search-white"   : {
+    "actions-search-white"   : {
-      "name" : "action-icon-search-white",
+      "name" : "actions-search-white",
-      "rule" : ".action-icon-search-white",
+      "rule" : ".actions-search-white",
       "hash" : "17f1bf9820b0c44f4641e0256840b138"
     },
-    "action-icon-settings-dark"  : {
+    "actions-settings-dark"  : {
-      "name" : "action-icon-settings-dark",
+      "name" : "actions-settings-dark",
-      "rule" : ".action-icon-settings-dark",
+      "rule" : ".actions-settings-dark, .device-desktop .actions-settings-grey.phabricator-action-icon-item-link:hover",
       "hash" : "5ecb08643250a052e5d090ef4660faf5"
     },
-    "action-icon-settings-grey"  : {
+    "actions-settings-grey"  : {
-      "name" : "action-icon-settings-grey",
+      "name" : "actions-settings-grey",
-      "rule" : ".action-icon-settings-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-settings",
+      "rule" : ".actions-settings-grey",
       "hash" : "5aeb35f1019c51a2f9140dc8765c9dca"
     },
-    "action-icon-settings-white" : {
+    "actions-settings-white" : {
-      "name" : "action-icon-settings-white",
+      "name" : "actions-settings-white",
-      "rule" : ".action-icon-settings-white",
+      "rule" : ".actions-settings-white",
       "hash" : "8cdd154946f1a8d8d307b72eddd5d755"
     },
-    "action-icon-star-dark"      : {
+    "actions-star-dark"      : {
-      "name" : "action-icon-star-dark",
+      "name" : "actions-star-dark",
-      "rule" : ".action-icon-star-dark",
+      "rule" : ".actions-star-dark, .device-desktop .actions-star-grey.phabricator-action-icon-item-link:hover",
       "hash" : "45567d03f8e34811eca0621e93b5e050"
     },
-    "action-icon-star-grey"      : {
+    "actions-star-grey"      : {
-      "name" : "action-icon-star-grey",
+      "name" : "actions-star-grey",
-      "rule" : ".action-icon-star-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-star",
+      "rule" : ".actions-star-grey",
       "hash" : "1c7909e987b64b26b728506695457770"
     },
-    "action-icon-star-white"     : {
+    "actions-star-white"     : {
-      "name" : "action-icon-star-white",
+      "name" : "actions-star-white",
-      "rule" : ".action-icon-star-white",
+      "rule" : ".actions-star-white",
       "hash" : "e7c949542a54a347879ceb96f42a3c02"
     },
-    "action-icon-tag-dark"       : {
+    "actions-tag-dark"       : {
-      "name" : "action-icon-tag-dark",
+      "name" : "actions-tag-dark",
-      "rule" : ".action-icon-tag-dark",
+      "rule" : ".actions-tag-dark, .device-desktop .actions-tag-grey.phabricator-action-icon-item-link:hover",
       "hash" : "24d97fa7524d0bf1bac17d9e07a63f48"
     },
-    "action-icon-tag-grey"       : {
+    "actions-tag-grey"       : {
-      "name" : "action-icon-tag-grey",
+      "name" : "actions-tag-grey",
-      "rule" : ".action-icon-tag-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-tag",
+      "rule" : ".actions-tag-grey",
       "hash" : "f04a5b38209c0f8e9ad2a3a964d5d505"
     },
-    "action-icon-tag-white"      : {
+    "actions-tag-white"      : {
-      "name" : "action-icon-tag-white",
+      "name" : "actions-tag-white",
-      "rule" : ".action-icon-tag-white",
+      "rule" : ".actions-tag-white",
       "hash" : "fdfc5d20f6a0d90b6d329159823d2cb0"
     },
-    "action-icon-wrench-dark"    : {
+    "actions-wrench-dark"    : {
-      "name" : "action-icon-wrench-dark",
+      "name" : "actions-wrench-dark",
-      "rule" : ".action-icon-wrench-dark",
+      "rule" : ".actions-wrench-dark, .device-desktop .actions-wrench-grey.phabricator-action-icon-item-link:hover",
       "hash" : "3a5cfa463c3c89194d3bbce3952a6e80"
     },
-    "action-icon-wrench-grey"    : {
+    "actions-wrench-grey"    : {
-      "name" : "action-icon-wrench-grey",
+      "name" : "actions-wrench-grey",
-      "rule" : ".action-icon-wrench-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-wrench",
+      "rule" : ".actions-wrench-grey",
       "hash" : "40d8a77d6272589c69f65e9b5e5587e1"
     },
-    "action-icon-wrench-white"   : {
+    "actions-wrench-white"   : {
-      "name" : "action-icon-wrench-white",
+      "name" : "actions-wrench-white",
-      "rule" : ".action-icon-wrench-white",
+      "rule" : ".actions-wrench-white",
       "hash" : "20ee83ae6a5d0dc6918727b6ccacec67"
     }
   },
@@ -141,6 +141,6 @@
     1,
     2
   ],
-  "header"  : "\/**\n * @provides sprite-action-icon-css\n * @generated\n *\/\n\n.sprite-action-icon {\n  background-image: url(\/rsrc\/image\/sprite-action-icon.png);\n  background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n  .sprite-action-icon {\n    background-image: url(\/rsrc\/image\/sprite-action-icon-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}\n",
+  "header"  : "\/**\n * @provides sprite-actions-css\n * @generated\n *\/\n\n.sprite-actions {\n  background-image: url(\/rsrc\/image\/sprite-actions.png);\n  background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n  .sprite-actions {\n    background-image: url(\/rsrc\/image\/sprite-actions-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}\n",
   "type"    : "standard"
 }

resources/sprite/manifest/minicons.json

@@ -1,21 +1,41 @@
 {
   "version" : 1,
   "sprites" : {
+    "minicons-company-dark"     : {
+      "name" : "minicons-company-dark",
+      "rule" : ".minicons-company-dark",
+      "hash" : "7787a1c5ccdd0f94faa795db6b382901"
+    },
     "minicons-company-white"    : {
       "name" : "minicons-company-white",
       "rule" : ".minicons-company-white",
       "hash" : "181289eba2fcb851858ab5b99fd19818"
     },
+    "minicons-move-dark"        : {
+      "name" : "minicons-move-dark",
+      "rule" : ".minicons-move-dark",
+      "hash" : "d87f5f972885ad2653d92675b4e3855c"
+    },
     "minicons-move-white"       : {
       "name" : "minicons-move-white",
       "rule" : ".minicons-move-white",
       "hash" : "620e464c0e50830b90eaed3b5a2b9f56"
     },
+    "minicons-public-dark"      : {
+      "name" : "minicons-public-dark",
+      "rule" : ".minicons-public-dark",
+      "hash" : "12bdec3c0e273f820aaef70f61128f4b"
+    },
     "minicons-public-white"     : {
       "name" : "minicons-public-white",
       "rule" : ".minicons-public-white",
       "hash" : "c075363aeba4c52dbcc328a24d8f4298"
     },
+    "minicons-restricted-dark"  : {
+      "name" : "minicons-restricted-dark",
+      "rule" : ".minicons-restricted-dark",
+      "hash" : "7a1d926f7af98bef3b17a913e1d0b5b3"
+    },
     "minicons-restricted-white" : {
       "name" : "minicons-restricted-white",
       "rule" : ".minicons-restricted-white",

src/__celerity_resource_map__.php

@@ -625,15 +625,15 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/sprite-minicons-X2.png' =>
   array(
-    'hash' => '9b36608d0bfaa941816e42ceb6912aaf',
+    'hash' => 'c420c6462f7e50ca9941ccc5dd9e3dec',
-    'uri' => '/res/9b36608d/rsrc/image/sprite-minicons-X2.png',
+    'uri' => '/res/c420c646/rsrc/image/sprite-minicons-X2.png',
     'disk' => '/rsrc/image/sprite-minicons-X2.png',
     'type' => 'png',
   ),
   '/rsrc/image/sprite-minicons.png' =>
   array(
-    'hash' => 'f4aa63b2bb2d7364c388a20fa35a08c5',
+    'hash' => '168bb875933624b3080a1cc134e5b4ed',
-    'uri' => '/res/f4aa63b2/rsrc/image/sprite-minicons.png',
+    'uri' => '/res/168bb875/rsrc/image/sprite-minicons.png',
     'disk' => '/rsrc/image/sprite-minicons.png',
     'type' => 'png',
   ),
@@ -2821,6 +2821,24 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/herald/PathTypeahead.js',
   ),
+  'phabricator-action-header-view-css' =>
+  array(
+    'uri' => '/res/1c0142de/rsrc/css/layout/phabricator-action-header-view.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/layout/phabricator-action-header-view.css',
+  ),
+  'phabricator-action-icon-view-css' =>
+  array(
+    'uri' => '/res/8b47cf61/rsrc/css/layout/phabricator-action-icon-view.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/layout/phabricator-action-icon-view.css',
+  ),
   'phabricator-action-list-view-css' =>
   array(
     'uri' => '/res/7a67c3b9/rsrc/css/layout/phabricator-action-list-view.css',
@@ -3475,7 +3493,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-workboard-view-css' =>
   array(
-    'uri' => '/res/c9bfe320/rsrc/css/layout/phabricator-workboard-view.css',
+    'uri' => '/res/14217087/rsrc/css/layout/phabricator-workboard-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3484,7 +3502,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-workpanel-view-css' =>
   array(
-    'uri' => '/res/4e25e23b/rsrc/css/layout/phabricator-workpanel-view.css',
+    'uri' => '/res/ff5d5b26/rsrc/css/layout/phabricator-workpanel-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3716,9 +3734,9 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/core/spacing.css',
   ),
-  'sprite-action-icon-css' =>
+  'sprite-actions-css' =>
   array(
-    'uri' => '/res/a992b71c/rsrc/css/sprite-actions.css',
+    'uri' => '/res/41ef6a23/rsrc/css/sprite-actions.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3799,7 +3817,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-minicons-css' =>
   array(
-    'uri' => '/res/8b66d53f/rsrc/css/sprite-minicons.css',
+    'uri' => '/res/2dba70cd/rsrc/css/sprite-minicons.css',
     'type' => 'css',
     'requires' =>
     array(

src/__phutil_library_map__.php

@@ -666,6 +666,9 @@ phutil_register_library_map(array(
     'PhabricatorAWSConfigOptions' => 'applications/config/option/PhabricatorAWSConfigOptions.php',
     'PhabricatorAccessLog' => 'infrastructure/PhabricatorAccessLog.php',
     'PhabricatorAccessLogConfigOptions' => 'applications/config/option/PhabricatorAccessLogConfigOptions.php',
+    'PhabricatorActionHeaderExample' => 'applications/uiexample/examples/PhabricatorActionHeaderExample.php',
+    'PhabricatorActionHeaderView' => 'view/layout/PhabricatorActionHeaderView.php',
+    'PhabricatorActionIconView' => 'view/layout/PhabricatorActionIconView.php',
     'PhabricatorActionListExample' => 'applications/uiexample/examples/PhabricatorActionListExample.php',
     'PhabricatorActionListView' => 'view/layout/PhabricatorActionListView.php',
     'PhabricatorActionView' => 'view/layout/PhabricatorActionView.php',
@@ -1445,7 +1448,6 @@ phutil_register_library_map(array(
     'PhabricatorUserStatusInvalidEpochException' => 'applications/people/exception/PhabricatorUserStatusInvalidEpochException.php',
     'PhabricatorUserStatusOverlapException' => 'applications/people/exception/PhabricatorUserStatusOverlapException.php',
     'PhabricatorUserTestCase' => 'applications/people/storage/__tests__/PhabricatorUserTestCase.php',
-    'PhabricatorWorkboardActionView' => 'view/layout/PhabricatorWorkboardActionView.php',
     'PhabricatorWorkboardExample' => 'applications/uiexample/examples/PhabricatorWorkboardExample.php',
     'PhabricatorWorkboardView' => 'view/layout/PhabricatorWorkboardView.php',
     'PhabricatorWorker' => 'infrastructure/daemon/workers/PhabricatorWorker.php',
@@ -2345,6 +2347,9 @@ phutil_register_library_map(array(
     'Phabricator404Controller' => 'PhabricatorController',
     'PhabricatorAWSConfigOptions' => 'PhabricatorApplicationConfigOptions',
     'PhabricatorAccessLogConfigOptions' => 'PhabricatorApplicationConfigOptions',
+    'PhabricatorActionHeaderExample' => 'PhabricatorUIExample',
+    'PhabricatorActionHeaderView' => 'AphrontView',
+    'PhabricatorActionIconView' => 'AphrontView',
     'PhabricatorActionListExample' => 'PhabricatorUIExample',
     'PhabricatorActionListView' => 'AphrontView',
     'PhabricatorActionView' => 'AphrontView',
@@ -3104,7 +3109,6 @@ phutil_register_library_map(array(
     'PhabricatorUserStatusInvalidEpochException' => 'Exception',
     'PhabricatorUserStatusOverlapException' => 'Exception',
     'PhabricatorUserTestCase' => 'PhabricatorTestCase',
-    'PhabricatorWorkboardActionView' => 'AphrontView',
     'PhabricatorWorkboardExample' => 'PhabricatorUIExample',
     'PhabricatorWorkboardView' => 'AphrontView',
     'PhabricatorWorkerActiveTask' => 'PhabricatorWorkerTask',

src/applications/uiexample/examples/PhabricatorActionHeaderExample.php

@@ -0,0 +1,277 @@
+<?php
+
+final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Action Headers';
+  }
+
+  public function getDescription() {
+    return 'Various header layouts with and without icons';
+  }
+
+  public function renderExample() {
+
+/* Colors */
+    $title1 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Header Plain'));
+
+    $header1 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Colorless');
+
+    $header2 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Light Grey')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY);
+
+    $header3 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Blue')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_BLUE);
+
+    $header4 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Green')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREEN);
+
+    $header5 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Red')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_RED);
+
+    $header6 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Yellow')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_YELLOW);
+
+    $layout1 = id(new AphrontMultiColumnView())
+      ->addColumn($header1)
+      ->addColumn($header2)
+      ->addColumn($header3)
+      ->addColumn($header4)
+      ->addColumn($header5)
+      ->addColumn($header6)
+      ->setFluidLayout(true)
+      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);
+
+    $wrap1 = phutil_tag(
+      'div',
+        array(
+          'class' => 'ml'
+        ),
+        $layout1);
+
+/* Policy Icons */
+    $title2 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('With Policy Icons'));
+
+    $header1 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Company')
+      ->setHeaderIcon('company-dark');
+
+    $header2 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Public')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY)
+      ->setHeaderIcon('public-dark');
+
+    $header3 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Restricted')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_BLUE)
+      ->setHeaderIcon('restricted-white');
+
+    $header4 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Company')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREEN)
+      ->setHeaderIcon('company-white');
+
+    $header5 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Public')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_RED)
+      ->setHeaderIcon('public-white');
+
+    $header6 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Restricted')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_YELLOW)
+      ->setHeaderIcon('restriced-white');
+
+    $layout2 = id(new AphrontMultiColumnView())
+      ->addColumn($header1)
+      ->addColumn($header2)
+      ->addColumn($header3)
+      ->addColumn($header4)
+      ->addColumn($header5)
+      ->addColumn($header6)
+      ->setFluidLayout(true)
+      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);
+
+    $wrap2 = phutil_tag(
+      'div',
+        array(
+          'class' => 'ml'
+        ),
+        $layout2);
+
+
+/* Action Icons */
+    $title3 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('With Action Icons'));
+
+    $action1 = new PhabricatorActionIconView();
+    $action1->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action1->setSpriteIcon('settings-grey');
+    $action1->setHref('#');
+
+    $action2 = new PhabricatorActionIconView();
+    $action2->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action2->setSpriteIcon('heart-white');
+    $action2->setHref('#');
+
+    $action3 = new PhabricatorActionIconView();
+    $action3->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action3->setSpriteIcon('tag-white');
+    $action3->setHref('#');
+
+    $action4 = new PhabricatorActionIconView();
+    $action4->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action4->setSpriteIcon('new-white');
+    $action4->setHref('#');
+
+    $action5 = new PhabricatorActionIconView();
+    $action5->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action5->setSpriteIcon('search-white');
+    $action5->setHref('#');
+
+    $action6 = new PhabricatorActionIconView();
+    $action6->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action6->setSpriteIcon('move-white');
+    $action6->setHref('#');
+
+    $header1 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Company')
+      ->setHeaderHref('http://phacility.com/')
+      ->addAction($action1);
+
+    $header2 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Public')
+      ->setHeaderHref('http://phacility.com/')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY)
+      ->addAction($action1);
+
+    $header3 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Restricted')
+      ->setHeaderHref('http://phacility.com/')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_BLUE)
+      ->addAction($action2);
+
+    $header4 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Company')
+      ->setHeaderHref('http://phacility.com/')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREEN)
+      ->addAction($action3);
+
+    $header5 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Public')
+      ->setHeaderHref('http://phacility.com/')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_RED)
+      ->addAction($action4)
+      ->addAction($action5);
+
+    $header6 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Restricted')
+      ->setHeaderHref('http://phacility.com/')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_YELLOW)
+      ->addAction($action6);
+
+    $layout3 = id(new AphrontMultiColumnView())
+      ->addColumn($header1)
+      ->addColumn($header2)
+      ->addColumn($header3)
+      ->addColumn($header4)
+      ->addColumn($header5)
+      ->addColumn($header6)
+      ->setFluidLayout(true)
+      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);
+
+    $wrap3 = phutil_tag(
+      'div',
+        array(
+          'class' => 'ml'
+        ),
+        $layout3);
+
+/* Action Icons */
+    $title4 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('With Tags'));
+
+    $tag1 = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_RED)
+      ->setName('Open');
+
+    $tag2 = id(new PhabricatorTagView())
+      ->setType(PhabricatorTagView::TYPE_STATE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_BLUE)
+      ->setName('Closed');
+
+    $action1 = new PhabricatorActionIconView();
+    $action1->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action1->setSpriteIcon('flag-grey');
+    $action1->setHref('#');
+
+    $header1 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Company')
+      ->setTag($tag2);
+
+    $header2 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Public')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY)
+      ->addAction($action1)
+      ->setTag($tag1);
+
+    $header3 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Restricted')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_BLUE)
+      ->setTag($tag2);
+
+    $header4 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Company')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREEN)
+      ->setTag($tag1);
+
+    $header5 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Public')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_RED)
+      ->setTag($tag2);
+
+    $header6 = id(new PhabricatorActionHeaderView())
+      ->setHeaderTitle('Restricted')
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_YELLOW)
+      ->setTag($tag1);
+
+    $layout3 = id(new AphrontMultiColumnView())
+      ->addColumn($header1)
+      ->addColumn($header2)
+      ->addColumn($header3)
+      ->addColumn($header4)
+      ->addColumn($header5)
+      ->addColumn($header6)
+      ->setFluidLayout(true)
+      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);
+
+    $wrap4 = phutil_tag(
+      'div',
+        array(
+          'class' => 'ml'
+        ),
+        $layout3);
+
+    return phutil_tag(
+      'div',
+        array(),
+        array(
+          $title1,
+          $wrap1,
+          $title2,
+          $wrap2,
+          $title3,
+          $wrap3,
+          $title4,
+          $wrap4
+        ));
+  }
+}

src/applications/uiexample/examples/PhabricatorWorkboardExample.php

@@ -131,21 +131,21 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
           ->addPanel($panel2)
           ->addPanel($panel3);
 
-    $action = new PhabricatorWorkboardActionView();
+    $action = new PhabricatorActionIconView();
     $action->setHref('/maniphest/task/create');
     $action->setImage('/rsrc/image/actions/edit.png');
 
-    $person1 = new PhabricatorWorkboardActionView();
+    $person1 = new PhabricatorActionIconView();
     $person1->setHref('http://en.wikipedia.org/wiki/George_Washington');
     $person1->setImage(
       celerity_get_resource_uri('/rsrc/image/people/washington.png'));
 
-    $person2 = new PhabricatorWorkboardActionView();
+    $person2 = new PhabricatorActionIconView();
     $person2->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
     $person2->setImage(
       celerity_get_resource_uri('/rsrc/image/people/harding.png'));
 
-    $person3 = new PhabricatorWorkboardActionView();
+    $person3 = new PhabricatorActionIconView();
     $person3->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
     $person3->setImage(
       celerity_get_resource_uri('/rsrc/image/people/taft.png'));

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -114,13 +114,13 @@ final class CeleritySpriteGenerator {
         }
 
         $sprite = id(clone $template)
-          ->setName('action-icon-'.$icon.$suffix);
+          ->setName('actions-'.$icon.$suffix);
 
         $tcss = array();
-        $tcss[] = '.action-icon-'.$icon.$suffix;
+        $tcss[] = '.actions-'.$icon.$suffix;
-        if ($color == 'grey') {
+        if ($color == 'dark') {
-          $tcss[] = '.device-desktop .phabricator-action-icon-view:hover '.
+          $tcss[] = '.device-desktop '.
-            '.action-icon-'.$icon;
+            '.actions-'.$icon.'-grey.phabricator-action-icon-item-link:hover';
         }
 
         $sprite->setTargetCSS(implode(', ', $tcss));
@@ -133,7 +133,7 @@ final class CeleritySpriteGenerator {
       }
     }
 
-    $sheet = $this->buildSheet('action-icon', true);
+    $sheet = $this->buildSheet('actions', true);
     $sheet->setScales($scales);
     foreach ($sprites as $sprite) {
       $sheet->addSprite($sprite);
@@ -147,6 +147,7 @@ final class CeleritySpriteGenerator {
 
     $colors = array(
       'white',
+      'dark',
     );
 
     $scales = array(

src/view/layout/PhabricatorActionHeaderView.php

@@ -0,0 +1,130 @@
+<?php
+
+final class PhabricatorActionHeaderView extends AphrontView {
+
+  const ICON_GREY = 'grey';
+  const ICON_WHITE = 'white';
+
+  const HEADER_GREY = 'grey';
+  const HEADER_BLUE = 'blue';
+  const HEADER_GREEN = 'green';
+  const HEADER_RED = 'red';
+  const HEADER_YELLOW = 'yellow';
+
+  private $headerTitle;
+  private $headerHref;
+  private $headerIcon;
+  private $actions = array();
+  private $iconColor = PhabricatorActionHeaderView::ICON_GREY;
+  private $headerColor;
+
+  public function addAction(PhabricatorActionIconView $action) {
+    $this->actions[] = $action;
+    return $this;
+  }
+
+  public function setTag(PhabricatorTagView $tag) {
+    $this->actions[] = $tag;
+    return $this;
+  }
+
+  public function setHeaderTitle($header) {
+    $this->headerTitle = $header;
+    return $this;
+  }
+
+  public function setHeaderHref($href) {
+    $this->headerHref = $href;
+    return $this;
+  }
+
+  public function setHeaderIcon($minicon) {
+    $this->headerIcon = $minicon;
+    return $this;
+  }
+
+  public function setIconColor($color) {
+    $this->iconColor = $color;
+    return $this;
+  }
+
+  public function setHeaderColor($color) {
+    $this->headerColor = $color;
+    return $this;
+  }
+
+  public function render() {
+
+    require_celerity_resource('phabricator-action-header-view-css');
+
+    $classes = array();
+    $classes[] = 'phabricator-action-header';
+
+    if ($this->headerColor) {
+      $classes[] = 'sprite-gradient';
+      $classes[] = 'gradient-'.$this->headerColor.'-header';
+    }
+
+    $action_list = array();
+    foreach ($this->actions as $action) {
+      $action_list[] = phutil_tag(
+        'li',
+          array(
+          'class' => 'phabricator-action-header-icon-item'
+        ),
+        $action);
+    }
+
+    $header_icon = '';
+    if ($this->headerIcon) {
+      require_celerity_resource('sprite-minicons-css');
+      $header_icon = phutil_tag(
+        'span',
+          array(
+            'class' => 'sprite-minicons minicons-'.$this->headerIcon
+          ),
+          '');
+    }
+
+    $header_title = $this->headerTitle;
+    if ($this->headerHref) {
+      $header_title = phutil_tag(
+        'a',
+          array(
+            'class' => 'phabricator-action-header-link',
+            'href' => $this->headerHref
+          ),
+          $this->headerTitle);
+    }
+
+    $header = phutil_tag(
+      'h3',
+        array(
+          'class' => 'phabricator-action-header-title'
+        ),
+      array(
+        $header_icon,
+        $header_title));
+
+    $icons = '';
+    if (!empty($action_list)) {
+      $classes[] = 'phabricator-action-header-icon-'.$this->iconColor;
+      $icons = phutil_tag(
+        'ul',
+          array(
+            'class' => 'phabricator-action-header-icon-list'
+          ),
+          $action_list);
+    }
+
+    return phutil_tag(
+      'div',
+        array(
+          'class' => implode(' ', $classes)
+        ),
+        array(
+          $header,
+          $icons
+        ));
+  }
+}

src/view/layout/PhabricatorActionIconView.php

@@ -0,0 +1,72 @@
+<?php
+
+final class PhabricatorActionIconView extends AphrontView {
+
+  const SPRITE_MINICONS = 'minicons';
+  const SPRITE_ACTIONS = 'actions';
+
+  private $href;
+  private $workflow;
+  private $image;
+  private $spriteIcon;
+  private $spriteSheet;
+
+  public function setHref($href) {
+    $this->href = $href;
+    return $this;
+  }
+
+  public function setWorkflow($workflow) {
+    $this->workflow = $workflow;
+    return $this;
+  }
+
+  public function setImage($image) {
+    $this->image = $image;
+    return $this;
+  }
+
+  public function setSpriteIcon($sprite) {
+    $this->spriteIcon = $sprite;
+    return $this;
+  }
+
+  public function setSpriteSheet($sheet) {
+    $this->spriteSheet = $sheet;
+    return $this;
+  }
+
+  public function render() {
+    require_celerity_resource('phabricator-action-icon-view-css');
+
+    if ($this->spriteIcon) {
+      require_celerity_resource('sprite-actions-css');
+      require_celerity_resource('sprite-minicons-css');
+      $classes = array();
+      $classes[] = 'phabricator-action-icon-item-link';
+      $classes[] = 'sprite-'.$this->spriteSheet;
+      $classes[] = $this->spriteSheet.'-'.$this->spriteIcon;
+
+      $action_icon = phutil_tag(
+        'a',
+          array(
+            'href'  => $this->href,
+            'class' => implode(' ', $classes),
+            'sigil' => $this->workflow ? 'workflow' : null,
+          ),
+          '');
+    } else {
+      $action_icon = phutil_tag(
+        'a',
+          array(
+            'href'  => $this->href,
+            'class' => 'phabricator-action-icon-item-link',
+            'sigil' => $this->workflow ? 'workflow' : null,
+            'style' => 'background-image: url('.$this->image.');'
+          ),
+          '');
+    }
+
+    return $action_icon;
+  }
+}

src/view/layout/PhabricatorWorkboardActionView.php

@@ -1,35 +0,0 @@
-<?php
-
-final class PhabricatorWorkboardActionView extends AphrontView {
-
-  private $href;
-  private $workflow;
-  private $image;
-
-  public function setHref($href) {
-    $this->href = $href;
-    return $this;
-  }
-
-  public function setWorkflow($workflow) {
-    $this->workflow = $workflow;
-    return $this;
-  }
-
-  public function setImage($image) {
-    $this->image = $image;
-  }
-
-  public function render() {
-
-    return phutil_tag(
-      'a',
-        array(
-          'href'  => $this->href,
-          'class' => 'phabricator-workboard-action-item-link',
-          'sigil' => $this->workflow ? 'workflow' : null,
-          'style' => 'background-image: url('.$this->image.');'
-        ),
-        '');
-  }
-}

src/view/layout/PhabricatorWorkboardView.php

@@ -16,7 +16,7 @@ final class PhabricatorWorkboardView extends AphrontView {
     return $this;
   }
 
-  public function addAction(PhabricatorWorkboardActionView $action) {
+  public function addAction(PhabricatorActionIconView $action) {
     $this->actions[] = $action;
     return $this;
   }

src/view/layout/PhabricatorWorkpanelView.php

@@ -41,12 +41,9 @@ final class PhabricatorWorkpanelView extends AphrontView {
           $footer_tag);
     }
 
-    $header = phutil_tag(
+    $header = id(new PhabricatorActionHeaderView())
-      'div',
+      ->setHeaderTitle($this->header)
-        array(
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY);
-          'class' => 'phabricator-workpanel-header'
-        ),
-      $this->header);
 
     $body = phutil_tag(
       'div',

webroot/rsrc/css/layout/phabricator-action-header-view.css

@@ -0,0 +1,58 @@
+/**
+ * @provides phabricator-action-header-view-css
+ */
+
+.phabricator-action-header {
+  padding: 0 5px 0 8px;
+  overflow: hidden;
+}
+
+.phabricator-action-header-title {
+  color: #333;
+  float: left;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 15px;
+  padding: 8px 0;
+  text-shadow: 0 1px 1px #fff;
+  white-space: nowrap;
+}
+
+.phabricator-action-header-icon-list {
+  float: right;
+  padding-top: 4px;
+}
+
+.phabricator-action-header-icon-item {
+  float: right;
+  padding-left: 2px;
+}
+
+.phabricator-action-header-icon-item .phabricator-tag-view {
+  margin: 4px 2px 0;
+}
+
+.phabricator-action-header-link {
+  color: #333;
+}
+
+.gradient-green-header .phabricator-action-header-title,
+.gradient-red-header .phabricator-action-header-title,
+.gradient-blue-header .phabricator-action-header-title,
+.gradient-yellow-header .phabricator-action-header-title,
+.gradient-green-header .phabricator-action-header-link,
+.gradient-red-header .phabricator-action-header-link,
+.gradient-blue-header .phabricator-action-header-link,
+.gradient-yellow-header .phabricator-action-header-link {
+  color: #fff;
+  text-shadow: 0 -1px 1px rgba(0,0,0,.5);
+}
+
+.phabricator-action-header-title span {
+  float: left;
+  height: 16px;
+  width: 16px;
+  margin-right: 4px;
+}
+
+

webroot/rsrc/css/layout/phabricator-action-icon-view.css

@@ -0,0 +1,15 @@
+/**
+ * @provides phabricator-action-icon-view-css
+ */
+
+.phabricator-action-icon-item-link.sprite-minicons {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.phabricator-action-icon-item-link.sprite-actions {
+  display: block;
+  height: 24px;
+  width: 24px;
+}

webroot/rsrc/css/layout/phabricator-workboard-view.css

@@ -48,14 +48,14 @@
   margin: 0px;
 }
 
-.phabricator-workboard-action-item-link {
+.phabricator-workboard-view .phabricator-action-icon-item-link {
   display: block;
   width: 50px;
   height: 50px;
   margin: 5px 4px 5px 5px;
 }
 
-.device-phone .phabricator-workboard-action-item-link {
+.device-phone .phabricator-workboard-view .phabricator-action-icon-item-link {
   margin-right: 0;
 }
 

webroot/rsrc/css/layout/phabricator-workpanel-view.css

@@ -2,16 +2,10 @@
  * @provides phabricator-workpanel-view-css
  */
 
-.phabricator-workpanel-view .phabricator-workpanel-header {
+.phabricator-workpanel-view .phabricator-action-header {
-  font-size: 14px;
-  font-weight: bold;
-  color: #333;
   border: 1px solid #b3b5b6;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
-  padding: 8px 10px;
-  background: #f0f0f0 url(/rsrc/image/texture/panel-header-gradient.png) repeat-x;
-  text-shadow: 0 1px 1px #fff;
 }
 
 .phabricator-workpanel-view .phabricator-workpanel-header-action {

webroot/rsrc/css/sprite-actions.css

@@ -1,127 +1,127 @@
 /**
- * @provides sprite-action-icon-css
+ * @provides sprite-actions-css
  * @generated
  */
 
-.sprite-action-icon {
+.sprite-actions {
-  background-image: url(/rsrc/image/sprite-action-icon.png);
+  background-image: url(/rsrc/image/sprite-actions.png);
   background-repeat: no-repeat;
 }
 
 @media
 only screen and (min-device-pixel-ratio: 1.5),
 only screen and (-webkit-min-device-pixel-ratio: 1.5) {
-  .sprite-action-icon {
+  .sprite-actions {
-    background-image: url(/rsrc/image/sprite-action-icon-X2.png);
+    background-image: url(/rsrc/image/sprite-actions-X2.png);
     background-size: 125px 150px;
   }
 }
 
 
-.action-icon-flag-dark {
+.actions-flag-dark, .device-desktop .actions-flag-grey.phabricator-action-icon-item-link:hover {
   background-position: 0px 0px;
 }
 
-.action-icon-heart-dark {
+.actions-heart-dark, .device-desktop .actions-heart-grey.phabricator-action-icon-item-link:hover {
   background-position: -25px 0px;
 }
 
-.action-icon-move-dark {
+.actions-move-dark, .device-desktop .actions-move-grey.phabricator-action-icon-item-link:hover {
   background-position: -50px 0px;
 }
 
-.action-icon-new-dark {
+.actions-new-dark, .device-desktop .actions-new-grey.phabricator-action-icon-item-link:hover {
   background-position: -75px 0px;
 }
 
-.action-icon-search-dark {
+.actions-search-dark, .device-desktop .actions-search-grey.phabricator-action-icon-item-link:hover {
   background-position: -100px 0px;
 }
 
-.action-icon-settings-dark {
+.actions-settings-dark, .device-desktop .actions-settings-grey.phabricator-action-icon-item-link:hover {
   background-position: 0px -25px;
 }
 
-.action-icon-star-dark {
+.actions-star-dark, .device-desktop .actions-star-grey.phabricator-action-icon-item-link:hover {
   background-position: -25px -25px;
 }
 
-.action-icon-tag-dark {
+.actions-tag-dark, .device-desktop .actions-tag-grey.phabricator-action-icon-item-link:hover {
   background-position: -50px -25px;
 }
 
-.action-icon-wrench-dark {
+.actions-wrench-dark, .device-desktop .actions-wrench-grey.phabricator-action-icon-item-link:hover {
   background-position: -75px -25px;
 }
 
-.action-icon-flag-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-flag {
+.actions-flag-grey {
   background-position: -100px -25px;
 }
 
-.action-icon-heart-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-heart {
+.actions-heart-grey {
   background-position: 0px -50px;
 }
 
-.action-icon-move-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-move {
+.actions-move-grey {
   background-position: -25px -50px;
 }
 
-.action-icon-new-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-new {
+.actions-new-grey {
   background-position: -50px -50px;
 }
 
-.action-icon-search-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-search {
+.actions-search-grey {
   background-position: -75px -50px;
 }
 
-.action-icon-settings-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-settings {
+.actions-settings-grey {
   background-position: -100px -50px;
 }
 
-.action-icon-star-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-star {
+.actions-star-grey {
   background-position: 0px -75px;
 }
 
-.action-icon-tag-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-tag {
+.actions-tag-grey {
   background-position: -25px -75px;
 }
 
-.action-icon-wrench-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-wrench {
+.actions-wrench-grey {
   background-position: -50px -75px;
 }
 
-.action-icon-flag-white {
+.actions-flag-white {
   background-position: -75px -75px;
 }
 
-.action-icon-heart-white {
+.actions-heart-white {
   background-position: -100px -75px;
 }
 
-.action-icon-move-white {
+.actions-move-white {
   background-position: 0px -100px;
 }
 
-.action-icon-new-white {
+.actions-new-white {
   background-position: -25px -100px;
 }
 
-.action-icon-search-white {
+.actions-search-white {
   background-position: -50px -100px;
 }
 
-.action-icon-settings-white {
+.actions-settings-white {
   background-position: -75px -100px;
 }
 
-.action-icon-star-white {
+.actions-star-white {
   background-position: -100px -100px;
 }
 
-.action-icon-tag-white {
+.actions-tag-white {
   background-position: 0px -125px;
 }
 
-.action-icon-wrench-white {
+.actions-wrench-white {
   background-position: -25px -125px;
 }

webroot/rsrc/css/sprite-minicons.css

@@ -13,7 +13,7 @@ only screen and (min-device-pixel-ratio: 1.5),
 only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   .sprite-minicons {
     background-image: url(/rsrc/image/sprite-minicons-X2.png);
-    background-size: 34px 34px;
+    background-size: 51px 51px;
   }
 }
 
@@ -27,9 +27,25 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 }
 
 .minicons-public-white {
-  background-position: 0px -17px;
+  background-position: -34px 0px;
 }
 
 .minicons-restricted-white {
+  background-position: 0px -17px;
+}
+
+.minicons-company-dark {
   background-position: -17px -17px;
 }
+
+.minicons-move-dark {
+  background-position: -34px -17px;
+}
+
+.minicons-public-dark {
+  background-position: 0px -34px;
+}
+
+.minicons-restricted-dark {
+  background-position: -17px -34px;
+}