mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-22 21:40:55 +01:00
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
This commit is contained in:
Chad Little
parent
875455ad64
commit
d61ac3468b
28 changed files with 755 additions and 188 deletions
|
|
@ -1,139 +1,139 @@
|
|||
{
|
||||
"version" : 1,
|
||||
"sprites" : {
|
||||
"action-icon-flag-dark" : {
|
||||
"name" : "action-icon-flag-dark",
|
||||
"rule" : ".action-icon-flag-dark",
|
||||
"actions-flag-dark" : {
|
||||
"name" : "actions-flag-dark",
|
||||
"rule" : ".actions-flag-dark, .device-desktop .actions-flag-grey.phabricator-action-icon-item-link:hover",
|
||||
"hash" : "4ae54fc28dd2d6cfa6e57dde7bd640cf"
|
||||
},
|
||||
"action-icon-flag-grey" : {
|
||||
"name" : "action-icon-flag-grey",
|
||||
"rule" : ".action-icon-flag-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-flag",
|
||||
"actions-flag-grey" : {
|
||||
"name" : "actions-flag-grey",
|
||||
"rule" : ".actions-flag-grey",
|
||||
"hash" : "50e739ca2d6a5527ce2bb8aafd4eb93f"
|
||||
},
|
||||
"action-icon-flag-white" : {
|
||||
"name" : "action-icon-flag-white",
|
||||
"rule" : ".action-icon-flag-white",
|
||||
"actions-flag-white" : {
|
||||
"name" : "actions-flag-white",
|
||||
"rule" : ".actions-flag-white",
|
||||
"hash" : "d29ba4e3f88d5b2f3b0ea14754f7b89a"
|
||||
},
|
||||
"action-icon-heart-dark" : {
|
||||
"name" : "action-icon-heart-dark",
|
||||
"rule" : ".action-icon-heart-dark",
|
||||
"actions-heart-dark" : {
|
||||
"name" : "actions-heart-dark",
|
||||
"rule" : ".actions-heart-dark, .device-desktop .actions-heart-grey.phabricator-action-icon-item-link:hover",
|
||||
"hash" : "90b437a281724a4961e33272eafd616b"
|
||||
},
|
||||
"action-icon-heart-grey" : {
|
||||
"name" : "action-icon-heart-grey",
|
||||
"rule" : ".action-icon-heart-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-heart",
|
||||
"actions-heart-grey" : {
|
||||
"name" : "actions-heart-grey",
|
||||
"rule" : ".actions-heart-grey",
|
||||
"hash" : "cd521a7267b321516223462860373f09"
|
||||
},
|
||||
"action-icon-heart-white" : {
|
||||
"name" : "action-icon-heart-white",
|
||||
"rule" : ".action-icon-heart-white",
|
||||
"actions-heart-white" : {
|
||||
"name" : "actions-heart-white",
|
||||
"rule" : ".actions-heart-white",
|
||||
"hash" : "505ebd7324f9c39fa2366a85996d1194"
|
||||
},
|
||||
"action-icon-move-dark" : {
|
||||
"name" : "action-icon-move-dark",
|
||||
"rule" : ".action-icon-move-dark",
|
||||
"actions-move-dark" : {
|
||||
"name" : "actions-move-dark",
|
||||
"rule" : ".actions-move-dark, .device-desktop .actions-move-grey.phabricator-action-icon-item-link:hover",
|
||||
"hash" : "38f5b9168bf04d1a904b09805e589cd7"
|
||||
},
|
||||
"action-icon-move-grey" : {
|
||||
"name" : "action-icon-move-grey",
|
||||
"rule" : ".action-icon-move-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-move",
|
||||
"actions-move-grey" : {
|
||||
"name" : "actions-move-grey",
|
||||
"rule" : ".actions-move-grey",
|
||||
"hash" : "35dcc45f04a81cbf9e5ecdf0fcd5bebc"
|
||||
},
|
||||
"action-icon-move-white" : {
|
||||
"name" : "action-icon-move-white",
|
||||
"rule" : ".action-icon-move-white",
|
||||
"actions-move-white" : {
|
||||
"name" : "actions-move-white",
|
||||
"rule" : ".actions-move-white",
|
||||
"hash" : "2b1b790a494a079d288d5a3a47c6bd62"
|
||||
},
|
||||
"action-icon-new-dark" : {
|
||||
"name" : "action-icon-new-dark",
|
||||
"rule" : ".action-icon-new-dark",
|
||||
"actions-new-dark" : {
|
||||
"name" : "actions-new-dark",
|
||||
"rule" : ".actions-new-dark, .device-desktop .actions-new-grey.phabricator-action-icon-item-link:hover",
|
||||
"hash" : "52c45b76d0dbd51e6eb65f0597d5098a"
|
||||
},
|
||||
"action-icon-new-grey" : {
|
||||
"name" : "action-icon-new-grey",
|
||||
"rule" : ".action-icon-new-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-new",
|
||||
"actions-new-grey" : {
|
||||
"name" : "actions-new-grey",
|
||||
"rule" : ".actions-new-grey",
|
||||
"hash" : "c51315bd83a20806625ca3a887f86215"
|
||||
},
|
||||
"action-icon-new-white" : {
|
||||
"name" : "action-icon-new-white",
|
||||
"rule" : ".action-icon-new-white",
|
||||
"actions-new-white" : {
|
||||
"name" : "actions-new-white",
|
||||
"rule" : ".actions-new-white",
|
||||
"hash" : "5a344c62e037d672516dae0e3a8dd589"
|
||||
},
|
||||
"action-icon-search-dark" : {
|
||||
"name" : "action-icon-search-dark",
|
||||
"rule" : ".action-icon-search-dark",
|
||||
"actions-search-dark" : {
|
||||
"name" : "actions-search-dark",
|
||||
"rule" : ".actions-search-dark, .device-desktop .actions-search-grey.phabricator-action-icon-item-link:hover",
|
||||
"hash" : "6ff124bc9423bf98be5a53e22508cd26"
|
||||
},
|
||||
"action-icon-search-grey" : {
|
||||
"name" : "action-icon-search-grey",
|
||||
"rule" : ".action-icon-search-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-search",
|
||||
"actions-search-grey" : {
|
||||
"name" : "actions-search-grey",
|
||||
"rule" : ".actions-search-grey",
|
||||
"hash" : "57b5c47c0676da7f97d3b2f7eefbbea4"
|
||||
},
|
||||
"action-icon-search-white" : {
|
||||
"name" : "action-icon-search-white",
|
||||
"rule" : ".action-icon-search-white",
|
||||
"actions-search-white" : {
|
||||
"name" : "actions-search-white",
|
||||
"rule" : ".actions-search-white",
|
||||
"hash" : "17f1bf9820b0c44f4641e0256840b138"
|
||||
},
|
||||
"action-icon-settings-dark" : {
|
||||
"name" : "action-icon-settings-dark",
|
||||
"rule" : ".action-icon-settings-dark",
|
||||
"actions-settings-dark" : {
|
||||
"name" : "actions-settings-dark",
|
||||
"rule" : ".actions-settings-dark, .device-desktop .actions-settings-grey.phabricator-action-icon-item-link:hover",
|
||||
"hash" : "5ecb08643250a052e5d090ef4660faf5"
|
||||
},
|
||||
"action-icon-settings-grey" : {
|
||||
"name" : "action-icon-settings-grey",
|
||||
"rule" : ".action-icon-settings-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-settings",
|
||||
"actions-settings-grey" : {
|
||||
"name" : "actions-settings-grey",
|
||||
"rule" : ".actions-settings-grey",
|
||||
"hash" : "5aeb35f1019c51a2f9140dc8765c9dca"
|
||||
},
|
||||
"action-icon-settings-white" : {
|
||||
"name" : "action-icon-settings-white",
|
||||
"rule" : ".action-icon-settings-white",
|
||||
"actions-settings-white" : {
|
||||
"name" : "actions-settings-white",
|
||||
"rule" : ".actions-settings-white",
|
||||
"hash" : "8cdd154946f1a8d8d307b72eddd5d755"
|
||||
},
|
||||
"action-icon-star-dark" : {
|
||||
"name" : "action-icon-star-dark",
|
||||
"rule" : ".action-icon-star-dark",
|
||||
"actions-star-dark" : {
|
||||
"name" : "actions-star-dark",
|
||||
"rule" : ".actions-star-dark, .device-desktop .actions-star-grey.phabricator-action-icon-item-link:hover",
|
||||
"hash" : "45567d03f8e34811eca0621e93b5e050"
|
||||
},
|
||||
"action-icon-star-grey" : {
|
||||
"name" : "action-icon-star-grey",
|
||||
"rule" : ".action-icon-star-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-star",
|
||||
"actions-star-grey" : {
|
||||
"name" : "actions-star-grey",
|
||||
"rule" : ".actions-star-grey",
|
||||
"hash" : "1c7909e987b64b26b728506695457770"
|
||||
},
|
||||
"action-icon-star-white" : {
|
||||
"name" : "action-icon-star-white",
|
||||
"rule" : ".action-icon-star-white",
|
||||
"actions-star-white" : {
|
||||
"name" : "actions-star-white",
|
||||
"rule" : ".actions-star-white",
|
||||
"hash" : "e7c949542a54a347879ceb96f42a3c02"
|
||||
},
|
||||
"action-icon-tag-dark" : {
|
||||
"name" : "action-icon-tag-dark",
|
||||
"rule" : ".action-icon-tag-dark",
|
||||
"actions-tag-dark" : {
|
||||
"name" : "actions-tag-dark",
|
||||
"rule" : ".actions-tag-dark, .device-desktop .actions-tag-grey.phabricator-action-icon-item-link:hover",
|
||||
"hash" : "24d97fa7524d0bf1bac17d9e07a63f48"
|
||||
},
|
||||
"action-icon-tag-grey" : {
|
||||
"name" : "action-icon-tag-grey",
|
||||
"rule" : ".action-icon-tag-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-tag",
|
||||
"actions-tag-grey" : {
|
||||
"name" : "actions-tag-grey",
|
||||
"rule" : ".actions-tag-grey",
|
||||
"hash" : "f04a5b38209c0f8e9ad2a3a964d5d505"
|
||||
},
|
||||
"action-icon-tag-white" : {
|
||||
"name" : "action-icon-tag-white",
|
||||
"rule" : ".action-icon-tag-white",
|
||||
"actions-tag-white" : {
|
||||
"name" : "actions-tag-white",
|
||||
"rule" : ".actions-tag-white",
|
||||
"hash" : "fdfc5d20f6a0d90b6d329159823d2cb0"
|
||||
},
|
||||
"action-icon-wrench-dark" : {
|
||||
"name" : "action-icon-wrench-dark",
|
||||
"rule" : ".action-icon-wrench-dark",
|
||||
"actions-wrench-dark" : {
|
||||
"name" : "actions-wrench-dark",
|
||||
"rule" : ".actions-wrench-dark, .device-desktop .actions-wrench-grey.phabricator-action-icon-item-link:hover",
|
||||
"hash" : "3a5cfa463c3c89194d3bbce3952a6e80"
|
||||
},
|
||||
"action-icon-wrench-grey" : {
|
||||
"name" : "action-icon-wrench-grey",
|
||||
"rule" : ".action-icon-wrench-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-wrench",
|
||||
"actions-wrench-grey" : {
|
||||
"name" : "actions-wrench-grey",
|
||||
"rule" : ".actions-wrench-grey",
|
||||
"hash" : "40d8a77d6272589c69f65e9b5e5587e1"
|
||||
},
|
||||
"action-icon-wrench-white" : {
|
||||
"name" : "action-icon-wrench-white",
|
||||
"rule" : ".action-icon-wrench-white",
|
||||
"actions-wrench-white" : {
|
||||
"name" : "actions-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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
BIN
resources/sprite/minicons_dark_1x/company.png
Normal file
BIN
resources/sprite/minicons_dark_1x/company.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
resources/sprite/minicons_dark_1x/move.png
Normal file
BIN
resources/sprite/minicons_dark_1x/move.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
resources/sprite/minicons_dark_1x/public.png
Normal file
BIN
resources/sprite/minicons_dark_1x/public.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
resources/sprite/minicons_dark_1x/restricted.png
Normal file
BIN
resources/sprite/minicons_dark_1x/restricted.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
resources/sprite/minicons_dark_2x/company.png
Normal file
BIN
resources/sprite/minicons_dark_2x/company.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
resources/sprite/minicons_dark_2x/move.png
Normal file
BIN
resources/sprite/minicons_dark_2x/move.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
resources/sprite/minicons_dark_2x/public.png
Normal file
BIN
resources/sprite/minicons_dark_2x/public.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
resources/sprite/minicons_dark_2x/restricted.png
Normal file
BIN
resources/sprite/minicons_dark_2x/restricted.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
|
|
@ -625,15 +625,15 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'/rsrc/image/sprite-minicons-X2.png' =>
|
||||
array(
|
||||
'hash' => '9b36608d0bfaa941816e42ceb6912aaf',
|
||||
'uri' => '/res/9b36608d/rsrc/image/sprite-minicons-X2.png',
|
||||
'hash' => 'c420c6462f7e50ca9941ccc5dd9e3dec',
|
||||
'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',
|
||||
'uri' => '/res/f4aa63b2/rsrc/image/sprite-minicons.png',
|
||||
'hash' => '168bb875933624b3080a1cc134e5b4ed',
|
||||
'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(
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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
|
||||
));
|
||||
}
|
||||
}
|
||||
|
|
@ -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'));
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
if ($color == 'grey') {
|
||||
$tcss[] = '.device-desktop .phabricator-action-icon-view:hover '.
|
||||
'.action-icon-'.$icon;
|
||||
$tcss[] = '.actions-'.$icon.$suffix;
|
||||
if ($color == 'dark') {
|
||||
$tcss[] = '.device-desktop '.
|
||||
'.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(
|
||||
|
|
|
|||
130
src/view/layout/PhabricatorActionHeaderView.php
Normal file
130
src/view/layout/PhabricatorActionHeaderView.php
Normal file
|
|
@ -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
|
||||
));
|
||||
}
|
||||
}
|
||||
72
src/view/layout/PhabricatorActionIconView.php
Normal file
72
src/view/layout/PhabricatorActionIconView.php
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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.');'
|
||||
),
|
||||
'');
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,12 +41,9 @@ final class PhabricatorWorkpanelView extends AphrontView {
|
|||
$footer_tag);
|
||||
}
|
||||
|
||||
$header = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'phabricator-workpanel-header'
|
||||
),
|
||||
$this->header);
|
||||
$header = id(new PhabricatorActionHeaderView())
|
||||
->setHeaderTitle($this->header)
|
||||
->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY);
|
||||
|
||||
$body = phutil_tag(
|
||||
'div',
|
||||
|
|
|
|||
58
webroot/rsrc/css/layout/phabricator-action-header-view.css
Normal file
58
webroot/rsrc/css/layout/phabricator-action-header-view.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
15
webroot/rsrc/css/layout/phabricator-action-icon-view.css
Normal file
15
webroot/rsrc/css/layout/phabricator-action-icon-view.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,16 +2,10 @@
|
|||
* @provides phabricator-workpanel-view-css
|
||||
*/
|
||||
|
||||
.phabricator-workpanel-view .phabricator-workpanel-header {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
.phabricator-workpanel-view .phabricator-action-header {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -1,127 +1,127 @@
|
|||
/**
|
||||
* @provides sprite-action-icon-css
|
||||
* @provides sprite-actions-css
|
||||
* @generated
|
||||
*/
|
||||
|
||||
.sprite-action-icon {
|
||||
background-image: url(/rsrc/image/sprite-action-icon.png);
|
||||
.sprite-actions {
|
||||
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 {
|
||||
background-image: url(/rsrc/image/sprite-action-icon-X2.png);
|
||||
.sprite-actions {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 965 B After Width: | Height: | Size: 1.8 KiB |
Loading…
Reference in a new issue