atdrago / negative

An app for making visual comparisons

An app for making visual comparisons.

Follow @NegativeJS on Twitter for important updates.

Download

• Negative v0.10.3 for Mac OS X

User Documentation

Please check negative/releases for details on changes between versions.

• Usage

Contributing

All contributions are welcome!! Please check negative/issues for things that need attention, or feel free to create your own. Please make sure you create an issue first, and then do the work and a submit a PR.

Build Negative.app

Currently only Mac OS X is supported.

1. Install Node.js >= v8
2. git clone https://github.com/atdrago/negative.git
3. cd negative
4. npm install
5. npm run build
6. Locate and copy dist/Negative-darwin-x64/Negative.app to your Applications folder

Testing

Important: Tests get run against the built app. If you are attempting to run tests and the results are not what you expected, you need to npm run build again.

1. npm run build
2. npm test

Developing

Compiling

• gulp - Compile, combine, and minify files for the renderer process. This isn't necessary for files in the main process. Make sure this is running when working on UI.

NPM Scripts

• npm start - Start the app with the following environment variables:
  • NODE_ENV=development
  • ELECTRON_ENABLE_LOGGING=true
  • ELECTRON_ENABLE_STACK_DUMPING=true
• npm run build - Build the production app
  1. Compiles JavaScript and Sass
  2. Copies necessary files to ./release/
  3. Runs npm install --production in ./release/
  4. Builds the app moves it to ./dist/
• npm run lint - Run ESLint
• npm test - Run Mocha tests
• npm run travis
  1. Run build
  2. Run test
• npm run open - Starts the app from dist/Negative-darwin-x64/Negative.app
• npm run build-artifacts
  1. Run build-sign
  2. Create dist/Negative-darwin-x64/Negative-v0.10.3.dmg
  3. Create dist/Negative-darwin-x64/Negative-v0.10.3-mac.zip

About

Created by Adam Drago. Built on Electron.

negative's Issues

Add documentation and update README

• Add documentation from YUIDoc
• Update README
  • Document each script
  • Document contributing guidelines
  • Ensure on-boarding process is smooth
  • Document dependencies and versions of node that are needed (node v6 does not work)
  • Move demo animation to docs/usage.md
  • Add small image of Negative slightly shifted over a flower 😏🌸
  • Add blurb about downloading the app from /releases to the "User Documentation" section
  • Link directly to the latest dmg
  • Link to the twitter account ("follow @negativejs for updates")
  • Update demo animation

Menus do not update

Steps to reproduce:

1. Close all windows
2. File > New Window

Wrong focus on start when settings window is focused on quit

1. Start Negative
2. Open Preferences
3. Quit
4. Start Negative

Negative window will not be focused.

Add CI

Use Travis CI to:

• Lint
• Build Negative and run unit tests

Settings don't save

Changing preferences items doesn't save

Disable menu items when no windows are open

The following menu items should be disabled when no Negative window is open:

• New Tab
• Close Tab
• Close Window
• Minimize
• All move submenu items
• Reload
• Show dev tools

Save zoom level on quit

Add manual shortcuts for Zoom

Since multiple accelerators cannot trigger the same function (electron/electron#5256), implement manual shortcuts for:

• Command + = (Zoom In)
• Command + _ (Zoom Out)

Reference: https://github.com/sindresorhus/caprine/blob/297c96cce162e8d7b183d014e90f80013993ad67/browser.js#L78-L90

Add Locking

• Add shortcut Command + Control + L for locking
• Hide <nav> and show 🔒
• Add a test to make sure the "locked" class is added to the body

Visual indication that tab has content

There should be some type of visual indication that a tab has content. Maybe a different background color?

Window is not focused initially

Add tests

• Negative > About Negative
• Negative > Preferences...
• Negative > Quit Negative
• File > New Tab
• File > New Window
• File > Close Tab
• File > Close Window
• File > Close
• Edit > Undo
• Edit > Redo
• Edit > Copy
• Edit > Paste
• View > Capture
• View > Clear
• View > Actual Size
• View > Zoom In
• View > Zoom Out
• Window > Minimize
• Window > Fit Window to Image
• Window > Next Tab
• Window > Previous Tab
• Window > Next Tab and Resize
• Window > Previous Tab and Resize
• Window > Move > Left by 1px
• Window > Move > Right by 1px
• Window > Move > Up by 1px
• Window > Move > Down by 1px
• Window > Move > Left by 10px
• Window > Move > Right by 10px
• Window > Move > Up by 10px
• Window > Move > Down by 10px

Closing tabs from the beginning causes tabIndex to be lost

Tab Scrolling UI Updates

• Hide horizontal scroll bar
• Tabs should shrink to some threshold
• When tabs reach the threshold, let them scroll
• Follow tabs as they scroll

If there is a single tab, dragging it should drag the window

• Add -webkit-app-region: drag; to .tabbar
• Add -webkit-app-region: no-drag; to .tab if there are multiple tabs

Update tips

Tips need to be updated with the latest keyboard shortcuts

Update demo animation with new tab UI

Tabs moved from the right side of the window to the left. The demo animation should be updated to reflect this change.

Tabs wrap

Tabs wrap when they overflow the window causing incorrect region of screen to be captured. Tabs should scroll when they overflow.

Cannot capture after settings window opened

There is a bug where menu items do not get re-enabled after going into the Settings window.

Steps to Reproduce:

1. Open Negative
2. Negative > Preferences...
3. Close Preferences and focus the Negative window
4. Observe, Capture is disabled

Add settings view

Add settings view with:

• Checkbox to toggle tips
• Should close with Command+W
• Should not be resizable

Save selected tab on quit

The last tab that was selected should still be selected when the app is re-opened

Use tabs instead of spaces

New icon!

We need a new icon!

Does not work on Node >= v6.0.0

Uncaught Exception:
Error: Module version mismatch. Expected 47, got 48.
    at Error (native)
    at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:158:20)
    at Object.Module._extensions..node (module.js:440:18)
    at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:169:18)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at bindings (/Users/dan/dev/negative/dist/Negative-darwin-x64/Negative.app/Contents/Resources/app.asar/node_modules/bindings/bindings.js:76:44)
    at Object.<anonymous> (/Users/dan/dev/negative/dist/Negative-darwin-x64/Negative.app/Contents/Resources/app.asar/node_modules/ref/lib/ref.js:5:47)

Open features

• Drag and drop
• File -> Open...

Save tab/window information until window closed, even after quit

The data for each window (tabs, imageSrc, imageDimensions, undoManager) should be saved and be accessible after quit and relaunch of the app. This information should only get deleted once the window containing it is closed.

Add ability to zoom

Either a series of menu items or a text field

Menu items are not being disabled when no window

• Zoom In
• Zoom Out
• Next/Previous Tab menus
• Move - Can't be disabled because it has a submenu

Next/Previous tab shortcuts should be continuous

When navigating tabs using the window shortcuts (e.g., ⌘ + →), if the end of the tabs is reached, the tab on the opposite end of the tab list should be selected.

Restructure and redo build

• Create release directory
• Move relevant release files to release dir in gulp task 'release'
• Run gulp task 'release' in build script
• Include only release folder in grunt build script

Error when opening new window if devTools are open

Uncaught Exception:
TypeError: Cannot set property 'undoManagers' of undefined
    at EventEmitter.ipcMain.on (/Applications/Negative.app/Contents/Resources/app.asar/lib/negative.js:112:55)
    at emitTwo (events.js:106:13)
    at EventEmitter.emit (events.js:191:7)
    at EventEmitter.<anonymous> (/Applications/Negative.app/Contents/Resources/electron.asar/browser/api/web-contents.js:128:18)
    at emitTwo (events.js:106:13)
    at EventEmitter.emit (events.js:191:7)

Update build

• Update gulpfile to use ES6
• Use npm scripts for install

Deleting captured image is broken

Detachable tabs

Tabs should be able to drag out to a new window.

Option/shortcut to tint the interior of the window white

When trying to grab a screenshot of a dark design mocked up within an iPhone frame, it was hard to see if the edges of the Negative window were aligned with the edge of the design. It may be helpful to allow users to tint the interior of the window white or remove the tint all together.

Fix focusing windows on start

One window should be focused on start up. It should be the last focused window.

Reveal Differences

1. Screenshot current view
2. Find where pixels are not gray
3. Overlay a canvas with red translucent pixels for non-gray pixels

Add menu item for global hide/show

This is a fairly important feature and is somewhat hidden from the UI. Within the app, the only place it exists is within the Tips area. There should be a menu item that also triggers the global hide/show feature.

Selecting tabs does not work

Add new tab - position wrong

When adding a new tab, the tab should be inserted after the currently selected tab, not at the end of all the tabs.

Disable double two-finger tap and pinch zooming

Several menu items do not work

• Undo
• Redo
• Copy
• Paste
• Fit window to image
• Next tab
• Previous tab
• Next tab and resize
• Previous tab and resize
• Hide/Show "Close" vs "Close Window"

Dark Mode transitions conflicting with tab transitions

• Tabs no longer transition to their new position.
• Tabs fade when selected (they should not).

Remember window position on quit

External paste should update image dimensions

When pasting an image that was copied from an external app, the image dimensions should update to the pasted image's dimensions.

If possible, detect if the image is retina (2x) and set the image's dimensions to the calculated 1x dimensions.

Add "Reset..." menu item

Add ability to reset Negative. This would negate the need to restart the app during tests, potentially giving tests a nice speed bump. Could be useful for normal users too.

Probably as simple as:

1. Close all windows
2. Open new window

Needs:

• "Negative" -> "Reset..." menu item, under "Preferences" with separators on either side
• Dialog to confirm reset
• Test to confirm this works
• Use this to speed up tests (could be in a suite-wide afterEach)

Zoom features

• Input percentage
• Input dimensions
• Change name to "Scale" - Leaving as "Zoom" because it gives less of a feeling of permanence. "Scale" is used in apps like Preview to change the actual dimensions of the image.
• Save value on quit

Negative window not focused after install

After a fresh install, on start, the initial window is not focused.

Cannot quit when no windows are present

Add visual demo to README

README should include an animation or imagery that demos Negative usage.