Electron based code editor modifications + addons -- 2

This project was successfully completed by cottoncat for $300 USD in 10 days.

Get free quotes for a project like this
Project Budget
$30 - $250 USD
Completed In
10 days
Total Bids
Project Description

I have been working on a code editor that is based on the open source framework called 'CodeMirror'. So far its gone pretty good, but there are some parts of this editor that i just done have time to do so I need someone to make the parts functional that I haven't got the time for.

Most of the hard work is done as code mirror does most of the editor based functionality.

The things that I need doing is mostly just css, jquery and some node functionality that I haven't got the time to do.

I have the source code for anyone who will work with me.

I'm not sending the code to anyone who doesn't get the project awarded to them, But I will send screen shots.

so this is what needs to be done:

1. There is a left icon bar that will change the content of the side bar (where the project files are - very similar to the 'Vistal Studio Editor' side bar). When each of the buttons is clicked then it will change the content of the side bar like a tab widget with the tabs horizontally aligned to the left.

The css for this far left icon bar also needs a little bit of css doing to it as its not done very good.

I would also like a nicely animated small tooltip that pops out to the right of the icons in this icons bar when mouse hovers.

This is how I need this set out - There will be a javascript object that will have a list of items that will be fed to an array and the content of each tab will be in another folder so ......


tab1: {

title: something,

file_name: [url removed, login to view],

// this is just for the default selected tag

isHighlighted: false



2. File tree view: I am using an already existing node module for the tree view (Project folder view). But I would like this styling to look like the project file tree view in atom editor.

There is also a menu option that will populate this. Just like the standard convention. file > open file || open project

this needs to be made functional.

Then the node module 'fs' that needs to be used to populate the tree model needs to be made functional.

When you click on one of these items then there will be a context menu. (Right click) and then an example of how to attach an action to that menu.

The populating of the files model must be asynchronous and have a small loader displayed in the file tree item while that part is still populating.

3. between the main editor and the project file there is a divider that needs to be resalable. I have already been able to get something working but its not good enough and for someone who is experienced with jquery and html this should be very easy.

There is also a small footer/bottom menu that will be able to be toggled. this needs to be done. I could do a simple add class etc with jquery but this section also needs to be resalable.

There will always be a part of the above menu visible with some clickable icons (this is future functionality and doesn't matter for now) but i just needed to let you know that the part now that is already visible needs to stay like that. all that needs doing is the toggling of the closing and opening and the divider between this bottom submenu and the main editor also needs to be re-sizeable.

please read the rest of the task desc in the attached files .......

Thank you

Completed by:

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online