1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-18 12:52:42 +01:00

Make timeline view prettier

Summary: Aligns the timeline view more closely with the `diff_full_view.png` mock.

Test Plan:
Desktop:

{F26822}

Mobile:

{F26823}

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Maniphest Tasks: T2104

Differential Revision: https://secure.phabricator.com/D4137
This commit is contained in:
epriestley 2012-12-11 13:59:35 -08:00
parent 7b6fa0db12
commit 1761abcbfc
9 changed files with 327 additions and 184 deletions

View file

@ -13,7 +13,7 @@
},
"action-arrow_left-white" : {
"name" : "action-arrow_left-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-arrow_left",
"rule" : ".action-arrow_left-white, .device-desktop .phabricator-action-view:hover .action-arrow_left",
"hash" : "23e5824a1e58e858d7fff622e10c9670"
},
"action-arrow_right" : {
@ -28,7 +28,7 @@
},
"action-arrow_right-white" : {
"name" : "action-arrow_right-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-arrow_right",
"rule" : ".action-arrow_right-white, .device-desktop .phabricator-action-view:hover .action-arrow_right",
"hash" : "c36b010025e1550fda9dff1d4b677076"
},
"action-attach" : {
@ -43,7 +43,7 @@
},
"action-attach-white" : {
"name" : "action-attach-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-attach",
"rule" : ".action-attach-white, .device-desktop .phabricator-action-view:hover .action-attach",
"hash" : "8f95a2a247a1b2f79c55b76bc62caedb"
},
"action-blame" : {
@ -58,7 +58,7 @@
},
"action-blame-white" : {
"name" : "action-blame-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-blame",
"rule" : ".action-blame-white, .device-desktop .phabricator-action-view:hover .action-blame",
"hash" : "f2d2a1a06236432903297bf58cf00138"
},
"action-check" : {
@ -73,7 +73,7 @@
},
"action-check-white" : {
"name" : "action-check-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-check",
"rule" : ".action-check-white, .device-desktop .phabricator-action-view:hover .action-check",
"hash" : "6328b4abc8f44954e637c3382e859536"
},
"action-comment" : {
@ -88,7 +88,7 @@
},
"action-comment-white" : {
"name" : "action-comment-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-comment",
"rule" : ".action-comment-white, .device-desktop .phabricator-action-view:hover .action-comment",
"hash" : "370761544111cf3d6a8878927baa9199"
},
"action-computer" : {
@ -103,7 +103,7 @@
},
"action-computer-white" : {
"name" : "action-computer-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-computer",
"rule" : ".action-computer-white, .device-desktop .phabricator-action-view:hover .action-computer",
"hash" : "82cef35cbea64a3ee60a9b71f2a1c583"
},
"action-create" : {
@ -118,7 +118,7 @@
},
"action-create-white" : {
"name" : "action-create-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-create",
"rule" : ".action-create-white, .device-desktop .phabricator-action-view:hover .action-create",
"hash" : "126f91b6c84a5f6d5b60b347b690d12c"
},
"action-delete" : {
@ -133,7 +133,7 @@
},
"action-delete-white" : {
"name" : "action-delete-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-delete",
"rule" : ".action-delete-white, .device-desktop .phabricator-action-view:hover .action-delete",
"hash" : "e773f5117a9a29f3fa338e7ef8dc1780"
},
"action-disable" : {
@ -148,7 +148,7 @@
},
"action-disable-white" : {
"name" : "action-disable-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-disable",
"rule" : ".action-disable-white, .device-desktop .phabricator-action-view:hover .action-disable",
"hash" : "eae52c680ce1bc0b529a76a200cc52df"
},
"action-dislike" : {
@ -163,7 +163,7 @@
},
"action-dislike-white" : {
"name" : "action-dislike-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-dislike",
"rule" : ".action-dislike-white, .device-desktop .phabricator-action-view:hover .action-dislike",
"hash" : "045543b094cdcd888d64860869cc6e5b"
},
"action-download" : {
@ -178,7 +178,7 @@
},
"action-download-white" : {
"name" : "action-download-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-download",
"rule" : ".action-download-white, .device-desktop .phabricator-action-view:hover .action-download",
"hash" : "cc5c770af0fd5a1097c743c99fd27985"
},
"action-edit" : {
@ -193,7 +193,7 @@
},
"action-edit-white" : {
"name" : "action-edit-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-edit",
"rule" : ".action-edit-white, .device-desktop .phabricator-action-view:hover .action-edit",
"hash" : "8c1e028cdcffd4b5f2b2b1ffbefd94aa"
},
"action-enable" : {
@ -208,7 +208,7 @@
},
"action-enable-white" : {
"name" : "action-enable-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-enable",
"rule" : ".action-enable-white, .device-desktop .phabricator-action-view:hover .action-enable",
"hash" : "455194cf17fcced25cbc0156951180fd"
},
"action-file" : {
@ -223,7 +223,7 @@
},
"action-file-white" : {
"name" : "action-file-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-file",
"rule" : ".action-file-white, .device-desktop .phabricator-action-view:hover .action-file",
"hash" : "fc348080a6fa3d845f8da0dba1f0accf"
},
"action-flag" : {
@ -243,7 +243,7 @@
},
"action-flag-0-white" : {
"name" : "action-flag-0-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-flag-0",
"rule" : ".action-flag-0-white, .device-desktop .phabricator-action-view:hover .action-flag-0",
"hash" : "44e72a52052200846fcf3d7dd13d1247"
},
"action-flag-1" : {
@ -258,7 +258,7 @@
},
"action-flag-1-white" : {
"name" : "action-flag-1-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-flag-1",
"rule" : ".action-flag-1-white, .device-desktop .phabricator-action-view:hover .action-flag-1",
"hash" : "83e63386c1b5fe0a2580c57dcd3d5bc8"
},
"action-flag-2" : {
@ -273,7 +273,7 @@
},
"action-flag-2-white" : {
"name" : "action-flag-2-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-flag-2",
"rule" : ".action-flag-2-white, .device-desktop .phabricator-action-view:hover .action-flag-2",
"hash" : "86e4cdc53d9101f144455114ec01856b"
},
"action-flag-3" : {
@ -288,7 +288,7 @@
},
"action-flag-3-white" : {
"name" : "action-flag-3-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-flag-3",
"rule" : ".action-flag-3-white, .device-desktop .phabricator-action-view:hover .action-flag-3",
"hash" : "de92148b46fa30ed3e5cfdc63c941213"
},
"action-flag-4" : {
@ -303,7 +303,7 @@
},
"action-flag-4-white" : {
"name" : "action-flag-4-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-flag-4",
"rule" : ".action-flag-4-white, .device-desktop .phabricator-action-view:hover .action-flag-4",
"hash" : "832420753c9481e7fc0de1b16d465951"
},
"action-flag-5" : {
@ -318,7 +318,7 @@
},
"action-flag-5-white" : {
"name" : "action-flag-5-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-flag-5",
"rule" : ".action-flag-5-white, .device-desktop .phabricator-action-view:hover .action-flag-5",
"hash" : "d80426ed6dad58d6b557adc3b08a35c2"
},
"action-flag-6" : {
@ -333,7 +333,7 @@
},
"action-flag-6-white" : {
"name" : "action-flag-6-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-flag-6",
"rule" : ".action-flag-6-white, .device-desktop .phabricator-action-view:hover .action-flag-6",
"hash" : "40bf7e2b36e70d02fab3cdf7e7eece36"
},
"action-flag-7" : {
@ -348,7 +348,7 @@
},
"action-flag-7-white" : {
"name" : "action-flag-7-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-flag-7",
"rule" : ".action-flag-7-white, .device-desktop .phabricator-action-view:hover .action-flag-7",
"hash" : "5972a5f1e3ecff9146727ebfb43c5956"
},
"action-flag-ghost" : {
@ -363,7 +363,7 @@
},
"action-flag-ghost-white" : {
"name" : "action-flag-ghost-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-flag-ghost",
"rule" : ".action-flag-ghost-white, .device-desktop .phabricator-action-view:hover .action-flag-ghost",
"hash" : "ff05197e8a66b1fb1037c93f3c52d866"
},
"action-flag-grey" : {
@ -373,7 +373,7 @@
},
"action-flag-white" : {
"name" : "action-flag-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-flag",
"rule" : ".action-flag-white, .device-desktop .phabricator-action-view:hover .action-flag",
"hash" : "bb03676086c8af46377bb61593af0baa"
},
"action-folder-open" : {
@ -388,7 +388,7 @@
},
"action-folder-open-white" : {
"name" : "action-folder-open-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-folder-open",
"rule" : ".action-folder-open-white, .device-desktop .phabricator-action-view:hover .action-folder-open",
"hash" : "5ccf5cfa0f446a522e55f64fe3ceed76"
},
"action-fork" : {
@ -403,7 +403,7 @@
},
"action-fork-white" : {
"name" : "action-fork-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-fork",
"rule" : ".action-fork-white, .device-desktop .phabricator-action-view:hover .action-fork",
"hash" : "68f97284072a6ff630261af74629c884"
},
"action-herald" : {
@ -418,7 +418,7 @@
},
"action-herald-white" : {
"name" : "action-herald-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-herald",
"rule" : ".action-herald-white, .device-desktop .phabricator-action-view:hover .action-herald",
"hash" : "a30bd0191721e4ab028338c4c7ebdfa8"
},
"action-highlight" : {
@ -433,7 +433,7 @@
},
"action-highlight-white" : {
"name" : "action-highlight-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-highlight",
"rule" : ".action-highlight-white, .device-desktop .phabricator-action-view:hover .action-highlight",
"hash" : "27e28bec94c1652eef5c556f23aa1dd6"
},
"action-history" : {
@ -448,7 +448,7 @@
},
"action-history-white" : {
"name" : "action-history-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-history",
"rule" : ".action-history-white, .device-desktop .phabricator-action-view:hover .action-history",
"hash" : "2c57ad5babe37b8335e88c5464c5529c"
},
"action-image" : {
@ -463,7 +463,7 @@
},
"action-image-white" : {
"name" : "action-image-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-image",
"rule" : ".action-image-white, .device-desktop .phabricator-action-view:hover .action-image",
"hash" : "66ee76f5242792c0c274980df9bd9d58"
},
"action-like" : {
@ -478,7 +478,7 @@
},
"action-like-white" : {
"name" : "action-like-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-like",
"rule" : ".action-like-white, .device-desktop .phabricator-action-view:hover .action-like",
"hash" : "bd1a5fad4c83353e476378fc1d99c6e1"
},
"action-link" : {
@ -493,7 +493,7 @@
},
"action-link-white" : {
"name" : "action-link-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-link",
"rule" : ".action-link-white, .device-desktop .phabricator-action-view:hover .action-link",
"hash" : "157c08f843f6f30cf3561349f8e4ddbd"
},
"action-lint-info" : {
@ -508,7 +508,7 @@
},
"action-lint-info-white" : {
"name" : "action-lint-info-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-lint-info",
"rule" : ".action-lint-info-white, .device-desktop .phabricator-action-view:hover .action-lint-info",
"hash" : "cf5a05749979f6701d4b3de53acca500"
},
"action-lint-ok" : {
@ -523,7 +523,7 @@
},
"action-lint-ok-white" : {
"name" : "action-lint-ok-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-lint-ok",
"rule" : ".action-lint-ok-white, .device-desktop .phabricator-action-view:hover .action-lint-ok",
"hash" : "faaa9e076d5012af17a73f9f09b6ede8"
},
"action-lint-warning" : {
@ -538,7 +538,7 @@
},
"action-lint-warning-white" : {
"name" : "action-lint-warning-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-lint-warning",
"rule" : ".action-lint-warning-white, .device-desktop .phabricator-action-view:hover .action-lint-warning",
"hash" : "4a13ffad1125caf3656a276e4c40c907"
},
"action-lock" : {
@ -553,7 +553,7 @@
},
"action-lock-white" : {
"name" : "action-lock-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-lock",
"rule" : ".action-lock-white, .device-desktop .phabricator-action-view:hover .action-lock",
"hash" : "1cd87a6ffac7f03535faa6109e69dcfa"
},
"action-love" : {
@ -568,7 +568,7 @@
},
"action-love-white" : {
"name" : "action-love-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-love",
"rule" : ".action-love-white, .device-desktop .phabricator-action-view:hover .action-love",
"hash" : "3fe85e0ad08e6f0151765ab5ce5624b0"
},
"action-merge" : {
@ -583,7 +583,7 @@
},
"action-merge-white" : {
"name" : "action-merge-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-merge",
"rule" : ".action-merge-white, .device-desktop .phabricator-action-view:hover .action-merge",
"hash" : "334f751f7a9531af3e383bce06a0a2ff"
},
"action-message" : {
@ -598,7 +598,7 @@
},
"action-message-white" : {
"name" : "action-message-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-message",
"rule" : ".action-message-white, .device-desktop .phabricator-action-view:hover .action-message",
"hash" : "d7ad1f04ffcd3e96cee0d81af509e77c"
},
"action-meta-mta" : {
@ -613,7 +613,7 @@
},
"action-meta-mta-white" : {
"name" : "action-meta-mta-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-meta-mta",
"rule" : ".action-meta-mta-white, .device-desktop .phabricator-action-view:hover .action-meta-mta",
"hash" : "0455c2a3f7111e88daec4ddd68c9528a"
},
"action-move" : {
@ -628,7 +628,7 @@
},
"action-move-white" : {
"name" : "action-move-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-move",
"rule" : ".action-move-white, .device-desktop .phabricator-action-view:hover .action-move",
"hash" : "eb654087894d3bc7229d17b221eafcf0"
},
"action-new" : {
@ -643,7 +643,7 @@
},
"action-new-white" : {
"name" : "action-new-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-new",
"rule" : ".action-new-white, .device-desktop .phabricator-action-view:hover .action-new",
"hash" : "21b047ec502a24eabe1f57fda5cd2fc1"
},
"action-perflab" : {
@ -658,7 +658,7 @@
},
"action-perflab-white" : {
"name" : "action-perflab-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-perflab",
"rule" : ".action-perflab-white, .device-desktop .phabricator-action-view:hover .action-perflab",
"hash" : "e00e31057d557047300da57a5d07837e"
},
"action-preview" : {
@ -673,7 +673,7 @@
},
"action-preview-white" : {
"name" : "action-preview-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-preview",
"rule" : ".action-preview-white, .device-desktop .phabricator-action-view:hover .action-preview",
"hash" : "c62768ba193052c527ce7d499fd9f662"
},
"action-refresh" : {
@ -688,7 +688,7 @@
},
"action-refresh-white" : {
"name" : "action-refresh-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-refresh",
"rule" : ".action-refresh-white, .device-desktop .phabricator-action-view:hover .action-refresh",
"hash" : "7800f18fbd6dde59e2ae91d695002318"
},
"action-remove" : {
@ -703,7 +703,7 @@
},
"action-remove-white" : {
"name" : "action-remove-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-remove",
"rule" : ".action-remove-white, .device-desktop .phabricator-action-view:hover .action-remove",
"hash" : "24542d8d3890c8e89b7d60d0efd99e9c"
},
"action-search" : {
@ -718,7 +718,7 @@
},
"action-search-white" : {
"name" : "action-search-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-search",
"rule" : ".action-search-white, .device-desktop .phabricator-action-view:hover .action-search",
"hash" : "1c1a7b4ac122c6ffa56edda3c7ce35b0"
},
"action-start-sandcastle" : {
@ -733,7 +733,7 @@
},
"action-start-sandcastle-white" : {
"name" : "action-start-sandcastle-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-start-sandcastle",
"rule" : ".action-start-sandcastle-white, .device-desktop .phabricator-action-view:hover .action-start-sandcastle",
"hash" : "b99feb063a1e56833419119f426455f0"
},
"action-subscribe-add" : {
@ -748,7 +748,7 @@
},
"action-subscribe-add-white" : {
"name" : "action-subscribe-add-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-subscribe-add",
"rule" : ".action-subscribe-add-white, .device-desktop .phabricator-action-view:hover .action-subscribe-add",
"hash" : "1173fbd24131329e2e0c81893c1bd412"
},
"action-subscribe-auto" : {
@ -763,7 +763,7 @@
},
"action-subscribe-auto-white" : {
"name" : "action-subscribe-auto-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-subscribe-auto",
"rule" : ".action-subscribe-auto-white, .device-desktop .phabricator-action-view:hover .action-subscribe-auto",
"hash" : "8525c0d691c327ddb0500cc27bfa9822"
},
"action-subscribe-delete" : {
@ -778,7 +778,7 @@
},
"action-subscribe-delete-white" : {
"name" : "action-subscribe-delete-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-subscribe-delete",
"rule" : ".action-subscribe-delete-white, .device-desktop .phabricator-action-view:hover .action-subscribe-delete",
"hash" : "e9d5f98355e04b3404706581f6597569"
},
"action-tag" : {
@ -793,7 +793,7 @@
},
"action-tag-white" : {
"name" : "action-tag-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-tag",
"rule" : ".action-tag-white, .device-desktop .phabricator-action-view:hover .action-tag",
"hash" : "aed3d83123f33e69ae4b7338b23f7c9c"
},
"action-transcript" : {
@ -808,7 +808,7 @@
},
"action-transcript-white" : {
"name" : "action-transcript-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-transcript",
"rule" : ".action-transcript-white, .device-desktop .phabricator-action-view:hover .action-transcript",
"hash" : "e56f623fdf8f059bb80c24944dec6af6"
},
"action-undo" : {
@ -823,7 +823,7 @@
},
"action-undo-white" : {
"name" : "action-undo-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-undo",
"rule" : ".action-undo-white, .device-desktop .phabricator-action-view:hover .action-undo",
"hash" : "97bd8f43a4db2a97d53975ce42a6232d"
},
"action-unlock" : {
@ -838,7 +838,7 @@
},
"action-unlock-white" : {
"name" : "action-unlock-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-unlock",
"rule" : ".action-unlock-white, .device-desktop .phabricator-action-view:hover .action-unlock",
"hash" : "ceb342bc0a17310cf58c90fd3bb53ce1"
},
"action-unmerge" : {
@ -853,7 +853,7 @@
},
"action-unmerge-white" : {
"name" : "action-unmerge-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-unmerge",
"rule" : ".action-unmerge-white, .device-desktop .phabricator-action-view:hover .action-unmerge",
"hash" : "574e4176d9c2243050958182e487f239"
},
"action-unpublish" : {
@ -868,7 +868,7 @@
},
"action-unpublish-white" : {
"name" : "action-unpublish-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-unpublish",
"rule" : ".action-unpublish-white, .device-desktop .phabricator-action-view:hover .action-unpublish",
"hash" : "a37305e8ea29bc41d83d6b5a11aebe9f"
},
"action-warning" : {
@ -883,7 +883,7 @@
},
"action-warning-white" : {
"name" : "action-warning-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-warning",
"rule" : ".action-warning-white, .device-desktop .phabricator-action-view:hover .action-warning",
"hash" : "c30c2e287bab73ca454712de6cbe2502"
},
"action-world" : {
@ -898,7 +898,7 @@
},
"action-world-white" : {
"name" : "action-world-white",
"rule" : ".device-desktop .phabricator-action-view:hover .action-world",
"rule" : ".action-world-white, .device-desktop .phabricator-action-view:hover .action-world",
"hash" : "401df878395c514a443720a8acd1ab63"
},
"remarkup-assist-text_b" : {

View file

@ -201,11 +201,11 @@ final class PholioMockViewController extends PholioController {
continue;
}
$title = $xaction->getTitle();
$event = id(new PhabricatorTimelineEventView())
->setUserHandle($xaction->getHandle($xaction->getAuthorPHID()))
->setTitle($title);
->setIcon($xaction->getIcon())
->setColor($xaction->getColor())
->setTitle($xaction->getTitle());
if ($xaction->getComment()) {
$event->appendChild(

View file

@ -7,4 +7,15 @@ final class PhabricatorTransactions {
const TYPE_VIEW_POLICY = 'core:view-policy';
const TYPE_EDIT_POLICY = 'core:edit-policy';
const COLOR_RED = 'red';
const COLOR_ORANGE = 'orange';
const COLOR_YELLOW = 'yellow';
const COLOR_GREEN = 'green';
const COLOR_SKY = 'sky';
const COLOR_BLUE = 'blue';
const COLOR_INDIGO = 'indigo';
const COLOR_VIOLET = 'violet';
const COLOR_GREY = 'grey';
const COLOR_BLACK = 'black';
}

View file

@ -119,6 +119,14 @@ abstract class PhabricatorApplicationTransaction
return implode(', ', $links);
}
public function getIcon() {
return null;
}
public function getColor() {
return null;
}
public function shouldHide() {
switch ($this->getTransactionType()) {
case PhabricatorTransactions::TYPE_VIEW_POLICY:

View file

@ -43,13 +43,14 @@ final class PhabricatorTimelineExample extends PhabricatorUIExample {
$events[] = id(new PhabricatorTimelineEventView())
->setUserHandle($handle)
->setTitle('Major Red Event')
->setIcon('love')
->appendChild('This event is red!')
->addClass('phabricator-timeline-red');
->setColor(PhabricatorTransactions::COLOR_RED);
$events[] = id(new PhabricatorTimelineEventView())
->setUserHandle($handle)
->setTitle('Minor Red Event')
->addClass('phabricator-timeline-red');
->setColor(PhabricatorTransactions::COLOR_RED);
$events[] = id(new PhabricatorTimelineEventView())
->setUserHandle($handle)
@ -58,24 +59,43 @@ final class PhabricatorTimelineExample extends PhabricatorUIExample {
$events[] = id(new PhabricatorTimelineEventView())
->setUserHandle($handle)
->setTitle('Minor Red Event')
->addClass('phabricator-timeline-red');
->setColor(PhabricatorTransactions::COLOR_RED);
$events[] = id(new PhabricatorTimelineEventView())
->setUserHandle($handle)
->setTitle('Minor Not-Red Event');
$events[] = id(new PhabricatorTimelineEventView())
->setUserHandle($handle)
->setTitle('Unstyled event')
->appendChild('This event disables standard title and content styling.')
->setDisableStandardTitleStyle(true)
->setDisableStandardContentStyle(true);
$events[] = id(new PhabricatorTimelineEventView())
->setUserHandle($handle)
->setTitle('Major Green Event')
->appendChild('This event is green!')
->addClass('phabricator-timeline-green');
->setColor(PhabricatorTransactions::COLOR_GREEN);
$colors = array(
PhabricatorTransactions::COLOR_RED,
PhabricatorTransactions::COLOR_ORANGE,
PhabricatorTransactions::COLOR_YELLOW,
PhabricatorTransactions::COLOR_GREEN,
PhabricatorTransactions::COLOR_SKY,
PhabricatorTransactions::COLOR_BLUE,
PhabricatorTransactions::COLOR_INDIGO,
PhabricatorTransactions::COLOR_VIOLET,
PhabricatorTransactions::COLOR_GREY,
PhabricatorTransactions::COLOR_BLACK,
);
$events[] = id(new PhabricatorTimelineEventView())
->setUserHandle($handle)
->setTitle(phutil_escape_html("Colorless"))
->setIcon('lock');
foreach ($colors as $color) {
$events[] = id(new PhabricatorTimelineEventView())
->setUserHandle($handle)
->setTitle(phutil_escape_html("Color '{$color}'"))
->setIcon('lock')
->setColor($color);
}
$timeline = id(new PhabricatorTimelineView());
foreach ($events as $event) {

View file

@ -37,6 +37,7 @@ final class CeleritySpriteGenerator {
if ($color == 'white') {
$sprite->setTargetCSS(
'.action-'.$icon.$suffix.', '.
'.device-desktop .phabricator-action-view:hover .action-'.$icon);
} else {
$sprite->setTargetCSS('.action-'.$icon.$suffix);

View file

@ -4,9 +4,9 @@ final class PhabricatorTimelineEventView extends AphrontView {
private $userHandle;
private $title;
private $icon;
private $color;
private $classes = array();
private $disableStandardTitleStyle;
private $disableStandardContentStyle;
public function setUserHandle(PhabricatorObjectHandle $handle) {
$this->userHandle = $handle;
@ -23,13 +23,13 @@ final class PhabricatorTimelineEventView extends AphrontView {
return $this;
}
public function setDisableStandardTitleStyle($disable) {
$this->disableStandardTitleStyle = $disable;
public function setIcon($icon) {
$this->icon = $icon;
return $this;
}
public function setDisableStandardContentStyle($disable) {
$this->disableStandardContentStyle = $disable;
public function setColor($color) {
$this->color = $color;
return $this;
}
@ -44,8 +44,23 @@ final class PhabricatorTimelineEventView extends AphrontView {
if ($title !== null) {
$title_classes = array();
$title_classes[] = 'phabricator-timeline-title';
if (!$this->disableStandardTitleStyle) {
$title_classes[] = 'phabricator-timeline-standard-title';
$icon = null;
if ($this->icon) {
$title_classes[] = 'phabricator-timeline-title-with-icon';
$icon = phutil_render_tag(
'span',
array(
'class' => 'phabricator-timeline-icon-fill',
),
phutil_render_tag(
'span',
array(
'class' => 'phabricator-timeline-icon sprite-icon '.
'action-'.$this->icon.'-white',
),
''));
}
$title = phutil_render_tag(
@ -53,7 +68,7 @@ final class PhabricatorTimelineEventView extends AphrontView {
array(
'class' => implode(' ', $title_classes),
),
$title);
$icon.$title);
}
$wedge = phutil_render_tag(
@ -74,9 +89,6 @@ final class PhabricatorTimelineEventView extends AphrontView {
$content_classes = array();
$content_classes[] = 'phabricator-timeline-content';
if (!$this->disableStandardContentStyle) {
$content_classes[] = 'phabricator-timeline-standard-content';
}
$classes = array();
$classes[] = 'phabricator-timeline-event-view';
@ -111,10 +123,15 @@ final class PhabricatorTimelineEventView extends AphrontView {
$image.$wedge.$title);
}
$outer_classes = $this->classes;
if ($this->color) {
$outer_classes[] = 'phabricator-timeline-'.$this->color;
}
return phutil_render_tag(
'div',
array(
'class' => implode(' ', $this->classes),
'class' => implode(' ', $outer_classes),
),
phutil_render_tag(
'div',

View file

@ -5,7 +5,7 @@
.phabricator-timeline-event-view {
border-width: 0 0 0 3px;
border-style: solid;
border-color: #eaeaea;
border-color: #c0c5d1;
}
.device-desktop .phabricator-timeline-event-view {
@ -19,12 +19,13 @@
border-right-width: 0;
}
.device-desktop .phabricator-timeline-major-event {
.device-desktop .phabricator-timeline-major-event,
.device-desktop .phabricator-timeline-minor-event {
border-right-width: 3px;
}
.device-desktop .phabricator-timeline-wedge {
border-bottom: 3px solid #eaeaea;
border-bottom: 3px solid #c0c5d1;
position: absolute;
width: 10px;
}
@ -34,35 +35,36 @@
min-height: 70px;
}
.phabricator-timeline-major-event .phabricator-timeline-content {
.phabricator-timeline-content {
border-style: solid;
border-color: #eaeaea;
border-color: #c0c5d1;
border-width: 1px 0;
}
.device-desktop .phabricator-timeline-minor-event
.phabricator-timeline-content {
margin-left: 35px;
padding: 5px 0;
min-height: 25px;
min-height: 23px;
}
.device-desktop .phabricator-timeline-title {
line-height: 25px;
.phabricator-timeline-title {
line-height: 23px;
min-height: 23px;
position: relative;
}
.device-desktop .phabricator-timeline-major-event .phabricator-timeline-wedge {
.device-desktop .phabricator-timeline-wedge {
left: -10px;
}
.device-desktop .phabricator-timeline-major-event .phabricator-timeline-wedge {
top: 34px;
}
.device-desktop .phabricator-timeline-minor-event .phabricator-timeline-wedge {
left: 0px;
top: 17px;
top: 12px;
}
.phabricator-timeline-image {
background: #eaeaea;
background: #c0c5d1;
background-repeat: no-repeat;
position: absolute;
}
@ -78,35 +80,28 @@
width: 25px;
height: 25px;
background-size: 25px auto;
top: 5px;
left: 10px;
left: -35px;
}
.device-desktop .phabricator-timeline-major-event
.phabricator-timeline-standard-title {
.phabricator-timeline-major-event .phabricator-timeline-title {
background: #f7f7f7;
}
.device-desktop .phabricator-timeline-standard-title {
.phabricator-timeline-title {
padding: 0 5px;
}
.phabricator-timeline-major-event .phabricator-timeline-standard-content
.phabricator-timeline-title-with-icon {
padding-left: 28px;
}
.phabricator-timeline-major-event .phabricator-timeline-content
.phabricator-timeline-core-content {
padding: 5px;
}
.phabricator-timeline-red .phabricator-timeline-border {
border-color: #dd0000;
}
.phabricator-timeline-green .phabricator-timeline-border {
border-color: #009966;
}
.device .phabricator-timeline-event-view {
min-height: 25px;
min-height: 23px;
position: relative;
margin-left: 3px;
margin-right: 3px;
@ -119,14 +114,105 @@
display: none;
}
.device .phabricator-timeline-title {
line-height: 25px;
min-height: 25px;
background: #f7f7f7;
padding: 0 5px;
}
.device .phabricator-timeline-spacer {
min-height: 8px;
border-width: 0;
}
.phabricator-timeline-icon-fill {
position: absolute;
width: 25px;
height: 25px;
background-color: #c0c5d1;
top: -1px;
left: -3px;
}
.phabricator-timeline-icon {
position: absolute;
left: 6px;
top: 5px;
height: 14px;
width: 14px;
}
.phabricator-timeline-red .phabricator-timeline-border {
border-color: #cc0000;
}
.phabricator-timeline-orange .phabricator-timeline-border {
border-color: #cc7300;
}
.phabricator-timeline-yellow .phabricator-timeline-border {
border-color: #ccc000;
}
.phabricator-timeline-green .phabricator-timeline-border {
border-color: #009b2d;
}
.phabricator-timeline-sky .phabricator-timeline-border {
border-color: #6498cf;
}
.phabricator-timeline-blue .phabricator-timeline-border {
border-color: #00659a;
}
.phabricator-timeline-indigo .phabricator-timeline-border {
border-color: #3a00cc;
}
.phabricator-timeline-violet .phabricator-timeline-border {
border-color: #67009b;
}
.phabricator-timeline-grey .phabricator-timeline-border {
border-color: #999999;
}
.phabricator-timeline-black .phabricator-timeline-border {
border-color: #333333;
}
.phabricator-timeline-red .phabricator-timeline-icon-fill {
background-color: #cc0000;
}
.phabricator-timeline-orange .phabricator-timeline-icon-fill {
background-color: #cc7300;
}
.phabricator-timeline-yellow .phabricator-timeline-icon-fill {
background-color: #ccc000;
}
.phabricator-timeline-green .phabricator-timeline-icon-fill {
background-color: #009b2d;
}
.phabricator-timeline-sky .phabricator-timeline-icon-fill {
background-color: #6498cf;
}
.phabricator-timeline-blue .phabricator-timeline-icon-fill {
background-color: #00659a;
}
.phabricator-timeline-indigo .phabricator-timeline-icon-fill {
background-color: #3a00cc;
}
.phabricator-timeline-violet .phabricator-timeline-icon-fill {
background-color: #67009b;
}
.phabricator-timeline-grey .phabricator-timeline-icon-fill {
background-color: #999999;
}
.phabricator-timeline-black .phabricator-timeline-icon-fill {
background-color: #333333;
}

View file

@ -498,243 +498,243 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
background-position: -105px -120px;
}
.device-desktop .phabricator-action-view:hover .action-arrow_left {
.action-arrow_left-white, .device-desktop .phabricator-action-view:hover .action-arrow_left {
background-position: -120px -120px;
}
.device-desktop .phabricator-action-view:hover .action-arrow_right {
.action-arrow_right-white, .device-desktop .phabricator-action-view:hover .action-arrow_right {
background-position: -135px -120px;
}
.device-desktop .phabricator-action-view:hover .action-attach {
.action-attach-white, .device-desktop .phabricator-action-view:hover .action-attach {
background-position: -150px -120px;
}
.device-desktop .phabricator-action-view:hover .action-blame {
.action-blame-white, .device-desktop .phabricator-action-view:hover .action-blame {
background-position: -165px -120px;
}
.device-desktop .phabricator-action-view:hover .action-check {
.action-check-white, .device-desktop .phabricator-action-view:hover .action-check {
background-position: -180px -120px;
}
.device-desktop .phabricator-action-view:hover .action-comment {
.action-comment-white, .device-desktop .phabricator-action-view:hover .action-comment {
background-position: -195px -120px;
}
.device-desktop .phabricator-action-view:hover .action-computer {
.action-computer-white, .device-desktop .phabricator-action-view:hover .action-computer {
background-position: 0px -135px;
}
.device-desktop .phabricator-action-view:hover .action-create {
.action-create-white, .device-desktop .phabricator-action-view:hover .action-create {
background-position: -15px -135px;
}
.device-desktop .phabricator-action-view:hover .action-delete {
.action-delete-white, .device-desktop .phabricator-action-view:hover .action-delete {
background-position: -30px -135px;
}
.device-desktop .phabricator-action-view:hover .action-disable {
.action-disable-white, .device-desktop .phabricator-action-view:hover .action-disable {
background-position: -45px -135px;
}
.device-desktop .phabricator-action-view:hover .action-dislike {
.action-dislike-white, .device-desktop .phabricator-action-view:hover .action-dislike {
background-position: -60px -135px;
}
.device-desktop .phabricator-action-view:hover .action-download {
.action-download-white, .device-desktop .phabricator-action-view:hover .action-download {
background-position: -75px -135px;
}
.device-desktop .phabricator-action-view:hover .action-edit {
.action-edit-white, .device-desktop .phabricator-action-view:hover .action-edit {
background-position: -90px -135px;
}
.device-desktop .phabricator-action-view:hover .action-enable {
.action-enable-white, .device-desktop .phabricator-action-view:hover .action-enable {
background-position: -105px -135px;
}
.device-desktop .phabricator-action-view:hover .action-file {
.action-file-white, .device-desktop .phabricator-action-view:hover .action-file {
background-position: -120px -135px;
}
.device-desktop .phabricator-action-view:hover .action-flag-0 {
.action-flag-0-white, .device-desktop .phabricator-action-view:hover .action-flag-0 {
background-position: -135px -135px;
}
.device-desktop .phabricator-action-view:hover .action-flag-1 {
.action-flag-1-white, .device-desktop .phabricator-action-view:hover .action-flag-1 {
background-position: -150px -135px;
}
.device-desktop .phabricator-action-view:hover .action-flag-2 {
.action-flag-2-white, .device-desktop .phabricator-action-view:hover .action-flag-2 {
background-position: -165px -135px;
}
.device-desktop .phabricator-action-view:hover .action-flag-3 {
.action-flag-3-white, .device-desktop .phabricator-action-view:hover .action-flag-3 {
background-position: -180px -135px;
}
.device-desktop .phabricator-action-view:hover .action-flag-4 {
.action-flag-4-white, .device-desktop .phabricator-action-view:hover .action-flag-4 {
background-position: -195px -135px;
}
.device-desktop .phabricator-action-view:hover .action-flag-5 {
.action-flag-5-white, .device-desktop .phabricator-action-view:hover .action-flag-5 {
background-position: 0px -150px;
}
.device-desktop .phabricator-action-view:hover .action-flag-6 {
.action-flag-6-white, .device-desktop .phabricator-action-view:hover .action-flag-6 {
background-position: -15px -150px;
}
.device-desktop .phabricator-action-view:hover .action-flag-7 {
.action-flag-7-white, .device-desktop .phabricator-action-view:hover .action-flag-7 {
background-position: -30px -150px;
}
.device-desktop .phabricator-action-view:hover .action-flag-ghost {
.action-flag-ghost-white, .device-desktop .phabricator-action-view:hover .action-flag-ghost {
background-position: -45px -150px;
}
.device-desktop .phabricator-action-view:hover .action-flag {
.action-flag-white, .device-desktop .phabricator-action-view:hover .action-flag {
background-position: -60px -150px;
}
.device-desktop .phabricator-action-view:hover .action-folder-open {
.action-folder-open-white, .device-desktop .phabricator-action-view:hover .action-folder-open {
background-position: -75px -150px;
}
.device-desktop .phabricator-action-view:hover .action-fork {
.action-fork-white, .device-desktop .phabricator-action-view:hover .action-fork {
background-position: -90px -150px;
}
.device-desktop .phabricator-action-view:hover .action-herald {
.action-herald-white, .device-desktop .phabricator-action-view:hover .action-herald {
background-position: -105px -150px;
}
.device-desktop .phabricator-action-view:hover .action-highlight {
.action-highlight-white, .device-desktop .phabricator-action-view:hover .action-highlight {
background-position: -120px -150px;
}
.device-desktop .phabricator-action-view:hover .action-history {
.action-history-white, .device-desktop .phabricator-action-view:hover .action-history {
background-position: -135px -150px;
}
.device-desktop .phabricator-action-view:hover .action-image {
.action-image-white, .device-desktop .phabricator-action-view:hover .action-image {
background-position: -150px -150px;
}
.device-desktop .phabricator-action-view:hover .action-like {
.action-like-white, .device-desktop .phabricator-action-view:hover .action-like {
background-position: -165px -150px;
}
.device-desktop .phabricator-action-view:hover .action-link {
.action-link-white, .device-desktop .phabricator-action-view:hover .action-link {
background-position: -180px -150px;
}
.device-desktop .phabricator-action-view:hover .action-lint-info {
.action-lint-info-white, .device-desktop .phabricator-action-view:hover .action-lint-info {
background-position: 0px -165px;
}
.device-desktop .phabricator-action-view:hover .action-lint-ok {
.action-lint-ok-white, .device-desktop .phabricator-action-view:hover .action-lint-ok {
background-position: -15px -165px;
}
.device-desktop .phabricator-action-view:hover .action-lint-warning {
.action-lint-warning-white, .device-desktop .phabricator-action-view:hover .action-lint-warning {
background-position: -30px -165px;
}
.device-desktop .phabricator-action-view:hover .action-lock {
.action-lock-white, .device-desktop .phabricator-action-view:hover .action-lock {
background-position: -45px -165px;
}
.device-desktop .phabricator-action-view:hover .action-love {
.action-love-white, .device-desktop .phabricator-action-view:hover .action-love {
background-position: -60px -165px;
}
.device-desktop .phabricator-action-view:hover .action-merge {
.action-merge-white, .device-desktop .phabricator-action-view:hover .action-merge {
background-position: -75px -165px;
}
.device-desktop .phabricator-action-view:hover .action-message {
.action-message-white, .device-desktop .phabricator-action-view:hover .action-message {
background-position: -90px -165px;
}
.device-desktop .phabricator-action-view:hover .action-meta-mta {
.action-meta-mta-white, .device-desktop .phabricator-action-view:hover .action-meta-mta {
background-position: -105px -165px;
}
.device-desktop .phabricator-action-view:hover .action-move {
.action-move-white, .device-desktop .phabricator-action-view:hover .action-move {
background-position: -120px -165px;
}
.device-desktop .phabricator-action-view:hover .action-new {
.action-new-white, .device-desktop .phabricator-action-view:hover .action-new {
background-position: -135px -165px;
}
.device-desktop .phabricator-action-view:hover .action-perflab {
.action-perflab-white, .device-desktop .phabricator-action-view:hover .action-perflab {
background-position: -150px -165px;
}
.device-desktop .phabricator-action-view:hover .action-preview {
.action-preview-white, .device-desktop .phabricator-action-view:hover .action-preview {
background-position: -165px -165px;
}
.device-desktop .phabricator-action-view:hover .action-refresh {
.action-refresh-white, .device-desktop .phabricator-action-view:hover .action-refresh {
background-position: -180px -165px;
}
.device-desktop .phabricator-action-view:hover .action-remove {
.action-remove-white, .device-desktop .phabricator-action-view:hover .action-remove {
background-position: 0px -180px;
}
.device-desktop .phabricator-action-view:hover .action-search {
.action-search-white, .device-desktop .phabricator-action-view:hover .action-search {
background-position: -15px -180px;
}
.device-desktop .phabricator-action-view:hover .action-start-sandcastle {
.action-start-sandcastle-white, .device-desktop .phabricator-action-view:hover .action-start-sandcastle {
background-position: -30px -180px;
}
.device-desktop .phabricator-action-view:hover .action-subscribe-add {
.action-subscribe-add-white, .device-desktop .phabricator-action-view:hover .action-subscribe-add {
background-position: -45px -180px;
}
.device-desktop .phabricator-action-view:hover .action-subscribe-auto {
.action-subscribe-auto-white, .device-desktop .phabricator-action-view:hover .action-subscribe-auto {
background-position: -60px -180px;
}
.device-desktop .phabricator-action-view:hover .action-subscribe-delete {
.action-subscribe-delete-white, .device-desktop .phabricator-action-view:hover .action-subscribe-delete {
background-position: -75px -180px;
}
.device-desktop .phabricator-action-view:hover .action-tag {
.action-tag-white, .device-desktop .phabricator-action-view:hover .action-tag {
background-position: -90px -180px;
}
.device-desktop .phabricator-action-view:hover .action-transcript {
.action-transcript-white, .device-desktop .phabricator-action-view:hover .action-transcript {
background-position: -105px -180px;
}
.device-desktop .phabricator-action-view:hover .action-undo {
.action-undo-white, .device-desktop .phabricator-action-view:hover .action-undo {
background-position: -120px -180px;
}
.device-desktop .phabricator-action-view:hover .action-unlock {
.action-unlock-white, .device-desktop .phabricator-action-view:hover .action-unlock {
background-position: -135px -180px;
}
.device-desktop .phabricator-action-view:hover .action-unmerge {
.action-unmerge-white, .device-desktop .phabricator-action-view:hover .action-unmerge {
background-position: -150px -180px;
}
.device-desktop .phabricator-action-view:hover .action-unpublish {
.action-unpublish-white, .device-desktop .phabricator-action-view:hover .action-unpublish {
background-position: -165px -180px;
}
.device-desktop .phabricator-action-view:hover .action-warning {
.action-warning-white, .device-desktop .phabricator-action-view:hover .action-warning {
background-position: -180px -180px;
}
.device-desktop .phabricator-action-view:hover .action-world {
.action-world-white, .device-desktop .phabricator-action-view:hover .action-world {
background-position: 0px -195px;
}