app.html

<!doctype html>
<html>
<head>

  <title>Nautilus Replacement</title>

  <script type="text/javascript"
    src="bower_components/ace-builds/src-min-noconflict/ace.js"></script>
  <script type="text/javascript"
    src="bower_components/angular/angular.min.js"></script>
  <script type="text/javascript"
    src="bower_components/angular-aria/angular-aria.min.js"></script>
  <script type="text/javascript"
    src="bower_components/angular-animate/angular-animate.min.js"></script>
  <script type="text/javascript"
    src="bower_components/angular-messages/angular-messages.min.js"></script>
  <script type="text/javascript"
    src="bower_components/angular-material/angular-material.min.js"></script>
  <script type="text/javascript"
    src="node_modules/angular-filesize-filter/angular-filesize-filter.js"></script>
  <script type="text/javascript"
    src="bower_components/angular-ui-ace/ui-ace.js"></script>

  <link rel="stylesheet"
    href="bower_components/material-design-icons/iconfont/material-icons.css">
  <link rel="stylesheet"
    href="bower_components/angular-material/angular-material.min.css">
  <link rel="stylesheet"
    href="style.css">

</head>
<body ng-app="nautilusReplacement">

  <div id="appRoot"
    ng-controller="WindowController as $w"
    layout="column"
    ng-cloak
    layout-fill>

    <md-toolbar md-theme="toolbar">
      <div class="md-toolbar-tools" layout="row">
        <img src="icon.png" style="height:36px;width:36px;" />
        <md-button class="md-icon-button">
          <span class="material-icons">
            arrow_back
          </span>
        </md-button>
        <md-input-container flex>
          <input ng-model="$w.location.str" />
        </md-input-container>
        <md-menu md-offset="0 48">
          <md-button class="md-icon-button"
            ng-click="$w.openMenu($mdMenu, $event)">
            <span class="material-icons">
              menu
            </span>
          </md-button>
          <md-menu-content width="4">
            <md-menu-item>
              <md-button ng-click="$w.newWindow($event)">
                <md-icon class="material-icons">
                  web_asset
                </md-icon>
                New window
              </md-button>
            </md-menu-item>
            <md-menu-item>
              <md-button ng-click="$w.showSearch($event)">
                <md-icon class="material-icons">
                  search
                </md-icon>
                Search
              </md-button>
            </md-menu-item>
            <md-divider></md-divider>
            <md-menu-item>
              <md-button>
                <md-checkbox ng-model="$w.showHidden"
                  aria-label="Show Hidden">
                  Show hidden
                </md-checkbox>
              </md-button>
            </md-menu-item>
            <md-divider></md-divider>
            <md-menu-item>
              <md-button ng-click="$w.showSettings($event)">
                <md-icon class="material-icons">
                  settings
                </md-icon>
                Settings
              </md-button>
            </md-menu-item>
            <md-menu-item>
              <md-button ng-click="$w.showAbout($event)">
                <md-icon class="material-icons">
                  info_outline
                </md-icon>
                About
              </md-button>
            </md-menu-item>
            <md-menu-item>
              <md-button ng-click="$w.closeWindow($event)">
                <md-icon class="material-icons">
                  close
                </md-icon>
                Close window
              </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
    </md-toolbar>

    <div flex>
      <div layout="row"
        layout-fill>
        <div class="sidebar">
          <section layout="column">
            <md-subheader class="md-primary">
              Favourites
            </md-subheader>
            <md-list>
              <md-list-item ng-click="$w.goHome($event)">
                <span class="inset material-icons">
                  home
                </span>
                My home
              </md-list-item>
              <md-list-item ng-repeat="$item in $w.favourites.contents"
                ng-click="$w.handleClick($item, $event)">
                <span class="inset material-icons">
                  folder
                </span>
                {{ $item.basename }}
              </md-list-item>
            </md-list>
          </section>
        </div>
        <div flex
          layout>
          <md-content layout="column"
            style="z-index:10;"
            md-whiteframe="2dp"
            flex>
            <header>
              <div class="pwd-breadcrumbs md-caption"
                layout-align="start center"
                layout="row">
                <span style="">
                  <a href="#"
                    class="md-button md-no-style md-primary"
                    style="min-width: auto;padding-left: 8px;padding-right: 8px;line-height: 24px;min-height: 24px;"
                    ng-click="$w.handleClick({uri:'/'}, $event)">
                    /
                  </a>
                  <md-icon class="material-icons">
                    chevron_right
                  </md-icon>
                </span>
                <span ng-repeat="part in $w.location.uriParts"
                  ng-if="part.uri && !$last">
                  <a href="#"
                    class="md-button md-no-style md-primary"
                    style="min-width: auto;padding-left: 8px;padding-right: 8px;line-height: 24px;min-height: 24px;"
                    ng-click="$w.handleClick(part, $event)"
                    ng-bind="part.basename">
                  </a>
                  <md-icon class="material-icons">
                    chevron_right
                  </md-icon>
                </span>
              </div>
              <div class="pwd-base"
                style="margin-top: 8px;"
                layout="row"
                layout-align="start center">
                <span class="material-icons"
                  style="margin-right: 8px;font-size:36px;height:36px;width:36px;">
                  folder_open
                </span>
                <h1>{{ $w.location.dirname }}</h1>
              </div>
              <div class="quick-actions">
                <md-menu md-offset="24 48">
                  <md-button class="md-accent"
                    ng-click="$w.openMenu($mdMenu, $event)">
                    <md-icon class="material-icons">
                      create
                    </md-icon>
                    Create new
                    <md-icon class="material-icons">
                      arrow_drop_down
                    </md-icon>
                  </md-button>
                  <md-menu-content width="3">
                    <md-menu-item>
                      <md-button ng-click="$w.onClickCreateFile($event)">
                        <md-icon class="material-icons">
                          add
                        </md-icon>
                        File
                      </md-button>
                    </md-menu-item>
                    <md-menu-item>
                      <md-button ng-click="$w.onClickCreateFolder($event)">
                        <md-icon class="material-icons">
                          create_new_folder
                        </md-icon>
                        Folder
                      </md-button>
                    </md-menu-item>
                    <md-menu-item>
                      <md-button ng-click="$w.onClickCreateLink($event)"
                        ng-disabled="true">
                        <md-icon class="material-icons">
                          link
                        </md-icon>
                        Link
                      </md-button>
                    </md-menu-item>
                  </md-menu-content>
                </md-menu>
              </div>
            </header>
            <section style="overflow-y: scroll;overflow-x: hidden;"
              ng-if="$w.showEditor"
              flex>
              <div ui-ace="$w.aceConfig"
                style="font-size:16.6px;"
                layout-fill></div>
            </section>
            <section style="overflow-y: scroll;overflow-x: hidden;"
              ng-if="!$w.showEditor"
              flex>
              <md-list>
                <md-list-item ng-class="{'hidden-obj': $item.isHidden, 'dir-obj': $w.isDirectory($item)}"
                  ng-if="!$last && ( !$item.isHidden || $w.showHidden )"
                  ng-repeat="$item in $w.location.contents | orderBy:'type'"
                  ng-click="$w.handleClick($item, $event)">
                  <span class="inset">
                    <md-icon class="material-icons"
                      ng-if="$w.isDirectory($item)">
                      folder
                    </md-icon>
                    <md-icon class="material-icons"
                      ng-if="!$w.isDirectory($item)&&!$w.hasCustomIcon($item)">
                      &nbsp;
                    </md-icon>
                    <span class="custom-icon"
                      ng-if="$w.hasCustomIcon($item)">
                      <img ng-src="{{ $w.customItemIcon($item) }}"
                        style="width:24px;height:24px;">
                    </span>
                  </span>
                  {{ $item.basename }}
                  <span ng-if="$item.info[0] === 'd'">/</span>
                  <span flex></span>
                  <span class="obj-size md-caption">
                    {{ $item.size | filesize }}
                  </span>
                </md-list-item>
              </md-list>
              <div class="lock-size"
                layout="row"
                layout-align="center center">
                <md-fab-speed-dial md-open="$w.fabSpeedDialOpen"
                  md-direction="up"
                  class="md-fling"
                  ng-mouseenter="$w.fabSpeedDialOpen=true"
                  ng-mouseleave="$w.fabSpeedDialOpen=false">
                  <md-fab-trigger>
                    <md-button aria-label="menu"
                      class="md-fab md-accent">
                      <md-tooltip md-direction="left">
                        Create new ...
                      </md-tooltip>
                      <md-icon class="material-icons">
                        create
                      </md-icon>
                    </md-button>
                  </md-fab-trigger>

                  <md-fab-actions>
                    <md-button aria-label="Create new file"
                      class="md-fab md-raised md-mini"
                      ng-click="$w.onClickCreateFile($event)">
                      <md-tooltip md-direction="left">
                        File
                      </md-tooltip>
                      <md-icon class="material-icons">
                        add
                      </md-icon>
                    </md-button>
                    <md-button aria-label="Create new folder"
                      class="md-fab md-raised md-mini"
                      ng-click="$w.onClickCreateFolder($event)">
                      <md-tooltip md-direction="left">
                        Folder
                      </md-tooltip>
                      <md-icon class="material-icons">
                        create_new_folder
                      </md-icon>
                    </md-button>
                    <md-button aria-label="Create new link"
                      class="md-fab md-raised md-mini"
                      ng-click="$w.onClickCreateLink($event)"
                      ng-disabled="true">
                      <md-tooltip md-direction="left">
                        Link
                      </md-tooltip>
                      <md-icon class="material-icons">
                        link
                      </md-icon>
                    </md-button>
                  </md-fab-actions>
                </md-fab-speed-dial>
              </div>

            </section>
          </md-content>
        </div>
      </div>
    </div>
  </div>

  <script type="application/javascript"
    src="app.js"></script>