From 1761abcbfc7b708622560d0f1317a63f0347eddb Mon Sep 17 00:00:00 2001 From: epriestley Date: Tue, 11 Dec 2012 13:59:35 -0800 Subject: [PATCH] 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 --- resources/sprite/manifest/icon.json | 120 ++++++------- .../controller/PholioMockViewController.php | 6 +- .../constants/PhabricatorTransactions.php | 11 ++ .../PhabricatorApplicationTransaction.php | 8 + .../examples/PhabricatorTimelineExample.php | 42 +++-- .../celerity/CeleritySpriteGenerator.php | 1 + .../layout/PhabricatorTimelineEventView.php | 43 +++-- .../css/layout/phabricator-timeline-view.css | 160 ++++++++++++++---- webroot/rsrc/css/sprite-icon.css | 120 ++++++------- 9 files changed, 327 insertions(+), 184 deletions(-) diff --git a/resources/sprite/manifest/icon.json b/resources/sprite/manifest/icon.json index d310d6d0db..68ab25220b 100644 --- a/resources/sprite/manifest/icon.json +++ b/resources/sprite/manifest/icon.json @@ -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" : { diff --git a/src/applications/pholio/controller/PholioMockViewController.php b/src/applications/pholio/controller/PholioMockViewController.php index 14867cbf9e..0d81192663 100644 --- a/src/applications/pholio/controller/PholioMockViewController.php +++ b/src/applications/pholio/controller/PholioMockViewController.php @@ -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( diff --git a/src/applications/transactions/constants/PhabricatorTransactions.php b/src/applications/transactions/constants/PhabricatorTransactions.php index 54140c3f7c..c70b185fef 100644 --- a/src/applications/transactions/constants/PhabricatorTransactions.php +++ b/src/applications/transactions/constants/PhabricatorTransactions.php @@ -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'; + } diff --git a/src/applications/transactions/storage/PhabricatorApplicationTransaction.php b/src/applications/transactions/storage/PhabricatorApplicationTransaction.php index c97f6c3839..45c3e177f3 100644 --- a/src/applications/transactions/storage/PhabricatorApplicationTransaction.php +++ b/src/applications/transactions/storage/PhabricatorApplicationTransaction.php @@ -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: diff --git a/src/applications/uiexample/examples/PhabricatorTimelineExample.php b/src/applications/uiexample/examples/PhabricatorTimelineExample.php index 5003532d9c..12095969d6 100644 --- a/src/applications/uiexample/examples/PhabricatorTimelineExample.php +++ b/src/applications/uiexample/examples/PhabricatorTimelineExample.php @@ -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) { diff --git a/src/infrastructure/celerity/CeleritySpriteGenerator.php b/src/infrastructure/celerity/CeleritySpriteGenerator.php index 4d52773959..7e38b0ded4 100644 --- a/src/infrastructure/celerity/CeleritySpriteGenerator.php +++ b/src/infrastructure/celerity/CeleritySpriteGenerator.php @@ -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); diff --git a/src/view/layout/PhabricatorTimelineEventView.php b/src/view/layout/PhabricatorTimelineEventView.php index 1a57d8a927..7e20394178 100644 --- a/src/view/layout/PhabricatorTimelineEventView.php +++ b/src/view/layout/PhabricatorTimelineEventView.php @@ -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', diff --git a/webroot/rsrc/css/layout/phabricator-timeline-view.css b/webroot/rsrc/css/layout/phabricator-timeline-view.css index 4ad083d779..6072c751e7 100644 --- a/webroot/rsrc/css/layout/phabricator-timeline-view.css +++ b/webroot/rsrc/css/layout/phabricator-timeline-view.css @@ -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; +} diff --git a/webroot/rsrc/css/sprite-icon.css b/webroot/rsrc/css/sprite-icon.css index b6b924590a..02a8705fd6 100644 --- a/webroot/rsrc/css/sprite-icon.css +++ b/webroot/rsrc/css/sprite-icon.css @@ -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; }