Commit graph

46 commits

Author SHA1 Message Date
Chad Little 4cc40933c4 Color consolidation
Summary: Another pass at consolidating colors

Test Plan: Test various pages and UI elements

Reviewers: epriestley

Reviewed By: epriestley

CC: Korvin, aran

Differential Revision: https://secure.phabricator.com/D6905
2013-09-07 09:13:55 -07:00
Chad Little 4bb920f396 Tighten up ObjectItemList icons
Summary: Pulls the icon flush right in the objectlistview.

Test Plan: Review my stale diffs, and UIExamples page.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, aran

Differential Revision: https://secure.phabricator.com/D6875
2013-09-03 08:24:41 -07:00
Chad Little dd995984eb UIColor Blues and common color integration
Summary: This adds standard 'blues' and start integration of standard colors for text, backgrounds, and borders.

Test Plan: sb

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, aran

Differential Revision: https://secure.phabricator.com/D6857
2013-09-02 08:10:47 -07:00
Chad Little 921bc32928 Move #666 to $greytext in UIColor
Summary: Split some of these up for safe regexes.

Test Plan: reload celerity

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, aran

Differential Revision: https://secure.phabricator.com/D6858
2013-09-02 08:08:54 -07:00
Chad Little 2ce3c5235b Flatten Object List items and lighten up grey buttons
Summary: Moving towards a flatter, crisper layout with some minor tweaks here. The button styles and object item styles now have consistent colors and depth. Will continue to repeat this pattern and build out a standard 'grey' palette.

Test Plan: Test homepage and maniphest home.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, aran

Differential Revision: https://secure.phabricator.com/D6828
2013-08-28 07:36:22 -07:00
epriestley b6df427c2f Add a "disabled" style
Summary: Fixes T3525. This feels way better, although it's still a little hard for me to pick out of lists with otherwise default-colored items.

Test Plan: {F49910} {F49911}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T3525

Differential Revision: https://secure.phabricator.com/D6435
2013-07-12 11:31:20 -07:00
Chad Little 592fae271f Remove margin from error-view when in object item list.
Summary: This view should be flush either way.

Test Plan: Test with and without flush.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6363
2013-07-03 11:14:04 -07:00
epriestley cd011be254 Revert "Add "state icons" to ObjectItemListView"
Summary: This reverts commit e70bb28ea0. We didn't end up using these.

Test Plan: Looked at Differential.

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D6357
2013-07-03 09:01:10 -07:00
epriestley 82b37b9fd8 Show draft icon in attributes?
Summary: Ref T3485. Maybe this is OK?

Test Plan: {F48656}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T3485

Differential Revision: https://secure.phabricator.com/D6356
2013-07-03 08:53:01 -07:00
epriestley 6aee862bbe Use ApplicationSearch in Differential
Summary:
Ref T603. Ref T2625. Fixes T3241. Depends on D5451. Depends on D6346.

@wez, this changes the Differential revision list UI substantially and may generate a lot of bikeshedding / who-moved-my-cheese churn. See T3417 for context, for example. The motivations for this change are:

  - The list now works on devices, like phones and tablets. This is a requirement to make the rest of Differential work on devices.
  - Although ApplicationSearch intentionally presents a simpler interface initially and some options which were one click away before aren't now, it is much more powerful than the search it replaces and allows users to build, save, share, fork, edit, and customize a much wider range of queries. Users who used the old filters frequently can use Advanced Search -> Save Custom Query to create new versions of them, and of any other query. "Edit Queries.." allows users to remove and reorder queries, including builtin queries. Basically, there are like three things which have gone from "1-click" to "a few clicks", and ten trillion things which have gone from "hard/impossible" to "relatively easy".

The local screenshots look a bit iffy, but I think a lot of this is the fakenesss of my test data. If they still feel iffy in production we can tweak them until they feel good, like we did for Maniphest.

Test Plan:
{F48477}

{F48478}

Reviewers: btrahan, chad, wez

Reviewed By: btrahan

CC: aran, s

Maniphest Tasks: T603, T2625, T3241

Differential Revision: https://secure.phabricator.com/D6347
2013-07-03 06:11:07 -07:00
Anh Nhan Nguyen d9f01d6fb7 [Rough Sketch] Differential ObjectItemView Smexyness
Summary:
Tried out `PhabricatorObjectItemView` for Differential. It looks smexy and smooth.

Refs T2014

- Title and Date as Maniphest
- Author in the handle icon
- Bar color reflects revision status (Needs Review, Accepted, Abandoned etc.) @chad looking for non-blue is faster than keeping watch for everything that's not "Closed" in old table form
- Some status information are in footer icons; currently only stale/old status display as well as saved drafts, maybe more in future; these come into my mind:
  - No reviewer warning
  - Push Blocking Priority (T2730)
  - Trivial, fast review guaranteed
  - Sketch / Just looking for advice/help
  - Arcanist Project (T2614)
  - Denote "Public Send-in" (T1476)

{F37662}
{F37663}
{F37664}
{F37665}

Some flaws:

- Date and reviewers on every entry the same?
- No respect for Differential fields (for some reason, every entry appeared the same, so broke it to parts)
- Plenty of (potential) increase in height - advise reducing paging length from 100 to 50 - or just ignore me

Suggestions for the future:

- Expand the meta information regarding revisions; e.g. the various status displays above
- Uh... T2543, T1279, T793, T731 and what else I want for Differential, because they are awesome!
- T793 should be in particular easy appearance-wise, just copy-paste from Maniphest

Test Plan: By looking at it, of course. Verified there are no errors or crashed

Reviewers: epriestley, chad, btrahan, liguobig

Reviewed By: chad

CC: aran, Korvin, edward, nh

Maniphest Tasks: T2014

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

Conflicts:
	src/__celerity_resource_map__.php
2013-07-03 06:10:39 -07:00
epriestley e70bb28ea0 Add "state icons" to ObjectItemListView
Summary: They seem to look OK?

Test Plan: {F48529} {F48530}

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D6350
2013-07-02 16:29:43 -07:00
Chad Little e2f0003ff9 Implement color variables in CSS.
Summary: Added in color variables in most used places. Tweaked green to be a bit more serious.

Test Plan: Tested Tags, Error View, Timeline, Object Views, and Color Palette.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6244
2013-06-19 20:25:41 -07:00
Chad Little 63a8780bd5 83% Light Colors.
Summary: This adds an 83% Light set of colors for highlights, warnings, etc.

Test Plan: Tested Notifications, Error View, and Color Palette page. Test is out, not quite sure on notifications.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6239
2013-06-19 15:50:15 -07:00
Chad Little f34dcbc73b Use color palette in timeline view
Summary: Updated Timeline to use new colors.

Test Plan: UIExamples

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6231
2013-06-19 08:37:56 -07:00
Chad Little c42f986e1a Color Palette
Summary: Picked a set of standard colors. Based on our current Maniphest color set, but tweaked to the same hue with http://color.hailpixel.com/

Test Plan: Not intended to be end all be all, but a decent first cut. Applied to Maniphest and Tags.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6229
2013-06-18 15:35:14 -07:00
Chad Little 4672705c22 Tweak audit status colors.
Summary: Fixes T3242. Changes the red and orange objects to match the transactions. Also adds a highlight color to 'cards'.

Test Plan: Review my audits in my sandbox

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T3242

Differential Revision: https://secure.phabricator.com/D6184
2013-06-11 20:53:55 -07:00
epriestley 5f98c5f386 Simplify drag-and-drop list implementations
Summary:
  - Use the same styles for shared operations (`drag-ghost`, `drag-dragging`).
  - Move shared code into the base class.

Test Plan: Dragged around tasks and named queries.

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D6141
2013-06-05 17:36:33 -07:00
epriestley 0f82990798 Allow named queries to be reordered by dragging
Summary:
Also you have to drop them. So drag, and then drop.

This needs some cleanup and reconciliation/generalization with the Maniphest implementation. In particular, you can't drag things to the very top right now, and they should share more CSS and more behaviors.

Test Plan:
Look I alphabetized them:

{F45286}

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D6136
2013-06-05 16:22:27 -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
Chad Little 6219103f02 Update ObjectItemView to a 4px grid
Summary: Cleaning up the spacing on ObjectItemView to be on a 4px grid and a little more consistent.

Test Plan: Review changes on a grid in Photoshop

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6088
2013-05-31 08:40:03 -07:00
Chad Little 84f21c8a20 Modernize Audit
Summary: Adds mobile support to Audit, converts tables to object item views. I also colored 'concerns' and 'audit required' in the list, but nothing else. We can add more if needed but I'm assuming these are the two most important cases.

Test Plan: Tested as much as I could, a little unsure of a few things since my local repo isn't super filled. Will let epriestley run through.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5962
2013-05-18 10:49: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 54b2953dec Adds 'setSubHead' to Objectlist
Summary: There are a few places a third text row in ObjectItemListView is needed or make things easier to read. Built and rolled out in Config.

Test Plan: Tested in Config Groups.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5837
2013-05-06 14:01:57 -07:00
epriestley 6587c1d5a5 Add a "byline" element to ObjectItemListView
Summary: At least for non-workboard views, try plain text for author information instead of profile images. Some discussion in D5451.

Test Plan:
{F39411}
{F39412}
{F39413}
{F39414}
{F39415}
{F39416}

Reviewers: chad

Reviewed By: chad

CC: AnhNhan, aran

Differential Revision: https://secure.phabricator.com/D5605
2013-04-06 11:38:43 -07:00
Chad Little c9cc59a73c Tighten up object list 2px
Summary: Pulls in the top 2px and left 2px. Also reduces to 13px as standard. The 14px never looked decent to me. Main objective here is to have it feel more table-like instead of a sea of white space.

Test Plan: Tested layouts in Maniphest, Config, and UIExamples.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5551
2013-04-03 08:28:22 -07:00
Chad Little 426862bb2d Minor spacing on object-list-items
Summary: Ran into a few edge cases under 'Needs Triage', this adds a bit more space under unassigned tasks with projects.

Test Plan: Test Maniphest, Needs Triage, Homepage, and UI Examples.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5452
2013-03-26 13:54:36 -07:00
Chad Little e246001bd2 Tighten up CSS on object-list a bit.
Summary:
- Fix unintended round edges.
- Reduce height 4px;
- Align title and date
- Fix mobile/tablet spacing

Test Plan: Photoshop, UIExamples, Config, Paste, Maniphests (all mobile and desktop views)

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5445
2013-03-25 12:20:49 -07:00
Chad Little 1a48c7ac40 Lighten up gradient on cards
Summary: Taller gradient, lighter at bottom. Also fixed right corners.

Test Plan: Chrome, Photoshop

Reviewers: epriestley, asherkin

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5437
2013-03-23 19:50:26 -07:00
epriestley 58a15ad250 Clean up some card issues
Summary:
Ref T2826.

  - Adds a min height (arbitrarily, height of the gradient; other choices are 60px [title + avatar], or 70px [title + projects + closed + avatar]).
  - Color bars 4px -> 6px.
  - Fixes profile image clipping in Firefox, etc.
  - Removes background color from avatars, for transparent GIFs and such.
  - Fixes shift-click to select tasks in views that can't be grabbed.

Test Plan: {F37535}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2826

Differential Revision: https://secure.phabricator.com/D5436
2013-03-23 18:38:03 -07:00
epriestley dcfe011fc7 Separate object names from object links in other applications
Summary: Move `Fnn`, `Pnn`, etc., out of the link text so they can be double-clicked to select.

Test Plan: Viewed Paste, Files, Ponder.

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5433
2013-03-23 15:01:05 -07:00
epriestley 8696b8c64c Small spacing fix.
Auditors: chad
2013-03-23 14:43:33 -07:00
epriestley 018de5dec7 Use ObjectItemListView for Maniphest
Summary:
This isn't quite complete, but everything else is technical cleanup. Broadly:

  - Removed checkboxes. Selected state is now indicated with CSS, and toggled with shift-click. When nothing is selected, the text reads "Shift-Click Tasks to Select" to let users discover this feature.
  - Updated drag-to-reorder code to work with ObjectItemListView.
  - Closed/resolved is now shown with a grey footer icon.
  - Assigned is now shown with a user profile image handle icon, with a hover state.

This could probably use some more tweaks, but overall I think it looks pretty reasonable?

Test Plan: {F35897}

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5340
2013-03-23 14:38:01 -07:00
epriestley 5e53fc750a Fix some ObjectItemList issues
Summary:
Safari has a weird bug with `border-radius` plus border color:

{F35865}

Move the uncolored borders to an internal div to fix this. Also tweak some positioning on icons for cards, and add a "magenta" color.

Test Plan: {F35866}

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5338
2013-03-23 14:37:18 -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
epriestley b41b1b43db Implement card style and extras for object item lists
Summary:
Initial pass at elements appearing on M10.

Glaring omissions:

  - I cut a single icon out of M10 in a haphazard way.
  - No linear graident texture on the cards.

Test Plan:
{F35248}
{F35249}

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5311
2013-03-09 17:55:01 -08:00
Chad Little 20201364e5 Add hover state to stackable list.
Summary: Adds a hover state, helpful for large stacked lists. Also applied dust to projects and config to go with the hover changes.

Test Plan: Config, Projects

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5223
2013-03-05 09:48:17 -08:00
Chad Little 48c5356111 Tweak spacing a little more on ObjectList
Summary: Just a hair tighter, also checked out Ponder as well.

Test Plan: Check Ponder, Config groups, and Config options list.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4655
2013-01-25 14:57:10 -08:00
Chad Little 4ae548f9ba Reduce vertical height on object list.
Summary: Tightens up the spacing between the title and subtitle, helps shave 3px an object.

Test Plan: epriestley

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4654
2013-01-25 14:30:14 -08:00
Chad Little bf3d972e72 Add setStackable to ObjectItemList and use in Config
Summary:
This adds a new method for rendering the object list as a stackable set of items. Good for certain renderings like Config.

u

Test Plan: Review list on iOS, Chrome, FF.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4637
2013-01-24 21:00:47 -08:00
Chad Little 34076fae38 Config style updates.
Summary: Minor spacing tweaks to Config app. Added label for consistency.

Test Plan: Review pages in the Config app for spacing.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4523
2013-01-18 18:08:06 -08:00
epriestley d2cf71c5b1 Improve PhabricatorObjectItemListView handling of wide content
Summary: Wide content is currently allowed to push too far to the right, overlapping icons. Prevent it from doing so.

Test Plan:
Before:

{F27906}

After:

{F27907}

After, Mobile:

{F27908}

Reviewers: chad, codeblock, btrahan

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D4212
2012-12-17 08:26:44 -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
epriestley 883829e667 Improve design of PhabricatorObjectListView
Summary: See discussion in T2014. Aligns this element more closely with @chad's `frame_v3.psd` mock, and implements the icon/label element. Removes "details".

Test Plan: {F27062} {F27063} {F27064} {F27065}

Reviewers: btrahan, chad

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T2014

Differential Revision: https://secure.phabricator.com/D4179
2012-12-13 10:59:29 -08:00
epriestley bee112c575 Fix various app nav issues
Summary:
  - Fix width, corresponding to wider sprites.
  - Sprite the "Audit" icon.
  - Mark the meta-application as device-ready.
  - Fix some collapse/expand bugs with the draggable local navs.
  - Add texture to local nav.
  - Darken the application nav to make it more cohesive with the main nav. I think this is an improvement?

Test Plan: See screenshots.

Reviewers: chad, btrahan

Reviewed By: btrahan

CC: aran, netfoxcity

Maniphest Tasks: T1569

Differential Revision: https://secure.phabricator.com/D3338
2012-08-20 14:13:15 -07:00
epriestley 70a8e8b6e8 Modernize Paste
Summary:
  - Add a PhabricatorApplication.
  - Make most of the views work well on tablets / phones. The actual "Create" form doesn't, but everything else is good -- need to make device-friendly form layouts before I can do the form.

Test Plan: Will attach screenshots.

Reviewers: btrahan, chad, vrana

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T1569

Differential Revision: https://secure.phabricator.com/D3293
2012-08-15 10:45:06 -07:00