Upgrade to Angular 4.0.0

- Upgrade dependencies - Modify code to work with Angular 4 - Move demo app into /example A few things are still broken but the app will at least compile and run.
HyperionGray · Feb 26, 2018 · 420d3c0 · 420d3c0
1 parent fa6754e
commit 420d3c0
Show file tree

Hide file tree

Showing 77 changed files with 3,005 additions and 113 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,6 @@
 .pub
 build
 pubspec.lock
+TODO
 venv
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,5 @@
+0.0.4
+=====
+
+- Rename from ng2_modular_admin to ng_modular_admin
+- Upgrade to Angular Dart 4.0.0
diff --git a/LICENSE b/LICENSE
@@ -1,7 +1,7 @@
 The MIT License (MIT)
 
 Original Work: Copyright (c) 2016 ModularCode
-Port to Angular2Dart: Copyright (c) 2016 Hyperion Gray LLC
+Port to Angular Dart: Copyright (c) 2016 Hyperion Gray LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/MAINTENANCE.md b/MAINTENANCE.md
@@ -2,24 +2,24 @@
 
 **To upgrade Bootstrap:**
 
-1. Change directory to `ng2_modular_admin/lib`.
+1. Change directory to `ng_modular_admin/lib`.
 2. Download the [latest source
    release](https://v4-alpha.getbootstrap.com/getting-started/download/).
-3. Unzip the contents into `ng2_modular_admin/lib`.
+3. Unzip the contents into `ng_modular_admin/lib`.
 4. Rename `bootstrap-4.*/scss` to `bootstrap`.
 5. Remove the Zip file.
-6. Run `dart ng2_modular_admin/tool/build-modular-admin.dart` to rebuild the
+6. Run `dart ng_modular_admin/tool/build-modular-admin.dart` to rebuild the
    stylesheets.
 
 **To upgrade Open Sans:**
 
-1. Change directory to `ng2_modular_admin/lib`
+1. Change directory to `ng_modular_admin/lib`
 2. Download Zip file from the [open-sans GitHub
    project](https://github.com/FontFaceKit/open-sans).
-3. Unzip the contents into `ng2_modular_admin/lib`.
+3. Unzip the contents into `ng_modular_admin/lib`.
 4. Rename `open-sans-*` to `open-sans`.
 5. Remove the Zip file.
-6. Run `dart ng2_modular_admin/tool/build-modular-admin.dart` to rebuild the
+6. Run `dart ng_modular_admin/tool/build-modular-admin.dart` to rebuild the
    stylesheets.
 
 **To upgrade Modular Admin from upstream:**

diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
-# Modular Admin for Angular2Dart
+# Modular Admin for Angular Dart
 
-[View Demo](https://hyperiongray.github.io/ng2_modular_admin/build/web/)
+[View Demo](https://hyperiongray.github.io/ng_modular_admin/)
 
 ## Overview
 
 This project is a port of [Modular
-Admin](https://github.com/modularcode/modular-admin-html) to Angular2Dart.
+Admin](https://github.com/modularcode/modular-admin-html) to Angular Dart.
 Modular Admin is a Bootstrap 4 admin theme written with HTML, monolithic CSS,
 and some JavaScript. This port focuses on converting monolithic CSS to web
 components with encapsulated styles and reimplementing the JavaScript logic with
@@ -23,4 +23,4 @@ To build styles, run `dart tool/build-styles.dart`.
 
 ---
 
-[![define hyperion gray](https://hyperiongray.s3.amazonaws.com/define-hg.svg)](https://hyperiongray.com/?pk_campaign=github&pk_kwd=ng2_modular_admin "Hyperion Gray")
+[![define hyperion gray](https://hyperiongray.s3.amazonaws.com/define-hg.svg)](https://hyperiongray.com/?pk_campaign=github&pk_kwd=ng_modular_admin "Hyperion Gray")
diff --git a/analysis_options.yaml b/analysis_options.yaml
@@ -0,0 +1,2 @@
+analyzer:
+  strong-mode: true
diff --git a/example/LICENSE b/example/LICENSE
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2014-2016 Google, Inc. http://angular.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,7 @@
+This directory contains a demo application for Modular Admin for Angular Dart.
+
+View [the demo](https://hyperiongray.github.io/ng_modular_admin/) on GitHub
+Pages.
+
+If you want to run this demo locally, clone the repo and run `pub serve` from
+this directory.
diff --git a/example/analysis_options.yaml b/example/analysis_options.yaml
@@ -0,0 +1,2 @@
+analyzer:
+  strong-mode: true
diff --git a/example/lib/about.dart b/example/lib/about.dart
@@ -0,0 +1,12 @@
+import 'package:angular/angular.dart';
+import 'package:angular_router/angular_router.dart';
+
+import 'package:ng_modular_admin/ng_modular_admin.dart';
+
+/// About component.
+@Component(
+    selector: 'about',
+    templateUrl: 'about.html',
+    directives: const [ROUTER_DIRECTIVES, MA_DIRECTIVES]
+)
+class AboutComponent {}
diff --git a/example/lib/about.html b/example/lib/about.html
@@ -0,0 +1,80 @@
+<ma-card>
+  <h2>About ng_modular_admin</h2>
+  <p class='lead'>A port of Modular Admin to Angular Dart</p>
+  <p class='text-danger'>
+    ng_modular_admin is still alpha quality. Don't use it on your production
+    project!
+  </p>
+  <p>
+    This project is a port of
+    <a href='http://modularcode.io/single-project.html'>Modular Admin HTML</a>
+    to Angular Dart and is based on
+    <a href='https://v4-alpha.getbootstrap.com/'>Boostrap 4</a>. The upstream
+    project is built like a standard Bootstrap template (HTML, monolithic CSS,
+    and some JavaScript), but this port focuses on adapting the theme to the
+    world of <a href='http://webcomponents.org/'>web components</a>.
+  </p>
+  <p>
+    The goal for <code>ng_modular_admin</code> is to make it easy to build
+    sophisticated single page applications (SPA's) with Angular Dart by
+    providing a library of common components along with a standard layout.
+  </p>
+</ma-card>
+<ma-card>
+  <h2>Web Components</h2>
+  <p>
+    In the web component world, GUI widgets are built as custom elements. For
+    example, this port of Modular Admin has elements like
+    <code>&lt;ma-side-nav&gt;</code> and <code>&lt;ma-button&gt;</code>. Web
+    components have <em>style encapsulation</em>, which means the styles for a
+    component are scoped only to that component. This prevents components from
+    different vendors from interfering with each other or with your own code.
+  </p>
+  <p>
+    In addition, web components may have simpler markup than plain HTML,
+    because the author of each component can hide complexity inside the custom
+    element. It's the HTML equivalent of providing a high-level API that
+    abstracts over a low-level API.
+  </p>
+  <p>
+    The web component movement is still small but growing.
+    <a href='https://www.polymer-project.org/1.0/'>Google Polymer</a> and
+    <a href='https://x-tag.readme.io/'>Microsoft X-Tag</a> are two major component
+    systems under development, but there isn't yet a single component library
+    that meets all of our needs, so we built <code>ng_modular_admin</code> to
+    fill the void.
+  </p>
+</ma-card>
+<ma-card>
+  <h2>Getting Started</h2>
+  <p>
+    To use <code>ng_modular_admin</code> in your own Angular Dart project, you
+    need to do two things:
+  </p>
+  <ol>
+    <li>Add Modular Admin as a dependency in <code>pubspec.yaml</code>.</li>
+    <li>Add the stylesheet to your <code>index.html</code>: </li>
+  </ol>
+  <p>
+    The stylesheet element should look like this:
+  </p>
+  <pre class='code'>&#x3C;link rel=&#x27;stylesheet&#x27;
+      type=&#x27;text/css&#x27;
+      href=&#x27;packages/ng_modular_admin/css/modular-admin.css&#x27;&#x3E;</pre>
+  <p>
+    If you're not familiar with Dart, read the
+    <a href="https://www.dartlang.org/guides/language">Language Overview</a>.
+    If you're not familiar with Angular Dart, read
+    <a href="https://webdev.dartlang.org/angular">About AngularDart</a>.
+  </p>
+</ma-card>
+<ma-card>
+  <h2>Resources</h2>
+  <p>
+    For additional information, consult the following resources:
+  </p>
+  <ul>
+    <li><a href='https://github.com/hyperiongray/ng_modular_admin'>Modular Admin Source Code</a></li>
+    <li><a href='https://pub.dartlang.org/packages/ng_fontawesome'>Pub Package</a></li>
+  </ul>
+</ma-card>
diff --git a/example/lib/body.dart b/example/lib/body.dart
@@ -0,0 +1,85 @@
+import 'dart:html';
+
+import 'package:angular/angular.dart';
+import 'package:angular_forms/angular_forms.dart';
+import 'package:angular_router/angular_router.dart';
+import 'package:ng_fontawesome/ng_fontawesome.dart';
+import 'package:ng_modular_admin/ng_modular_admin.dart';
+
+import 'package:ng_modular_admin_demo/about.dart';
+import 'package:ng_modular_admin_demo/buttons.dart';
+import 'package:ng_modular_admin_demo/cards.dart';
+import 'package:ng_modular_admin_demo/footer.dart';
+import 'package:ng_modular_admin_demo/forms.dart';
+import 'package:ng_modular_admin_demo/layout.dart';
+import 'package:ng_modular_admin_demo/list_group.dart';
+import 'package:ng_modular_admin_demo/login.dart';
+import 'package:ng_modular_admin_demo/overlay.dart';
+import 'package:ng_modular_admin_demo/pagers.dart';
+import 'package:ng_modular_admin_demo/side-nav.dart';
+import 'package:ng_modular_admin_demo/sign-up.dart';
+import 'package:ng_modular_admin_demo/tables.dart';
+import 'package:ng_modular_admin_demo/tags.dart';
+import 'package:ng_modular_admin_demo/themes.dart';
+import 'package:ng_modular_admin_demo/toast.dart';
+import 'package:ng_modular_admin_demo/top-nav.dart';
+import 'package:ng_modular_admin_demo/typography.dart';
+
+/// Top-level component for Modular Admin demo.
+@Component(
+    selector: 'body',
+    styles: const ['''
+        ma-top-nav form {
+            position: relative;
+            top: -5px;
+        }
+    '''],
+    templateUrl: 'body.html',
+    directives: const [CORE_DIRECTIVES, FaIcon, formDirectives, MA_DIRECTIVES,
+        ROUTER_DIRECTIVES],
+    providers: const [ROUTER_PROVIDERS, MA_PROVIDERS, LayoutService,
+        TagsService,
+        const Provider(LocationStrategy, useClass: HashLocationStrategy),
+    ]
+)
+@RouteConfig(const [
+    const Route(path: '/about', name: 'About', component: AboutComponent, useAsDefault: true),
+    const Route(path: '/buttons', name: 'Buttons', component: ButtonsComponent),
+    const Route(path: '/cards', name: 'Cards', component: CardsComponent),
+    const Route(path: '/footer', name: 'Footer', component: FooterComponent),
+    const Route(path: '/forms', name: 'Forms', component: FormsComponent),
+    const Route(path: '/layout', name: 'Layout', component: LayoutComponent),
+    const Route(path: '/list-group', name: 'ListGroup', component: ListGroupComponent),
+    const Route(path: '/login', name: 'Login', component: LoginComponent),
+    const Route(path: '/overlay', name: 'Overlay', component: OverlayComponent),
+    const Route(path: '/pagers', name: 'Pagers', component: PagersComponent),
+    const Route(path: '/side-nav', name: 'SideNav', component: SideNavComponent),
+    const Route(path: '/sign-up', name: 'SignUp', component: SignUpComponent),
+    const Route(path: '/tables', name: 'Tables', component: TablesComponent),
+    const Route(path: '/tags', name: 'Tags', component: TagsComponent),
+    const Route(path: '/themes', name: 'Themes', component: ThemesComponent),
+    const Route(path: '/toast', name: 'Toast', component: ToastComponent),
+    const Route(path: '/top-nav', name: 'TopNav', component: TopNavComponent),
+    const Route(path: '/typography', name: 'Typography', component: TypographyComponent),
+])
+class BodyComponent {
+    /// Application layout service.
+    LayoutService layoutService;
+
+    /// Tags (a.k.a. badges) service.
+    TagsService tagsService;
+
+    /// Toast (a.k.a. pop-up notifications) service.
+    ToastService toastService;
+
+    /// Search term.
+    String searchTerm;
+
+    /// Constructor.
+    BodyComponent(this.layoutService, this.tagsService, this.toastService);
+
+    /// Search form submit handler.
+    void handleSubmit() {
+        window.alert('You searched for: "$searchTerm"');
+    }
+}
diff --git a/example/lib/body.html b/example/lib/body.html
@@ -0,0 +1,109 @@
+<ma-app>
+  <ma-toast-outlet [service]='toastService'></ma-toast-outlet>
+  <ma-top-nav *ngIf='layoutService.hasTopNav' [fixed]='layoutService.topNavIsFixed'>
+    <form (submit)='handleSubmit()' role='search' class='float-xs-left'>
+      <fa name='search' size='lg'></fa>
+      <input type='search' placeholder='Search' [(ngModel)]='searchTerm'>
+    </form>
+    <div class='float-xs-right buttons'>
+      <ma-button size='small'
+                 href='https://github.com/hyperiongray/ng_modular_admin'>
+        <fa name='github'></fa>
+        View On GitHub
+      </ma-button>
+      <ma-button size='small'
+                 href='https://github.com/HyperionGray/ng_modular_admin/archive/master.zip'>
+        <fa name='cloud-download'></fa>
+        Download ZIP
+      </ma-button>
+    </div>
+  </ma-top-nav>
+  <ma-side-nav *ngIf='layoutService.hasSideNav' [fixed]='layoutService.sideNavIsFixed'>
+    <ma-side-nav-header>
+      <ma-logo></ma-logo> Ng2 Mod Admin
+    </ma-side-nav-header>
+    <ma-side-nav-item [route]='["About"]'>
+      <fa name='home' [fw]='true' size='lg'></fa> About
+      <ma-tag type='primary' [pill]='true' class='float-xs-right'>{{tagsService.aboutBadge}}</ma-tag>
+    </ma-side-nav-item>
+    <ma-side-nav-item [route]='["Layout"]'>
+      <fa name='th' [fw]='true' size='lg'></fa> Layout
+      <ma-tag type='info' [pill]='true' class='float-xs-right'>{{tagsService.layoutBadge}}</ma-tag>
+    </ma-side-nav-item>
+    <ma-side-nav-item [route]='["Themes"]'>
+      <fa name='paint-brush' [fw]='true' size='lg'></fa> Themes
+      <ma-tag type='danger' [pill]='true' class='float-xs-right'>{{tagsService.themesBadge}}</ma-tag>
+    </ma-side-nav-item>
+    <ma-side-nav-item [route]='["Typography"]'>
+      <fa name='font' [fw]='true' size='lg'></fa> Typography
+    </ma-side-nav-item>
+    <ma-side-nav-menu>
+      <ma-side-nav-menu-header>
+        <fa name='map-signs' [fw]='true' size='lg'></fa> Navigation
+      </ma-side-nav-menu-header>
+      <ma-side-nav-item [route]='["Footer"]'>
+        Footer
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["SideNav"]'>
+        Side Navigation
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["TopNav"]'>
+        Top Navigation
+      </ma-side-nav-item>
+    </ma-side-nav-menu>
+    <ma-side-nav-menu>
+      <ma-side-nav-menu-header>
+        <fa name='gears' [fw]='true' size='lg'></fa> Components
+      </ma-side-nav-menu-header>
+      <ma-side-nav-item [route]='["Buttons"]'>
+        Buttons
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["Cards"]'>
+        Cards
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["Forms"]'>
+        Forms
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["ListGroup"]'>
+        List Group
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["Overlay"]'>
+        Overlay
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["Pagers"]'>
+        Pagers
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["Tables"]'>
+        Tables
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["Tags"]'>
+        Tags
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["Toast"]'>
+        Toast
+      </ma-side-nav-item>
+    </ma-side-nav-menu>
+    <ma-side-nav-menu>
+      <ma-side-nav-menu-header>
+        <fa name='file-text-o' [fw]='true' size='lg'></fa> Pages
+      </ma-side-nav-menu-header>
+      <ma-side-nav-item [route]='["Login"]'>
+        Log In
+      </ma-side-nav-item>
+      <ma-side-nav-item [route]='["SignUp"]'>
+        Sign Up
+      </ma-side-nav-item>
+    </ma-side-nav-menu>
+  </ma-side-nav>
+  <ma-content>
+    <router-outlet></router-outlet>
+  </ma-content>
+  <ma-footer *ngIf='layoutService.hasFooter' [fixed]='layoutService.footerIsFixed'>
+    <div class='float-xs-left'>
+      Footer content
+    </div>
+    <div class='float-xs-right'>
+      More content
+    </div>
+  </ma-footer>
+</ma-app>