Git Product home page Git Product logo

outliner's Introduction

Outliner

Quickly outline the shit out of some stuff!

You can try the current version here: http://outliner.setpixel.com/

Basically, it's for sequencing story ideas as quickly as possible. When you write a story, you can add a bunch of nodes or scenes to quickly outline the idea. Then you can use that as a scaffold when you write the full story/screenplay/document.

ENTER: add a node
TAB: change node type
Arrow up and down: change selection
COMMAND+ Arrow: change order

I'm writing this in all vanilla JS, trying not to use any backend code.

I'm using Google Drive Realtime API, and AWS SDK.

===============

Notes

make sure to npm install and bower install inside the project folder

New Folder Structure

All project files now live in the assets folder.

assets ├── fonts ├── img ├── js └── scss

Using Gulp

$ cd /path/to/outliner  
$ gulp

gulpfile.js lives in /build and takes params from /config the initial gulpfile.js is in the root.

When running gulp a script tag gets added to the index.html for browser reloading, after shutting down gulp the script tag gets removed, be careful when you commits when gulp is running as you might commit the script inside of index.html

Adding a package with bower

$ bower install --save-dev moment
$ cp /bower_components/path/to/js /vendor

Babel

/assets/js/main.js is the main file which imports all of the other .js files

When gulp is ran it will transpile es2015 to es5 and add it to /tmp called main.js

Any js library in /vendor will be concatenated and added to the /tmp folder called vendor.js

These two files are then concatenated and minified and put into public/assets/js/app.min.js

LEARN ES6 and use it now

SCSS

Styles are now located in /assets/scss/

main.scss is the base file which imports all other files.

look at the import structure as the files are now named and relocated

Gulp is using autoprefixer so you can remove any vendor prefixing

File Changes

Removed css,data,js folders

Changed paths for imgs and fonts to new paths located in /public/assets/{fonts,imgs}

Added a .gitignore since we dont need to commit some folders

Google

You probably need to allow localhost:3000 as an allowed referrer if you plan on using the built in server

outliner's People

Contributors

setpixel avatar zjrosen1 avatar

Stargazers

Tyler Butler avatar Kalan avatar R'Laf avatar  avatar Vilson Vieira avatar Kris avatar space cow boi avatar daniel baak avatar Pedro Paulo Amorim avatar Joohun, Maeng avatar  avatar not curtis avatar Winston Fassett avatar  avatar Stefano Cieri avatar Leonardo Borges Avelino avatar  avatar Eriks Vitolins avatar  avatar

Watchers

 avatar James Cloos avatar Kris avatar

outliner's Issues

Bugggy text duplicatin in node with outliner

Steps to replicating Bug:

  1. While on a node with text in it, Click "Enter" to create new empty node, underneath.
  2. You automatically on the "new" (empty) node
  3. Now immediately click on another node with text
  4. Then click inspector
  5. Then click in the "new" node you created in step "2."

The text in the inspector of thwe previous node is copied into the "new" node.

Pan with wheel button

If I pan with wheel button to the end of app. UI locks up and have to restart chrome

Inspector

Requests:

  1. Ability to pull out more from side
  2. Ability to nest inspector on left and side.

where to write?

I find myself wanting to write and edit in the nodes themselves. But it has not been the greatest experience with the lack of space and hidden text (...)

If the Instructor is in fact the main place to write and edit text, I feel it should be clear, perhaps it should be on the left side or pop more by default.

If nodes are a place to write and edit i suggest,
nodes expand as the amount of text increases, can have a collapse/expand button
another ideas could be, active node pop up in foreground, or literally turns into the inspector.

Move Canvas Tool

Request an easy, more direct why to move areas that are off screen

Eg- Hand tool in Photoshop or Illustrator

Project Name and discription

I would like to be able to see my project name as i work.

Eg- Mad Max_V1 / date / last updated, by who

Maybe place at bottom left and corner under outliner logo

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.