1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-18 21:02:41 +01:00
Commit graph

50 commits

Author SHA1 Message Date
Chad Little
148ab2b772 Lots of Icons
Summary: Tweaks the dark, grey, and white icons to match the action-icons. Also added a home icon for navigation.

Test Plan: looked at list navs, action menus.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6142
2013-06-05 18:59:23 -07:00
Chad Little
d0bb4e1c93 Restrict icon hover on lists to sidebar.
Summary: Needed to be more restrictive

Test Plan: Test maniphest and list examples.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6139
2013-06-05 16:29:32 -07:00
Chad Little
3029d72d5c PHUIListView Examples, CSS
Summary: This adds examples and abstracts out CSS for common nav re-use.

Test Plan: Tested DocumentExample and ListExample

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6138
2013-06-05 15:03:56 -07:00
Chad Little
f1bf27959f PHUIList, PHUIDocument updates
Summary:
This diff covers a bit of ground.

- PHUIDocumentExample has been added
- PHUIDocument has been extended with new features
- PhabricatorMenuView is now PHUIListView
- PhabricatorMenuItemView is now PHUIItemListView

Overall - I think I've gotten all the edges covered here. There is some derpi-ness that we can talk about, comments in the code. Responsive design is missing from the new features on PHUIDocument, will follow up later.

Test Plan: Tested mobile and desktop menus, old phriction layout, new document views, new lists, and object lists.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6130
2013-06-05 08:41:43 -07:00
epriestley
4fc9b8e785 Apply sprite sheet changes to Phabricator
Summary: Basically a one line change, plus a regen. This should be the last full-rewrite these things get since they'll stop fully rehashing all the time now.

Test Plan: See D5964.

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5965
2013-05-18 10:34:10 -07:00
Chad Little
371fd12c1d Flatten side nav
Summary: Debating removing the textures from the sidenavs, sending this around for comments.

Test Plan: Test homepage and various sidenavs, mobile layouts.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5948
2013-05-17 09:58:37 -07:00
epriestley
cbd3c0b7ac Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.

Instead, provide first-class actions:

{F42978}

They produce targets which my meaty ham-fists can plausibly hit on mobile, too:

{F42979}

(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)

Test Plan: Added UIExamples. Checked desktop/mobile.

Reviewers: chad, btrahan, edward

Reviewed By: btrahan

CC: aran

Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 12:57:01 -07:00
Chad Little
5c100c0d69 Payment sprite icons.
Summary: Adds some icons for taking money.

Test Plan: UIExamples

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5753
2013-04-22 16:41:00 -07:00
Chad Little
00a1102e6e Add up, down, and token action icons.
Summary: Will use these in feed, other places.

Test Plan: Photoshop, uiexamples.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5746
2013-04-22 11:21:00 -07:00
epriestley
e6720bd6d6 Implement order and chaos modes for Remarkup editing
Summary:
Ref T2599.

Implements an "order" mode which fullscreens the editor and reduces distractions, similar to Asana's "focus" mode and GitHub's "zen" mode. This can help users who need fewer distractions get work done.

Implements a "chaos" mode which does the opposite. This can help users who need more distractions to get work done.

Test Plan: Clicked "order" and "chaos" buttons.

Reviewers: chad, btrahan

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T2599

Differential Revision: https://secure.phabricator.com/D5735
2013-04-19 19:50:21 -07:00
Chad Little
f4ab0da50a New remarkup icons
Summary: serious and non-serious full screen icons.

Test Plan: photoshop, doinitlive

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5737
2013-04-19 19:08:59 -07:00
Chad Little
7aea37c443 PHUIIconView
Summary: Adds a base class for displaying images and icons.

Test Plan: Tested giving and taking tokens, viewed action headers, uiexamples for icons, workboards.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5736
2013-04-19 17:44:20 -07:00
Chad Little
6229b7bd88 Refresh Feed Design
Summary: Refreshes feed's design a bit, adds app icons, works nicer on mobile.

Test Plan: Tested many feed stories, not sure I got them all, but seems fine.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5673
2013-04-13 09:09:42 -07:00
Chad Little
925c507705 Close icons
Summary: Icons for close or delete in action headers

Test Plan: photoshop, diffcamp

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5643
2013-04-10 07:26:15 -07:00
Chad Little
b8ea6c441f Allow AphrontDialogView to use PhabricatorActionHeaderView
Summary: We're baking some useful things into ActionHeader, would like to consolidate it's use around the site for consistency.

Test Plan: Tested log out dialog, attach dependencies, delete document in phriction.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Differential Revision: https://secure.phabricator.com/D5635
2013-04-09 15:50:48 -07:00
Chad Little
e187312177 Action Menu (mobile)
Summary: First pass here, still needs some UI work (maybe? tablets?). Getting it out to see if implementation is corrrect.

Test Plan: Shrink Maniphest task on Chrome, see new UI. Toggle menu. Test on iOS.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5631
2013-04-09 12:42:03 -07:00
Chad Little
d1daf80d0d CSS gradient buttons
Summary: Creates CSS Gradients for buttons. Also tweaked hover and active styles. "Fixed" disabled state (this may require follow up diffs to correct around site)

Test Plan: Tested Maniphest and UI Examples in Chrome and IE10/9/8

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5624
2013-04-08 15:00:55 -07:00
Chad Little
d61ac3468b 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
2013-04-05 07:40:27 -07:00
Chad Little
74609d9366 Action Icons
Summary: First pass at 'action icons' for headers and other items. Ties into future diff.

Test Plan: photoshop, read the css.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Differential Revision: https://secure.phabricator.com/D5565
2013-04-04 10:38:50 -07:00
Chad Little
063f93a106 Rework desktop header
Summary: Removes the glow icons and uses a hover change. Fixes phantom anchors.

Test Plan: Review in Chrome at various sizes (phone tablet). Check that icons still work. Check that mobile menus render when clicked.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2876

Differential Revision: https://secure.phabricator.com/D5549
2013-04-03 08:26:36 -07:00
Chad Little
42b47fd23c Update icons
Summary: Add icons for releeph, phage, workphlow, prequent, adventure, and xhprof. Accidentally includes phame.

Test Plan: photoshop

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5540
2013-04-02 14:28:11 -07:00
Chad Little
919bd4a034 Rework Mobile Header and Mobile Home.
Summary: Mostly finished, wanted to get it into your hands to play with. I need to remove some more dead CSS and figure out where we want to put profile/logout, but overall feels pretty good. Tested a bunch in iOS and other layouts.

Test Plan: Test Home, Maniphest, search bars, app menus.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Maniphest Tasks: T2809

Differential Revision: https://secure.phabricator.com/D5407
2013-03-22 11:50:30 -07:00
Chad Little
72606412e4 New Icons
Summary: New Icons for New Apps.

Test Plan: Photoshop

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5399
2013-03-21 10:02:11 -07:00
Chad Little
adca269812 Add gradient to object-list cards
Summary: Adds a gradient, also re-ran sprite generator to attempt to sprite - for some reason all images were un-optimized.

Test Plan: Test on UI Examples page

Reviewers: epriestley, btrahan

Reviewed By: btrahan

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5354
2013-03-15 17:15:57 -07:00
Bob Trahan
9d806b69cb Conpherence - some cleanup type stuff
Summary:
this diff does a few, not so exciting things

- changes "conpher" to "conpherence" where it snuck into CSS, spritemap, etc -- I believe we now consistently call it conpherence. Feel free to change it, just change it everywhere. :D
- puts the widget icons in the right order per M14
- makes the "mobile-only" widgets show the toggles only in the mobile view
 - also made it so clicking them does nothing for now
- removes the tasks widget since we don't want it

...my time is getting chopped up funny (yay puppy) so this is just an attempt at something that can go into the codebase and not make it worse. Next up is making the widgets that show on desktop look right / not say "TODO"

Test Plan: played around in Conpherence

Reviewers: epriestley, chad

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2530

Differential Revision: https://secure.phabricator.com/D5334
2013-03-13 13:03:51 -07:00
Chad Little
fbb032c710 Document icons sprite sheet.
Summary: Adds 32 and 64 px images to represent basic documents.

Test Plan: Differential

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5317
2013-03-10 14:16:16 -07:00
Chad Little
752055a45c Update mobile menu icons
Summary: Simplify the look of the mobile menu, provide active states for the menu icons.

Test Plan: iOS Simulator and Chrome.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2426

Differential Revision: https://secure.phabricator.com/D5189
2013-03-03 08:17:57 -08:00
Chad Little
7c8b32c6a8 Make icons 2 px taller, 4 px larger.
Summary: Makes the visual size 2px larger and hit area 4px bigger on notification and message icons.

Test Plan: Review icons in sandbox, test new layout with notifications or messages.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5127
2013-02-26 14:56:25 -08:00
epriestley
0e7382b102 Fix conpherence sprites
Summary:
The map had "conph" but everything else refers to "conpher". The "conph" sprite thing won when I regenerated sprites for tokens.

I should just fix this so it can't happen, but unbreak for now. Renamed "conph" -> "conpher", regenerated sprites, nuked all the "conph" stuff.

Test Plan: Looked at Conpherence, saw icons.

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D4982
2013-02-15 19:04:25 -08:00
epriestley
49c40d209d Tokens v1
Summary:
Features!

  - Giving tokens.
  - Taking tokens back.
  - Not giving tokens.

Test Plan: See screenshots.

Reviewers: chad, vrana

Reviewed By: chad

CC: aran, btrahan

Maniphest Tasks: T2541

Differential Revision: https://secure.phabricator.com/D4964
2013-02-15 07:47:14 -08:00
Chad Little
3e7a7518fa Add missing Conpherence icon + generate hovers
Summary: Added missing sprite images and added hover classes to sprite generator class.

Test Plan: read the CSS

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4721
2013-01-29 10:56:01 -08:00
Chad Little
93eac1f9d3 Add Conpherence sprites.
Summary: Let's see if I did this right. This adds on and off state icons (1 and 2x) for conpherence. I think I need to tweak and add more CSS to have the off hover state be the on icon. Will check.

Test Plan: spritegen

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2400

Differential Revision: https://secure.phabricator.com/D4709
2013-01-28 15:56:29 -08:00
Chad Little
dca2048bab Notifcation icons for Conpherence
Summary: Adds notification icons for Conpherence and re-writes the CSS a bit for the new icons and states. I removed the background bubble here and went straight CSS. I also seem to have a JS error and the notification menu doesn't display, but I'm tired and wanted to look at this in Differential. Will update after JS fix.

Test Plan: Turned on notification numbers and conpherence numbers, turned them off. Made them big. Checked FF and IE.

Reviewers: epriestley, btrahan

Reviewed By: btrahan

CC: aran, Korvin

Maniphest Tasks: T2415

Differential Revision: https://secure.phabricator.com/D4666
2013-01-26 17:04:18 -08:00
Chad Little
564d926650 Conpherence Icons
Summary: Reload Homepage. See icons. Not positive will keep this icon, as it's smaller in mass than others. Will look around.

Test Plan: Photoshop

Reviewers: epriestley, btrahan

Reviewed By: btrahan

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4652
2013-01-25 13:37:11 -08:00
epriestley
5c6201e86a Use white "+" icon for homepage tile hoverstate
Summary: The easiest approach here is proably to provide a more specific rule in the sheet CSS. This saves us from having to write any JS, notably.

Test Plan: Hovered over "+" on homepage.

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D4579
2013-01-22 09:56:18 -08:00
epriestley
809f380aa6 Fix FileTreeView sprites
Summary: D4453 and D4427 sailed past one another, like ships in the night.

Test Plan: Verified Differential hover and selected states.

Reviewers: asherkin, chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D4577
2013-01-22 09:10:21 -08:00
epriestley
d905d3cb2a Sprite menu label and hover states
Summary: These can all fit into the gradient sprite.

Test Plan: Looked at menu with selected item, hovered over menu.

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D4453
2013-01-15 15:49:48 -08:00
Chad Little
8e214ef776 Added Feed icons.
Summary: Adds a feed icon for feed applications.

Test Plan: Photoshop

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4388
2013-01-10 10:00:18 -08:00
Chad Little
dbae9452f9 Add a setup icon.
Summary: Adds a setup icon, sprites, and new CSS maps.

Test Plan: Photoshop

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4299
2012-12-28 14:21:41 -08:00
epriestley
6f0c87269b Modernize Files lists
Summary: Update to new UI stuff, prepare for mobile.

Test Plan: {F27167}

Reviewers: btrahan, chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D4198
2012-12-16 16:33:02 -08:00
Chad Little
e82943f733 Redo hover states on app icons
Summary: This tones down the glow and highlight for a cleaner hover experience.

Test Plan: chrome, firefox

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4207
2012-12-16 14:10:10 -08:00
Chad Little
1e0d06ba9d Updated Sprites, included darker grey, and upload and download icons.
Summary: na

Test Plan: photoshop

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4201
2012-12-15 18:50:06 -08:00
epriestley
1761abcbfc 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
2012-12-11 13:59:35 -08:00
epriestley
7b5dea94d2 Clean up some more sprite stuff
Summary:
  - Remove unused CSS rules and non-sprite images.
  - Sprite the logo.

Test Plan: Looked at site, looked good.

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D4113
2012-12-07 14:29:09 -08:00
epriestley
f306cab653 Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:

  - Need an application-sized "eye", or a "home" icon for "Phabricator Home".
  - Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
  - If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
  - To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
  - The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
  - The /applications/ icons have a white hover state (or we can drop it).
  - The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
  - The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.

Test Plan:
{F26698}
{F26699}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T1960

Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 13:37:28 -08:00
epriestley
8cff6ea9cb Add eye icon to left menu button
Summary: Do we have an icon with 2x for the right menu?

Test Plan: {F26590}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T1960

Differential Revision: https://secure.phabricator.com/D4101
2012-12-07 13:36:35 -08:00
epriestley
1c9d1d6ad1 Add some textures/gradients to crumbs and menu
Summary:
This doesn't lay in everything, but:

  - Break the buttons gradient apart into components and rebuild it (along with other gradients) into a single gradient sprite (possible after {D4099}).
  - Use the sliced gradient for the crumbs background.
  - Use the sliced image for the crumb divider.
  - Adds the black/white app sheets, but I'm not generating them quite yet.

Test Plan: {F26537} {F26540}

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Maniphest Tasks: T1960

Differential Revision: https://secure.phabricator.com/D4100
2012-12-07 13:35:49 -08:00
epriestley
71c170661b Use "flame" notification icon and bubble instead of lightning bolt
Summary: Switch to the final versions of these

Test Plan: Will add screenshots...

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D4032
2012-11-27 14:03:25 -08:00
epriestley
6c88c76cac Generate an icon sprite map with new sprites and 2x retina graphics
Summary:
  - The filesystem is now the authority for which sprites are available. If you add new icons, the generation process will pick them up.
  - I broke out icon generation and added retina support. App icon generation still uses the old method.
  - Update ActionList and RemarkupControl to use the new sheet.
  - Use white icons on hover.
  - Also fixed a couple of minor issues with some stuff in Firefox/Chrome.

Test Plan:
{F25750}

{F25751}

{F25752}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2013

Differential Revision: https://secure.phabricator.com/D4027
2012-11-23 16:35:39 -08:00
epriestley
f8e6240b9d Move sprite sources from webroot/ to resources/
Summary:
  - Since we'll never serve these directly, move them to resources/. This makes generating the Celerity map faster and reduces the size of the result map, since we don't need to analyze resources we'll never serve.
  - Also Rename the 2x `subscribe-remove` to `subscribe-delete` since they were named inconsistently. Everything else is in good shape.

Test Plan: Generated sprites as per D4025

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2013

Differential Revision: https://secure.phabricator.com/D4026
2012-11-23 16:19:06 -08:00