Skip to content

Commit 6da66ef

Browse files
marcelnoehremarcelnoehre
authored
Merge pull request #15 from sQeeZ-scripting-language/14-display-temaplte-area-as-matsidenav-+-ui-adjustments
14 display temaplte area as matsidenav + UI adjustments
2 parents fa22866 + d34959b commit 6da66ef

29 files changed

+398
-589
lines changed

‎.github/workflows/main.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ jobs:
3131
run: npm run build --prod -- --base-href /playground/
3232

3333
deploy:
34+
if: github.event_name == 'push' || github.event_name == 'release'
3435
runs-on: ubuntu-latest
3536
steps:
3637
- name: Checkout code

‎public/templates/algorithms/sorting.sqz‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ fn quick_sort(arr) {
1313
for (var i = 0; i < arr.length; i++) {
1414
if (arr[i] < pivot) {
1515
left.push(arr[i]);
16-
} else if (arr[i] > pivot) {
16+
} elif (arr[i] > pivot) {
1717
right.push(arr[i]);
1818
} else {
1919
equal.push(arr[i]);
@@ -25,5 +25,5 @@ fn quick_sort(arr) {
2525

2626
var arr = [38, 27, 43, 3, 9, 82, 10];
2727

28-
log("Unsorted array:", arr);
29-
log("Sorted array:", quick_sort(arr));
28+
log("Unsorted array:" + arr);
29+
log("Sorted array:" + quick_sort(arr));

‎public/templates/basic/data-structures.sqz‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
11
// The basic data structures in sQeeZ
22

33
var intValue = 42;
4-
log("Integer value:", intValue);
4+
log("Integer value:" + intValue);
55

66
var doubleValue = 3.14159;
7-
log("Double value:", doubleValue);
7+
log("Double value:" + doubleValue);
88

99
var charValue = 'A';
10-
log("Character value:", charValue);
10+
log("Character value:" + charValue);
1111

1212
var stringValue = "Hello, World!";
13-
log("String value:", stringValue);
13+
log("String value:" + stringValue);
14+
15+
var boolValue = false;
16+
17+
const constant = "I am immutable!";
18+
log(constant);
1419

1520
var array = [1, 2, 3, 4, 5];
16-
log("Array: ", array);
21+
log("Array: " + array);
1722

1823
var object = {
1924
name: "John Doe",
2025
age: 30,
2126
isEmployed: true
2227
};
2328

24-
log("Object: ", person);
29+
log("Object: " + person);

‎public/templates/basic/hello-world.sqz‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,13 @@
11
// This is a simple "Hello World" program in sQeeZ
2+
3+
// Basic log message
24
log("Hello, World!");
5+
6+
// Warning message
7+
warn("This is a warning message!");
8+
9+
// Error message
10+
error("This is an error message!");
11+
12+
// Colored log message
13+
logc("Custom colored message!", #7F00FF);

‎public/templates/overview.json‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,15 @@
2020
"name": "Data Structures",
2121
"code": "./templates/basic/data-structures.sqz"
2222
}]
23+
}, {
24+
"name": "Short Notation",
25+
"templates": [{
26+
"name": "Arrays",
27+
"code": "./templates/short-notation/arrays.sqz"
28+
}, {
29+
"name": "Objects",
30+
"code": "./templates/short-notation/objects.sqz"
31+
}]
2332
}, {
2433
"name": "Algorithms",
2534
"templates": [{
@@ -29,11 +38,5 @@
2938
"name": "Fibonacci",
3039
"code": "./templates/algorithms/fibonacci.sqz"
3140
}]
32-
}, {
33-
"name": "Short Notation",
34-
"templates": [{
35-
"name": "Arrays",
36-
"code": "./templates/short-notation/arrays.sqz"
37-
}]
3841
}]
3942
}

‎public/templates/short-notation/arrays.sqz‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
11
// Short notation of array functionalities in sQeeZ
2-
@1 2 3 4 5 |> map(*2) |> filter(>10)
2+
3+
// Adds 3 to each: [8, 13, 18, 23, 28]
4+
// Filters > 15: [18, 23, 28]
5+
// Reduces by summing with initial value 0: 69 + 0 = 69
6+
@5,10,15,20,25 |> MAP(+3) |> FILTER(>15) |> REDUCE(+0);
7+
8+
// Concatenates [1, 2] with [3, 4]: [1, 2, 3, 4]
9+
// Zips with ['a', 'b', 'c', 'd']: [(1, 'a'), (2, 'b'), (3, 'c'), (4, 'd')]
10+
@1,2 |> CONCAT(@3,4) |> ZIP(@'a','b','c','d');
11+
12+
// Filters < 350: [100, 200, 300]
13+
// counts: 3
14+
COUNT((@100,200,300,400 |> FILTER(<350)));

‎public/templates/short-notation/objects.sqz‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Short notation of object functionalities in sQeeZ
2+
3+
// {
4+
// a: 1,
5+
// b: false,
6+
// c: "last value"
7+
// }
8+
@a:1,b:false,c:"last value";

‎src/app/app.component.html‎

Lines changed: 56 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,57 @@
1-
<div class="app-container"
2-
(screenWidth)="screenWidth = $event"
3-
(screenHeight)="screenHeight = $event"
4-
appScreen
5-
>
6-
<app-toolbar [screenWidth]="screenWidth"></app-toolbar>
7-
<div class="core">
8-
@if (screenWidth >= 992) {
9-
<app-templates [screenWidth]="screenWidth"></app-templates>
1+
<div class="app-container" [class.is-mobile]="mobileQuery.matches">
2+
<mat-toolbar class="toolbar">
3+
<div class="menu">
4+
<button mat-icon-button (click)="snav.toggle()">
5+
<mat-icon>menu</mat-icon>
6+
</button>
7+
<img src="logo.jpg" alt="sQeeZ-Scripting-Language" class="logo">
8+
</div>
9+
<div class="actions">
10+
<button mat-icon-button (click)="toggleTheme()" [matTooltip]="currentTheme === 'light' ? 'Dark Mode' : 'Light Mode'">
11+
<mat-icon> {{ currentTheme === 'light' ? 'light_mode' : 'dark_mode' }} </mat-icon>
12+
</button>
13+
<button mat-icon-button (click)="openDocumentation()" matTooltip="Help">
14+
<mat-icon>help</mat-icon>
15+
</button>
16+
<button mat-icon-button (click)="openSettings()" matTooltip="Settings">
17+
<mat-icon>settings</mat-icon>
18+
</button>
19+
</div>
20+
</mat-toolbar>
21+
<mat-sidenav-container class="sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
22+
<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56" opened="false">
23+
<h2 class="heading">Templates</h2>
24+
<mat-nav-list class="table-of-contents">
25+
@for (section of categories; track section) {
26+
<ng-container *ngTemplateOutlet="renderContent; context: { $implicit: section }"></ng-container>
27+
}
28+
</mat-nav-list>
29+
</mat-sidenav>
30+
<mat-sidenav-content class="sidenav-content">
31+
<div class="core">
32+
<app-code></app-code>
33+
<app-console></app-console>
34+
</div>
35+
</mat-sidenav-content>
36+
</mat-sidenav-container>
37+
</div>
38+
39+
<ng-template #renderContent let-section>
40+
<mat-expansion-panel>
41+
<mat-expansion-panel-header>
42+
<mat-panel-title>
43+
<button mat-stroked-button color="primary" class="content-item">
44+
{{ section.name }}
45+
</button>
46+
</mat-panel-title>
47+
</mat-expansion-panel-header>
48+
49+
@for(subSection of section.templates; track subSection) {
50+
<mat-list-item>
51+
<button mat-stroked-button color="primary" (click)="showCode(subSection); snav.close()" class="content-item">
52+
{{ subSection.name }}
53+
</button>
54+
</mat-list-item>
1055
}
11-
<app-code></app-code>
12-
<app-console></app-console>
13-
</div>
14-
</div>
56+
</mat-expansion-panel>
57+
</ng-template>

‎src/app/app.component.scss‎

Lines changed: 114 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,112 @@
1-
%full-size {
2-
width: 100%;
3-
height: 100%;
1+
.app-container {
2+
display: flex;
3+
flex-direction: column;
4+
position: absolute;
5+
top: 0;
6+
bottom: 0;
7+
left: 0;
8+
right: 0;
9+
}
10+
11+
.is-mobile .toolbar {
12+
position: fixed;
13+
z-index: 2;
414
}
515

6-
.app-container {
16+
.sidenav-container {
17+
flex: 1;
18+
}
19+
20+
.is-mobile .sidenav-container {
21+
flex: 1 0 auto;
22+
}
23+
24+
.toolbar {
25+
display: flex;
26+
justify-content: space-between;
27+
height: 4rem;
28+
background-color: var(--toolbar);
29+
color: var(--font-color);
30+
border-bottom: 0.5px solid var(--border);
31+
}
32+
33+
.menu,
34+
.actions {
35+
display: flex;
36+
align-items: center;
37+
height: 100%;
38+
gap: 0.5rem;
39+
40+
.logo {
41+
height: 75%;
42+
width: auto;
43+
border-radius: 5px;
44+
}
45+
}
46+
47+
.language-trigger .fi {
48+
width: 24px;
49+
transform: translateY(-4px);
50+
}
51+
52+
.language-select .fi {
53+
width: 24px;
54+
transform: translateY(-2px);
55+
}
56+
.heading {
57+
text-align: center;
58+
text-decoration: underline;
59+
}
60+
61+
mat-sidenav {
62+
background-color: var(--sidenav);
63+
color: var(--font-color);
64+
border-radius: 0;
65+
}
66+
67+
.sidenav-content {
68+
display: flex;
69+
flex-direction: column;
70+
overflow: hidden;
71+
height: 100%;
72+
width: 100%;
73+
background-color: var(--content);
74+
}
75+
76+
router-outlet {
777
display: flex;
878
flex-direction: column;
979
justify-content: flex-start;
10-
@extend %full-size;
80+
}
81+
82+
.controls {
83+
display: flex;
84+
justify-content: space-between;
85+
position: fixed;
86+
height: 3rem;
87+
width: 100%;
88+
bottom: 0;
89+
90+
button {
91+
height: 100%;
92+
width: 50%;
93+
border-radius: 0;
94+
}
95+
}
96+
97+
mat-expansion-panel {
98+
background-color: transparent;
99+
box-shadow: none;
100+
}
101+
102+
.content-item {
103+
width: 100%;
104+
}
105+
106+
.table-of-contents {
107+
display: flex;
108+
flex-direction: column;
109+
gap: 1rem;
11110
}
12111

13112
.core {
@@ -16,19 +115,19 @@
16115
justify-content: flex-start;
17116
}
18117

19-
app-code {
20-
flex: 1;
21-
}
118+
:host-context(.light-theme) {
119+
--mat-expansion-header-indicator-color: var(--font-color);
22120

23-
.dark-theme {
24-
.core {
25-
background-color: #222222;
121+
button {
122+
color: var(--font-color);
26123
}
27-
}
28124

29-
.light-theme {
30-
.core {
31-
background-color: #f5f5f5;
125+
button:hover {
126+
background-color: rgba(255, 171, 242, 0.75) !important;
127+
}
128+
129+
.controls button {
130+
background-color: var(--toolbar);
32131
}
33132
}
34133

‎src/app/app.component.spec.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { TestBed } from '@angular/core/testing';
22
import { AppComponent } from './app.component';
3+
import { HttpClientTestingModule } from '@angular/common/http/testing';
4+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
35

46
describe('AppComponent', () => {
57
beforeEach(async () => {
68
await TestBed.configureTestingModule({
7-
imports: [AppComponent],
9+
imports: [AppComponent, HttpClientTestingModule, BrowserAnimationsModule],
10+
811
}).compileComponents();
912
spyOnProperty(window, 'innerWidth').and.returnValue(0);
1013
spyOnProperty(window, 'innerHeight').and.returnValue(0);

0 commit comments

Comments
 (0)