From 91eb738476ba37f98f5830c934b32830ff8202c1 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 6 Dec 2022 11:49:15 +0300 Subject: [PATCH] New code display --- .../demo/components/code/code.component.ts | 19 - .../documentation.component.html | 29 +- .../documentation.component.scss | 16 + .../documentation/documentation.component.ts | 3 +- .../documentation/documentation.module.ts | 2 - .../primeblocks/blocks/blocks.component.ts | 722 +++++++++--------- .../blockviewer/blockviewer.component.scss | 40 +- .../blockviewer/blockviewer.component.ts | 3 +- .../primeblocks/primeblocks.module.ts | 5 +- .../utilities/icons/icons.component.html | 24 +- .../components/utilities/utilities.module.ts | 4 +- src/assets/demo/styles/code.scss | 15 + src/styles.scss | 3 +- 13 files changed, 433 insertions(+), 452 deletions(-) delete mode 100644 src/app/demo/components/code/code.component.ts create mode 100644 src/app/demo/components/documentation/documentation.component.scss create mode 100644 src/assets/demo/styles/code.scss diff --git a/src/app/demo/components/code/code.component.ts b/src/app/demo/components/code/code.component.ts deleted file mode 100644 index d2dcd9d..0000000 --- a/src/app/demo/components/code/code.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -@Component({ - selector: 'app-code', - template: ` -
- ` -}) -export class AppCodeComponent { - -} - -@NgModule({ - imports: [CommonModule], - exports: [AppCodeComponent], - declarations: [AppCodeComponent] -}) -export class AppCodeModule { } diff --git a/src/app/demo/components/documentation/documentation.component.html b/src/app/demo/components/documentation/documentation.component.html index d89b652..6704a2f 100644 --- a/src/app/demo/components/documentation/documentation.component.html +++ b/src/app/demo/components/documentation/documentation.component.html @@ -4,25 +4,21 @@

Getting Started

Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v14 with PrimeNG v14. In case CLI is not installed already, use the command below to set it up.

- -npm install -g @angular/cli - +
npm install -g @angular/cli

Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, install the libraries from npm and then execute "ng serve" to run the application in your local environment.

- -cd sakai +
cd sakai
 npm install
-ng serve
-
+ng serve

The application should run at http://localhost:4200/, you may now start with the development of your application.

Important CLI Commands

Following commands are derived from CLI.

- -Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. + +
Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 Run 'ng generate component component-name' to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
 
@@ -32,8 +28,7 @@ Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.
 
 Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 
-Run 'ng help' for more options.
-
+Run 'ng help' for more options.

Structure

Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets. Layout is placed inside the src/app/layout folder, @@ -46,8 +41,7 @@ Run 'ng help' for more options. initial scale is defined with the $scale at layout.scss. When default theme or scale is changed at their files initially, it is required to configure the layout service with the matching values to avoid sync issues.

- -import { Component, OnInit } from '@angular/core'; +
import { Component, OnInit } from '@angular/core';
 import { PrimeNGConfig } from 'primeng/api';
 import { LayoutService } from './layout/service/app.layout.service';
 
@@ -73,15 +67,13 @@ export class AppComponent implements OnInit {
         };
     }
 
-}
-
+}
Menu

Menu is a separate component defined in src/app/layout/app.menu.component.ts file and based on PrimeNG MenuModel API. In order to define the menuitems, navigate to this file and define your own model as a nested structure.

- -import { OnInit } from '@angular/core'; +
import { OnInit } from '@angular/core';
 import { Component } from '@angular/core';
 
 @Component({
@@ -107,8 +99,7 @@ export class AppMenuComponent implements OnInit {
             //...
         ];
     }
-}
-
+}

Integration with Existing Angular CLI Projects

Sakai structure is designed in a modular way so that it can easily be integrated with your existing application. We've created a short tutorial with details.

diff --git a/src/app/demo/components/documentation/documentation.component.scss b/src/app/demo/components/documentation/documentation.component.scss new file mode 100644 index 0000000..b170178 --- /dev/null +++ b/src/app/demo/components/documentation/documentation.component.scss @@ -0,0 +1,16 @@ +@media screen and (max-width: 991px) { + .video-container { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; + + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } +} \ No newline at end of file diff --git a/src/app/demo/components/documentation/documentation.component.ts b/src/app/demo/components/documentation/documentation.component.ts index 4e166fb..b1125a1 100644 --- a/src/app/demo/components/documentation/documentation.component.ts +++ b/src/app/demo/components/documentation/documentation.component.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; @Component({ - templateUrl: './documentation.component.html' + templateUrl: './documentation.component.html', + styleUrls: ['./documentation.component.scss'] }) export class DocumentationComponent { } \ No newline at end of file diff --git a/src/app/demo/components/documentation/documentation.module.ts b/src/app/demo/components/documentation/documentation.module.ts index 917ee81..2e6bdc9 100644 --- a/src/app/demo/components/documentation/documentation.module.ts +++ b/src/app/demo/components/documentation/documentation.module.ts @@ -1,13 +1,11 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DocumentationRoutingModule } from './documentation-routing.module'; -import { AppCodeModule } from '../code/code.component'; import { DocumentationComponent } from './documentation.component'; @NgModule({ imports: [ CommonModule, - AppCodeModule, DocumentationRoutingModule ], declarations: [DocumentationComponent] diff --git a/src/app/demo/components/primeblocks/blocks/blocks.component.ts b/src/app/demo/components/primeblocks/blocks/blocks.component.ts index 3317d2c..06ae013 100644 --- a/src/app/demo/components/primeblocks/blocks/blocks.component.ts +++ b/src/app/demo/components/primeblocks/blocks/blocks.component.ts @@ -3,397 +3,405 @@ import { Component } from '@angular/core'; @Component({ templateUrl: './blocks.component.html' }) -export class BlocksComponent { +export class BlocksComponent{ block1: string = ` -
-
-
- Create the screens your -
your visitors deserve to see
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - -
-
-
- Image -
-
`; +
+
+
+ Create the screens your +
your visitors deserve to see
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ + + +
+
+
+ Image +
+
`; block2: string = ` -
-
- One Product, - Many Solutions +
+
+ One Product, + Many Solutions +
+
Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.
+
+
+ + + +
Built for Developers
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.
-
-
- - - -
Built for Developers
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
-
- - - -
End-to-End Encryption
- Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis. -
-
- - - -
Easy to Use
- Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper. -
-
- - - -
Fast & Global Support
- Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. -
-
- - - -
Open Source
- Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. -
-
- - - -
Trusted Securitty
- Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend. -
+
+ + + +
End-to-End Encryption
+ Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.
-
`; +
+ + + +
Easy to Use
+ Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper. +
+
+ + + +
Fast & Global Support
+ Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. +
+
+ + + +
Open Source
+ Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. +
+
+ + + +
Trusted Securitty
+ Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend. +
+
+
`; block3: string = ` -
-
Pricing Plans
-
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
-
-
-
-
-
Basic
-
Plan description
-
-
- $9 - per month -
-
-
    -
  • - - Arcu vitae elementum -
    • -
  • - - Dui faucibus in ornare -
    • -
  • - - Morbi tincidunt augue -
    • -
-
- -
-
-
-
-
-
-
Premium
-
Plan description
-
-
- $29 - per month -
-
-
    -
  • - - Arcu vitae elementum -
    • -
  • - - Dui faucibus in ornare -
    • -
  • - - Morbi tincidunt augue -
    • -
  • - - Duis ultricies lacus sed -
    • -
-
- -
-
-
-
-
-
-
Enterprise
-
Plan description
-
-
- $49 - per month -
-
-
    -
  • - - Arcu vitae elementum -
    • -
  • - - Dui faucibus in ornare -
    • -
  • - - Morbi tincidunt augue -
    • -
  • - - Duis ultricies lacus sed -
    • -
  • - - Imperdiet proin -
    • -
  • - - Nisi scelerisque -
    • -
-
- +
+
Pricing Plans
+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
+ +
+
+
+
+
Basic
+
Plan description
+
+
+ $9 + per month
+
+
    +
  • + + Arcu vitae elementum +
    • +
  • + + Dui faucibus in ornare +
    • +
  • + + Morbi tincidunt augue +
    • +
+
+
-
`; + +
+
+
+
Premium
+
Plan description
+
+
+ $29 + per month +
+
+
    +
  • + + Arcu vitae elementum +
    • +
  • + + Dui faucibus in ornare +
    • +
  • + + Morbi tincidunt augue +
    • +
  • + + Duis ultricies lacus sed +
    • +
+
+ +
+
+
+ +
+
+
+
Enterprise
+
Plan description
+
+
+ $49 + per month +
+
+
    +
  • + + Arcu vitae elementum +
    • +
  • + + Dui faucibus in ornare +
    • +
  • + + Morbi tincidunt augue +
    • +
  • + + Duis ultricies lacus sed +
    • +
  • + + Imperdiet proin +
    • +
  • + + Nisi scelerisque +
    • +
+
+ +
+
+
+
+
`; block4: string = ` -
-
-
 POWERED BY DISCORD
-
Join Our Design Community
-
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
- -
-
`; +
+
+
 POWERED BY DISCORD
+
Join Our Design Community
+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
+ +
+
`; block5: string = ` -
-
🔥 Hot Deals!
- - - Learn More - - - - -
`; +
+
🔥 Hot Deals!
+ + + Learn More + + + + +
`; block6: string = ` -
- -
-
-
Customers
-
-
- - 332 Active Users -
-
- - 9402 Sessions -
-
- - 2.32m Avg. Duration -
+
+ +
+
+
Customers
+
+
+ + 332 Active Users +
+
+ + 9402 Sessions +
+
+ + 2.32m Avg. Duration
-
- - -
-
`; +
+ + +
+
+
`; block7: string = ` -
-
-
-
-
-
- Orders -
152
-
-
- -
+
+
+
+
+
+
+ Orders +
152
- 24 new - since last visit -
-
-
-
-
-
- Revenue -
$2.100
-
-
- -
+
+
- %52+ - since last week -
-
-
-
-
-
- Customers -
28441
-
-
- -
-
- 520 - newly registered -
-
-
-
-
-
- Comments -
152 Unread
-
-
- -
-
- 85 - responded
+ 24 new + since last visit
-
`; +
+
+
+
+ Revenue +
$2.100
+
+
+ +
+
+ %52+ + since last week +
+
+
+
+
+
+ Customers +
28441
+
+
+ +
+
+ 520 + newly registered +
+
+
+
+
+
+ Comments +
152 Unread
+
+
+ +
+
+ 85 + responded +
+
+
+
`; block8: string = ` -
-
- Image -
Welcome Back
- Don't have an account? - Create today! -
-
- - - - -
-
- - -
- Forgot password? +
+
+ Image +
Welcome Back
+ Don't have an account? + Create today! +
+ +
+ + + + + + +
+
+ +
- + Forgot password?
-
`; + + +
+
`; block9: string = ` -
-
Movie Information
-
Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.
-
    -
  • -
    Title
    -
    Heat
    -
    - -
    -
    • -
  • -
    Genre
    -
    - - - -
    -
    - -
    -
    • -
  • -
    Director
    -
    Michael Mann
    -
    - -
    -
    • -
  • -
    Actors
    -
    Robert De Niro, Al Pacino
    -
    - -
    -
    • -
  • -
    Plot
    -
    - A group of professional bank robbers start to feel the heat from police - when they unknowingly leave a clue at their latest heist.
    -
    - -
    -
    • -
-
`; +
+
Movie Information
+
Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.
+
    +
  • +
    Title
    +
    Heat
    +
    + +
    +
    • +
  • +
    Genre
    +
    + + + +
    +
    + +
    +
    • +
  • +
    Director
    +
    Michael Mann
    +
    + +
    +
    • +
  • +
    Actors
    +
    Robert De Niro, Al Pacino
    +
    + +
    +
    • +
  • +
    Plot
    +
    + A group of professional bank robbers start to feel the heat from police + when they unknowingly leave a clue at their latest heist.
    +
    + +
    +
    • +
+
`; block10: string = ` -
-
Card Title
-
Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.
-
-
`; +
+
Card Title
+
Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.
+
+
`; -} +} \ No newline at end of file diff --git a/src/app/demo/components/primeblocks/blockviewer/blockviewer.component.scss b/src/app/demo/components/primeblocks/blockviewer/blockviewer.component.scss index 2d4a0ee..9eabcb0 100644 --- a/src/app/demo/components/primeblocks/blockviewer/blockviewer.component.scss +++ b/src/app/demo/components/primeblocks/blockviewer/blockviewer.component.scss @@ -1,14 +1,13 @@ .block-section { margin-bottom: 4rem; - overflow: hidden; } .block-header { padding: 1rem 2rem; background-color: var(--surface-section); - border-top-left-radius: 12px; - border-top-right-radius: 12px; - border:1px solid var(--surface-d); + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border:1px solid var(--surface-border); display: flex; align-items: center; justify-content: space-between; @@ -42,7 +41,6 @@ margin-right: .75rem; padding: .5rem 1rem; border-radius: 4px; - font-weight: 600; border: 1px solid transparent; transition: background-color .2s; cursor: pointer; @@ -52,7 +50,7 @@ } &:not(.block-action-disabled):hover { - background-color: var(--surface-c); + background-color: var(--surface-hover); } &.block-action-active { @@ -81,29 +79,17 @@ .block-content { padding: 0; - border:1px solid var(--surface-d); + border:1px solid var(--surface-border); border-top: 0 none; - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; - overflow: hidden; -} -:host ::ng-deep pre[class*="language-"] { - margin: 0 !important; - border-radius: 0 !important; + pre.app-code { + background-color: var(--surface-card) !important; + padding-bottom: 1rem !important; + margin-bottom: 0 !important; - &:before, &:after { - display: none !important; - } - - code { - border-left: 0 none !important; - box-shadow: none !important; - background: var(--surface-e) !important; - margin: 0; - color: var(--text-color); - font-size: 14px; - padding: 0 2rem !important; + code { + padding: 1rem 2.5rem; + } } } @@ -117,4 +103,4 @@ margin-left: 0; } } -} +} \ No newline at end of file diff --git a/src/app/demo/components/primeblocks/blockviewer/blockviewer.component.ts b/src/app/demo/components/primeblocks/blockviewer/blockviewer.component.ts index 4e6d35d..a557937 100644 --- a/src/app/demo/components/primeblocks/blockviewer/blockviewer.component.ts +++ b/src/app/demo/components/primeblocks/blockviewer/blockviewer.component.ts @@ -30,8 +30,7 @@ enum BlockView {
- {{code}} - + 
{{code}}
diff --git a/src/app/demo/components/primeblocks/primeblocks.module.ts b/src/app/demo/components/primeblocks/primeblocks.module.ts index 487f9f0..fb40158 100644 --- a/src/app/demo/components/primeblocks/primeblocks.module.ts +++ b/src/app/demo/components/primeblocks/primeblocks.module.ts @@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'; import { BlocksComponent } from './blocks/blocks.component'; import { PrimeBlocksRoutingModule } from './primeblocks-routing.module'; import { BlockViewerComponent } from './blockviewer/blockviewer.component' -import { AppCodeModule } from '../code/code.component'; import { ChipModule } from 'primeng/chip'; import { CheckboxModule } from 'primeng/checkbox'; import { ButtonModule } from 'primeng/button'; @@ -16,7 +15,6 @@ import { TooltipModule } from 'primeng/tooltip'; @NgModule({ imports: [ CommonModule, - AppCodeModule, ButtonModule, RippleModule, ChipModule, @@ -25,8 +23,7 @@ import { TooltipModule } from 'primeng/tooltip'; InputTextModule, PasswordModule, TooltipModule, - PrimeBlocksRoutingModule, - AppCodeModule + PrimeBlocksRoutingModule ], declarations: [BlocksComponent, BlockViewerComponent] }) diff --git a/src/app/demo/components/utilities/icons/icons.component.html b/src/app/demo/components/utilities/icons/icons.component.html index 7d91830..86e6d0e 100644 --- a/src/app/demo/components/utilities/icons/icons.component.html +++ b/src/app/demo/components/utilities/icons/icons.component.html @@ -1,18 +1,14 @@

Icons

Download

- -npm install primeicons --save - +
npm install primeicons --save

Getting Started

PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. A standalone icon can be displayed using an element such as i or span

- -<i class="pi pi-check"></i> -<i class="pi pi-times"></i> - +
<i class="pi pi-check"></i>
+<i class="pi pi-times"></i>
@@ -20,24 +16,18 @@ npm install primeicons --save

Size

Size of the icons can easily be changed using font-size property.

- -<i class="pi pi-check"></i> - - +
<i class="pi pi-check"></i>
+ - -<i class="pi pi-check" style="font-size: 2rem"></i> - +
<i class="pi pi-check" style="font-size: 2rem"></i>

Spinning Animation

Special pi-spin class applies infinite rotate to an icon.

- -<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i> - +
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
diff --git a/src/app/demo/components/utilities/utilities.module.ts b/src/app/demo/components/utilities/utilities.module.ts index 816b0d0..39e0591 100644 --- a/src/app/demo/components/utilities/utilities.module.ts +++ b/src/app/demo/components/utilities/utilities.module.ts @@ -2,15 +2,13 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IconsComponent } from './icons/icons.component'; import { UtilitiesRoutingModule } from './utilities-routing.module'; -import { AppCodeModule } from '../code/code.component'; import { InputTextModule } from 'primeng/inputtext'; @NgModule({ imports: [ CommonModule, UtilitiesRoutingModule, - AppCodeModule, - InputTextModule, + InputTextModule ], declarations: [IconsComponent] }) diff --git a/src/assets/demo/styles/code.scss b/src/assets/demo/styles/code.scss new file mode 100644 index 0000000..c690345 --- /dev/null +++ b/src/assets/demo/styles/code.scss @@ -0,0 +1,15 @@ +pre.app-code { + background-color: var(--surface-ground); + margin: 0 0 1rem 0; + padding: 0; + border-radius: var(--border-radius); + overflow: auto; + + code { + color: var(--surface-900); + padding: 1rem; + line-height: 1.5; + display: block; + font-family: monaco, Consolas, monospace; + } +} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 2f6ce18..344773b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -10,4 +10,5 @@ $gutter: 1rem; //for primeflex grid system /* Demos */ @import "assets/demo/styles/flags/flags.css"; -@import "assets/demo/styles/badges.scss"; \ No newline at end of file +@import "assets/demo/styles/badges.scss"; +@import "assets/demo/styles/code.scss"; \ No newline at end of file