https://github.com/1999/inbox-sample

Sample HTML like inbox.google.com implemented with WebComponents, Redux and webpack
https://github.com/1999/inbox-sample

Last synced: 8 months ago
JSON representation

Sample HTML like inbox.google.com implemented with WebComponents, Redux and webpack

• Host: GitHub
• URL: https://github.com/1999/inbox-sample
• Owner: 1999
• Created: 2016-06-16T04:06:45.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-08-26T07:46:07.000Z (over 8 years ago)
• Last Synced: 2025-02-17T02:15:46.048Z (11 months ago)
• Language: JavaScript
• Homepage: https://1999.github.io/inbox-sample
• Size: 427 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Sample HTML like inbox.google.com

## Development

```bash

git clone git://github.com/1999/inbox-sample.git

cd inbox-sample

nvm use # if you use nvm for managing node versions

npm install

./node_modules/.bin/webpack-dev-server

open http://localhost:8080/webpack-dev-server/

```

## UI elements:

* header with:

  * sandwich icon

  * either searchbar or text + icons

  * some icons to the right

  * avatar

* nav which is either hidden to the left or not

* content which is divided into days. Each day has so-called tasks which are either new (bold) or not. Also task can be opened, which means that it's not new anymore.

## Store

```

// tasks are more like threads

tasks: [{

    id,

    lastDate // thread's last message date

    avatar // thread's last message (not sent!) avatar (ref users)

    participants: [users]

    checked // either thread is checked or not

    open // either thread is open or not

    menuItem // tag

    subject

    active // thread is not open, just active

    messages: [{

        active // message is not open, just active

        date

        sender // id (ref users)

        recipients: [users]

        message

        conversationExpanded: bool

        expanded // whether message is open or not

        advanced // advanced mode

    }]

}]

loading: bool // show spinner for whole page

menu: {

    show: bool

    groups: [

        {

            id (gtd, gmail, bundled, unbundled)

            title

            items: [{

                id

                active: bool

                icon

                color

                title

            }]

        }

    ]

}

pinned: bool // show only pinned

conversations: bool // show conversations popup

apps: bool // show apps popup

users: [{

    email

    title

    avatar

}]

```