1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-04 20:52:43 +01:00
Commit graph

50 commits

Author SHA1 Message Date
Chad Little
0e5cd478c4 Move rgba rules into CelerityDefaultPostprocessor
Summary: Should make it simpler here to have more `rgba` rules in CSS for things like hovers, selected states. Maybe only use `rgb` colors? Color pallette probably needs an overhaul.

Test Plan: Bounce around random pages, buttons, menus. Everything appears normal.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15273
2016-02-16 09:54:43 -08:00
Chad Little
578d4e7f58 Update Pholio to use pink instead of indigo
Summary: We recently shipping a more color correct version of Indigo, which means Pholio should use Pink for highlights.

Test Plan: Review Pholio Comments, Hovers.

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D10732
2014-10-21 10:06:10 -07:00
Chad Little
454b773f78 Add spacing under Pholio Inline Comments
Summary: Adds a bit of space

Test Plan: View 2 or more inline comments on same transaction.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9712
2014-06-24 15:23:57 -07:00
Chad Little
25db3f44a0 Replace 'Embed' hint on Pholio
Summary: Replaces Embed hint with where the heck you are hint.

Test Plan: Tested current and previous mock images.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T5384

Differential Revision: https://secure.phabricator.com/D9658
2014-06-22 11:09:05 -07:00
Chad Little
fc2588d6e2 Add table headers to Pholio Mock History table
Summary: Adds a basic "Revision {$num}" table header

Test Plan: Actually spend more time testing various depth layouts.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T5383

Differential Revision: https://secure.phabricator.com/D9648
2014-06-22 08:48:05 -07:00
Chad Little
fa278fcb08 CSS polish, Pholio
Summary:
Minor things

- Fades out comment icon on hover
- Adds hover to inline comment images
- moves mask position to just the image, and not the transparent border

Test Plan: Tested all of these items on various mocks

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9631
2014-06-19 11:28:01 -07:00
Chad Little
ca801c7ad4 PHUIImageMask
Summary: Adds a PHUI class for display images on a center point, with or without a mask.

Test Plan:
I am bad a math, so like, check that for me please. I tested using Photoshop. Class may need tweaked depending how we store the inline-comment coords.

{F167829}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9614
2014-06-18 14:09:37 -07:00
epriestley
0efa1ca643 Make the Pholio download button actually download
Summary:
  - When the button is clicked, actually download the file or image.
  - Add aural hints for the icon-only buttons.
  - Use a "photo" icon for "view raw image", so the "arrows pointing outward" icon can be used for "fullscreen" some day.

Test Plan: Clicked link, got a download.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Differential Revision: https://secure.phabricator.com/D9574
2014-06-16 09:15:25 -07:00
Chad Little
2f5dedc97e More Pholio CSS updates
Summary: Pholio CSS tweaks and fixes, many little nudges

Test Plan:
Reload Pholio Mock page

{F167109}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9566
2014-06-15 21:10:12 -07:00
epriestley
77efdb6f35 Treat Pholio image descriptions as Remarkup, not plain text
Summary: Fixes T5283.

Test Plan: See screenshots.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T5283

Differential Revision: https://secure.phabricator.com/D9549
2014-06-15 10:27:40 -07:00
epriestley
dcf3b4d322 Reduce Pholio brokenness for non-image files
Summary:
Ref T5359. When users upload non-image file types (PDFs, text files, whatever), Pholio currently chokes in a few places. Make most of these behaviors more reasonable:

  - Provide thumbs in the required sizes.
  - Predict the thumb size of these files correctly.
  - Disable inline comments.
  - Make "View Fullsize" and "Download" into buttons. These mostly-work. Download should probaly really download, but CSRF on forms is a bit of a pain right now.

Test Plan: See screenshots.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T5359

Differential Revision: https://secure.phabricator.com/D9548
2014-06-15 08:03:04 -07:00
epriestley
19ed6a1ad6 Show inline counts on the thumb grid in Pholio
Summary: This is a little rough visually but the actual number works fine.

Test Plan: {F166844}

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Differential Revision: https://secure.phabricator.com/D9547
2014-06-15 07:56:07 -07:00
Chad Little
85870e79aa Switch Pholio over to lighter layout.
Summary: Gets rid of all the dark css.

Test Plan:
Do it live.

{F166665}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9545
2014-06-15 07:44:12 -07:00
epriestley
7ce8a1f437 Turn thumbs into a history grid thing
Summary:
This could probably use some refinement (and, like, explanatory text, and stronger cues about what rows and columns mean) but feels fairly good to me, at least on test data.

I didn't do any scrolling for now since we have to do full height on mobile anyway I think. I did swap it so the newer ones are on top.

Left/right navigate you among current images only, but you can click any thumb to review history.

Removed history view since it's no longer useful.

Some things that would probably help:

  - Some kind of header explaining what this is ("Mock History" or something).
  - Stronger visual cue that columns are related by being the same image.
  - Clearer cues about obsolete/deleted images (e.g., on the stage itself?)
  - Maybe general tweaks.
  - Maybe a placeholder (like a grey "X") for images which have been deleted.

(I'm planning to add comment counts too, which I think will be pretty useful, but that felt good to put in another diff.)

Test Plan: See screenshots.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Differential Revision: https://secure.phabricator.com/D9543
2014-06-14 21:12:19 -07:00
Chad Little
2bbafcc924 Use comment icon for Pholio Inline Comments
Summary: Uses FontAwesome CSS icons

Test Plan:
Check draft and normal states. Click.

{F166611}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9544
2014-06-14 21:01:39 -07:00
epriestley
0cc0782eaf Completely remove Pholio right gutter
Summary:
  - Moves the right-hand gutter under the image.
  - Moves size information to the upper right.
  - This is transitional, on the way toward something more like the mocks in D9534.

Test Plan: See screenshot.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Differential Revision: https://secure.phabricator.com/D9538
2014-06-14 19:23:04 -07:00
epriestley
942f504893 Remove inline gutter in Pholio
Summary: This greatly simplifies inline comments while retaining their functionality. This is probably not where we want to end up, but will let us figure out what we're doing with the stage without worrying about inlines.

Test Plan: See screenshots.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Differential Revision: https://secure.phabricator.com/D9537
2014-06-14 18:41:45 -07:00
epriestley
fc2c3a5ca8 Increase finesse of inline comments in Pholio
Summary:
  - Hide inline areas on mobile, and when the mouse cursor is not on the stage.
  - Show small icon markers instead of areas.
  - Yellow icons show draft comments; pink icons show final comments.

Test Plan: {F166544}

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Differential Revision: https://secure.phabricator.com/D9536
2014-06-14 18:40:52 -07:00
Chad Little
45b827c66e Touch up Pholio
Summary: Uses common CSS spacing, tweaks some colors, increases viewport size to very limits.

Test Plan:
Test large and small images, various breakpoints. Able to more easily review mocks.

{F166500}

{F166501}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9534
2014-06-14 17:08:24 -07:00
Chad Little
f801c8fed9 Use PHUIPinboard UI for embedding Pholio Mocks
Summary: Changes the old dark embed to match the PinboardView. Retains ability to target individual files. Removes "carousel" of files (not super useful?)

Test Plan:
Tested embedding Mocks, with and without targeting specific files. Tested Pholio Pinboard, Macro Pinboard.

{F166451}

{F166452}

{F166453}

{F166454}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9531
2014-06-14 12:11:19 -07:00
Chad Little
b2f3001ec4 Replace Sprite-Icons with FontAwesome
Summary: The removes the sprite sheet 'icons' and replaces it with FontAwesome fonts.

Test Plan:
- Grep for SPRITE_ICONS and replace
- Grep for sprite-icons and replace
- Grep for PhabricatorActionList and choose all new icons
- Grep for Crumbs and fix icons
- Test/Replace PHUIList Icon support
- Test/Replace ObjectList Icon support (foot, epoch, etc)
- Browse as many pages as I could get to
- Remove sprite-icons and move remarkup to own sheet
- Review this diff in Differential

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin, hach-que

Differential Revision: https://secure.phabricator.com/D9052
2014-05-12 10:08:32 -07:00
Bob Trahan
496a7d8967 Transactions - make edit transactions that are grouped work nicely
Summary: ...the key is to move a layer lower and beam down the updated comment. There is a wee bit of Javascript gymnastics going on here. Fixes T4608.

Test Plan: made a comment + resolve. clicked edit and made changes. noted transaction updated correctly and "history" link worked. edited again to a deletion and noted the "this is deleted" looked right and history link still worked

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin, chad

Maniphest Tasks: T4608

Differential Revision: https://secure.phabricator.com/D8702
2014-04-04 12:23:22 -07:00
Chad Little
94d0704fdb Add objectheaders to new View
Summary: This adds the 'PHUIObjectBox' to nearly every place that should get it. I need to comb through Diffusion a little more. I've left Differential mostly alone, but may decide to do it anyways this weekend. I'm sure I missed something else, but these are easy enough to update.

Test Plan: tested each new layout.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, aran

Differential Revision: https://secure.phabricator.com/D7162
2013-09-28 15:55:38 -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
2dcfcb0011 Fix embed icon colors in Pholio.
Summary: Fixes T3598. Swapped the colors to white.

Test Plan: review embedded mock in task

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T3598

Differential Revision: https://secure.phabricator.com/D6506
2013-07-20 10:53:45 -07:00
Gareth Evans
38778a8b84 Parse inline comments via remarkup engine
Summary: Inline comments weren't haven't remarkup applied. Fixes T3137

Test Plan: Added some inline comments, checked that they had remarkup applied. Also checked in the real time preview.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T3137

Differential Revision: https://secure.phabricator.com/D6024
2013-05-24 05:14:32 -07:00
epriestley
e5af167ec9 Cleanup chaos/order modes for Firefox
Summary:
  - Moves z-index rules to z-index CSS.
  - Fixes Order mode in Firefox with JS. ;_;

Test Plan: Used Order mode in FF, Safari, Chrome.

Reviewers: AnhNhan, chad, btrahan

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5740
2013-04-20 07:53:04 -07:00
Lauri-Henrik Jalonen
404d514d0e Pholio inline comment now include a thumbnail and link
Summary: Pholio inline comment now include a thumbnail and link to the Image being commented on

Test Plan: {F36331}

Reviewers: chad, epriestley

Reviewed By: epriestley

CC: aran, Korvin, btrahan

Maniphest Tasks: T2709

Differential Revision: https://secure.phabricator.com/D5375
2013-03-20 05:39:36 -07:00
Lauri-Henrik Jalonen
dcdf207266 Remarkup allows to point a specific image in a Mock set
Summary: One can point to spesific image in a Mock set using {Mxx|yy} syntax

Test Plan: {F35373}

Reviewers: chad, epriestley

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Maniphest Tasks: T2710

Differential Revision: https://secure.phabricator.com/D5322
2013-03-14 09:38:56 -07:00
epriestley
cd5038e973 Support basic swipe gestures in Pholio
Summary:
Ref 2700. No sexy animation yet, but allows you to swipe left and right to switch photos. Generally feels pretty good to me.

Also fixes a left/right but and a bug where taps could be interpreted as gestures and simplifies some touch code.

derpdog

Test Plan:
Swiped left and right in Pholio.

{F35239}

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5309
2013-03-09 13:53:32 -08:00
Lauri-Henrik Jalonen
76880916d0 Pholio mocks embed in a fancy way
Summary: Pholio mocks are now embed in a fancy way

Test Plan: {F34804}

Reviewers: epriestley

Reviewed By: epriestley

CC: chad, aran, Korvin, AnhNhan

Maniphest Tasks: T2626

Differential Revision: https://secure.phabricator.com/D5249
2013-03-07 08:23:45 -08:00
epriestley
1f51d023af Improve Pholio on mobile
Summary:
Ref T2644. This isn't perfect, but makes Pholio more-or-less usable on mobile. In particular:

  - Inline comments drop below the image.
  - Clicking the image lightboxes a full size version so you can scroll around it and inspect details.
  - Clicking it again dismisses it.

Things that aren't good:

  - Can't add inline comments. This seems complicated and not critical.
  - Can't easily figure out which inline comments go where since there's no hover. Maybe let you tap them? Not sure if we really need this.
  - Thumbs are between image and image data. I'm planning to get rid of the thumbs and do swipe left/right instead.
  - It would be nice to scroll the lightbox to center on the part of the image you tapped. I just thought of this, though.

Test Plan:
{F34640}
{F34641}
{F34642}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2644

Differential Revision: https://secure.phabricator.com/D5232
2013-03-05 12:30:58 -08:00
epriestley
2fe3cd72bf Fix thumb selection style
Summary: I broke the code which shows which thumb is currently selected when I made the URLs fancy, by changing the container from `div` to `a`.

Test Plan: Verified current thumb is now highlighted.

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5231
2013-03-05 12:30:39 -08:00
epriestley
bd4ce3580c Fix inline highlight behaviors for Pholio
Summary:
Some recent CSS change tweaked these out a bit. They were also sort of weird looking after fixing the double-draw thing:

  - Make them work properly;
  - make the implementation a bit simpler;
  - make them clearer visually.

Also fix a bug where "border" and "fill" were accidentally reversed.

Test Plan:
{F34625}

(The highlight on the reticle is a little hard to pick out in the screenshot, but very obvious in practice.)

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5228
2013-03-05 12:29:39 -08:00
epriestley
035067f83c Show information about each image in the right-side gutter
Summary: Fixes T2646. Title and description are placeholders. Styles on this are a bit rough.

Test Plan: {F34623}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2646

Differential Revision: https://secure.phabricator.com/D5226
2013-03-05 12:23:17 -08:00
epriestley
5a7d9fb522 Show loading state and fix reticles in Pholio
Summary:
Fixes T2643. Show a loading state (currently just making the image transparent, but we could do something fancier) when an image is loading.

Fixes T2648. Cleans up the double draws we were previously doing.

Makes thumbnails react to mousedown in addition to click so they feel a little snappier. Make them stop reacting to control click, command click, etc.

Test Plan: Used `setTimeout()` to simulate a 1s image load delay, switched between images.

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2643, T2648

Differential Revision: https://secure.phabricator.com/D5219
2013-03-04 16:59:16 -08:00
epriestley
9aedb3c3c1 Clearly show draft vs nondraft inline comments
Summary: Fixes T2638; mark draft inlines in Pholio in a way similar to Differential.

Test Plan: {F34553}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2638

Differential Revision: https://secure.phabricator.com/D5217
2013-03-04 16:50:22 -08:00
Chad Little
21db19016c Update PholioMockView Styles.
Summary: Less janky sidebar, new 'photoshop-like' texture for image background.

Test Plan: Tested mocks with and without side comments, hover over marked squares. Tested small and large images.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5216
2013-03-04 16:01:27 -08:00
Chad Little
0dde637059 Pholio CSS touchups for inline comments.
Summary: Tightened up spaces, made inline area more 'inset', tweaked colors to match timeline view.

Test Plan: Tested mocks with and without inline comments.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5188
2013-03-03 09:19:07 -08:00
Chad Little
362511c3ae Dark description tweaks for Pholio.
Summary: Uses a dark description area and white text for pholio mocks. Also touches up the borders a little bit.

Test Plan: review pholio, files, and macros for visual changes intended or not.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5143
2013-02-27 20:10:30 -08:00
Lauri-Henrik Jalonen
5d30b1b4fb Various highlights
Summary:
Highlight thumb for image user is currently viewing.
Highlight selection when user mouseovers it's inline(on side).

Test Plan: {F33990}

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2446

Differential Revision: https://secure.phabricator.com/D5134
2013-02-27 10:45:51 -08:00
epriestley
26f8e76ee2 When an image is too wide in Pholio, scale it down
Summary:
Currently, if an image is too wide for the viewport, we freak out. Instead, scale it down.

This means we must also scale down all the rectangles on it, which is why this is tricky. However, all the draw/load separation has made it reasonably straightforward.

We'll possibly need to add some kind of "view full size" thing. I'm planning to add an element which shows "85%" or whatever if it's currently scaled.

Test Plan:
Before:

{F33607}

After:

{F33608}

Reviewers: chad, ljalonen

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5088
2013-02-23 06:28:34 -08:00
epriestley
5fdaebf158 Always show inline comment column in Pholio
Summary:
  - Always show the column so there's no jumping around when comments are added.
  - Set width to 320px so we can mobile it (not 100% sure how this will work yet).
  - When there are too many comments, scroll them internally.

Test Plan: {F33552}

Reviewers: ljalonen, chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5071
2013-02-22 10:29:56 -08:00
epriestley
53f527f71f Improve thumbnails in pholio mock view
Summary:
  - Use "preview" instead of "thumb" so we don't get a white background.
  - Give this element a darker gutter to separate it a little bit visually.
  - Put every thumb on a square hit target.
  - Add some color/border/hover stuff.
  - Ship down image dimensions.
  - Reduce thumb size to 140 so we can fit 2-up on mobile when we get there.

Test Plan:
Before:

{F33545}

After:

{F33546}

Reviewers: chad, ljalonen

Reviewed By: ljalonen

CC: aran

Differential Revision: https://secure.phabricator.com/D5070
2013-02-22 06:53:54 -08:00
Lauri-Henrik Jalonen
29d6180e35 Show drafts and inline comments
Summary:
Show drafts for users that made them.
Show inline comments beside image, highlights them when user mouseovers selection.
Allow users that can view mock to add inline comment instead of only allowing users that can edit mock to add inline comment.

Test Plan:
Verified that inline comments are shown beside image. Verified that only drafts for current user are shown. Verified that inline comment is
highlithed when user mouseovers their selection.

Reviewers: epriestley

CC: aran, Korvin

Maniphest Tasks: T2446

Differential Revision: https://secure.phabricator.com/D4929
2013-02-13 07:23:51 -08:00
epriestley
4004621d76 Make Pholio selection reticle prettier
Summary:
The selection reticle in Pholio is functional but not very pretty right now. Make it look a little nicer.

  - Using `box-sizing: border-box;` allows us to get rid of the `x - 1` and `y - 2` stuff.
  - I draw the reticle with two elements: one mostly-transparent which creates a fill, and one fully opaque to create a strong dashed border.

Test Plan: {F31803}

Reviewers: ljalonen, chad

Reviewed By: chad

CC: aran, kchr

Differential Revision: https://secure.phabricator.com/D4836
2013-02-07 06:26:36 -08:00
Lauri-Henrik Jalonen
8ae7de51f9 Select portions from mock
Summary: Applied fixes for issues mentioned in D4737#1&2

Test Plan: Verified that scripts seem to work as intended.

Reviewers: epriestley

CC: aran, Korvin

Maniphest Tasks: T2446

Differential Revision: https://secure.phabricator.com/D4782
2013-02-01 11:07:54 -08:00
Lauri-Henrik Jalonen
683df86d54 Pointer to show on pholio thumbnails
Summary: Pointer to show on pholio thumbnails

Test Plan: Pointer is shown

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4720
2013-01-29 04:22:49 -08:00
Lauri-Henrik Jalonen
8ac1afc81a Show all photos in a Pholio mock and allow switching between them
Summary: Mock page now shows all images. Switching between images is done by clicking thumbnails.

Test Plan: Verified that all images are shown. Verified that by clicking thumbnail the image clicked will show.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Maniphest Tasks: T2427

Differential Revision: https://secure.phabricator.com/D4698
2013-01-28 11:19:01 -08:00
Lauri-Henrik Jalonen
72a92d438f Pholio tile to home page and mock to show first image
Summary:
Pholio tile to show up on home page

First image is shown at mock page.

Test Plan: Pholio app shows up on home page. First image is shown at mock page.

Reviewers: epriestley

CC: aran, Korvin

Maniphest Tasks: T2356

Differential Revision: https://secure.phabricator.com/D4553
2013-01-20 09:30:46 -08:00