Skip to content

todo list #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aya-aboelela wants to merge 1 commit into
base: main
Choose a base branch
from
Open

todo list #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/app/languages/arabic/todo-list/todo-header/todo-header.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,6 @@
padding: 8px 33px 12px 40px;
transition: width 0.4s ease-in-out;
}
.toggle {
display: none;
}
.nav-item {
text-decoration: none;
margin: 1.3rem 0 0 0;
Expand Down
2 changes: 0 additions & 2 deletions src/app/languages/arabic/todo-list/todo-main/todo-main.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,8 +156,6 @@
<img src="/assets/images/delete-icon.svg" alt="حذف المهمة"
title="حذف المهمة">
</div>


</div>

</div>
Expand Down
35 changes: 9 additions & 26 deletions src/app/languages/arabic/todo-list/todo-main/todo-main.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
color: rgba(var(--green));
}
.taskTop img {
margin: 1rem 0 0 1.2rem;
margin-top: 1rem;
height: 22px;
}
.task-container {
Expand Down Expand Up @@ -123,15 +123,6 @@ form label {
padding: 1em;
cursor: pointer;
}
.my-date:hover,
.mycourses:hover,
.calendar:hover,
.People:hover,
.tasks:hover,
.todo:hover{
background-color: #DDFDD8;
border: 1px solid #DDFDD8;
}
.my-date img,
.mycourses img,
.calendar img,
Expand Down Expand Up @@ -166,10 +157,16 @@ form label {
.add-file:hover,
.mydate:hover,
.due-date:hover,
.repeat:hover{
.repeat:hover,.my-date:hover,
.mycourses:hover,
.calendar:hover,
.People:hover,
.tasks:hover,
.todo:hover{
background-color: #DDFDD8;
border: 1px solid #DDFDD8;
}

.date label,
.add-file label,
.mydate label,
Expand Down Expand Up @@ -208,24 +205,10 @@ form label {
position: inherit;
transition: none;
}
.my-date,.mycourses,.calendar,.People,.tasks,.todo {
display: flex;
padding: 1em;
cursor: pointer;
}
.my-date img,
.mycourses img,
.calendar img,
.People img,
.tasks img,
.todo img {
height: 22px;
margin-right: .6rem;
}
.sidebar-footer{
margin-top: 19.6rem;
}
.right-footer{
margin-top: 5.6rem;
margin-top: 6.5rem;
}
}
17 changes: 10 additions & 7 deletions src/app/languages/english/todo-list/todo-header/todo-header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
<div class="header-container">
<div class="todo">
<img routerLink="/en" src="/assets/logoFinal.svg" alt="logo" title="Learning Lantern logo">
<p>To Do</p>
<p>To Do</p>
</div>
<div class="search">
<form>
<input type="text" name="Search" placeholder="Search" title="Search">
</form>
<input type="text" name="Search" placeholder="Search" title="Search" class="pointer">
</form>
</div>
<div class="icons">
<img src="../../../../../assets/images/setting-icon.svg" alt="setting-icon" title="Settings">
<img src="../../../../../assets/images/question-icon.svg" alt="question-icon" title="help">
<img src="../../../../../assets/images/user-icon.svg" alt="user-icon" title="user account">

<img src="/assets/images/setting-icon.svg" alt="setting-icon" title="Settings" class="pointer">
<img src="/assets/images/user-icon.svg" alt="user-icon" title="user account" class="pointer">
<a (click)="dropToggle()" class="nav-item pointer">EN</a>
<div class="dropdown-content" [ngStyle]="{ display: drop ? 'flex' : 'none' }">
<a class="pointer" (click)="switchLang('ar', 'en')">EN</a>
<a class="pointer" (click)="switchLang('en', 'ar')">AR</a>
</div>
</div>
</div>
73 changes: 40 additions & 33 deletions src/app/languages/english/todo-list/todo-header/todo-header.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,16 @@
border-bottom: 0.5px solid var(--green);
z-index: 999;
}

.todo {
font-size: 1.3rem;
font-weight: 500;
margin-left: 1rem;
display: flex;
width: 42%;
}

.todo p {
margin-top: 1.7rem;
margin:1.7rem 0 0 .3rem;
}

.todo img {
width: 45px;
cursor: pointer;
Expand All @@ -28,65 +26,74 @@
.search{
margin-right: -4rem;
}

.search form input[type=text] {
width:65% ;
width: 55%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 13px;
font-size: 16px;
margin-top: 1rem;
background-color: white;
background-image: url('/assets/images/search-icon.svg');
background-position: 10px 10px;
background-repeat: no-repeat;
margin: 1rem 1rem 0 0;
background: url("/assets/images/search-icon.svg") no-repeat 10px 10px white;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

.search form input[type=text]:hover {
cursor: pointer;
}

.icons {
display: flex;
}

.icons img {
width: 22px;
margin-right: .5rem;
margin-right: .7rem;
}

.todo p,
.icons img:hover {
cursor: pointer;
.nav-item {
text-decoration: none;
margin: 1.3rem 0 0 0;
transition: 0.3s ease all;
padding: 0.7em 0.5em;
font-weight: 500;
}
.nav-item:hover {
color: rgba(var(--brown));
}
.dropdown-content {
padding: 1em;
width: 150px;
background: rgba(var(--very-light-green));
align-items: center;
flex-direction: column;
position: absolute;
top: 80px;
z-index: 1001;
}
.dropdown-content a {
text-decoration: none;
}
.dropdown-content a:hover {
color: rgba(var(--brown));
}

@media all and (min-width: 900px) {
.todo {
margin-left: 2rem;
}

.todo img {
width: 55px;
margin-right: 1.2rem;
}

.search{
display: flex;
justify-content: center;
align-content: center;
width: 100%;
margin-right: 8rem;
}
.search form input[type=text] {
width: 300px;

}

.search form input[type=text]:focus {
width: 105%;
margin:1rem 8rem 0 0 ;
outline: none;
.icons{
margin-right: 1.5rem;
}
.icons img{
width: 26px;
justify-content: space-between;
margin-right: 2rem;
}

}
14 changes: 11 additions & 3 deletions src/app/languages/english/todo-list/todo-header/todo-header.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import { Component, OnInit } from '@angular/core';

import { Router } from '@angular/router';
@Component({
selector: 'app-todo-header',
templateUrl: './todo-header.component.html',
styleUrls: ['./todo-header.component.scss']
})
export class TodoHeaderComponent implements OnInit {
drop = false;
constructor(private router: Router) { }
dropToggle() {
this.drop = !this.drop;
}

constructor() { }

switchLang(oldLang: string, newLang: string) {
const url = this.router.url;
const url2 = url.replace(`/${oldLang}`, `/${newLang}`);
this.router.navigate([url2]);
}
ngOnInit(): void {
}

Expand Down
44 changes: 27 additions & 17 deletions src/app/languages/english/todo-list/todo-main/todo-main.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
<div class="taskTop">
<img src="/assets/images/bar-icon.svg" (click)="showSidebar()" alt="bar-icon">
<img src="/assets/images/bar-icon.svg" (click)="showSidebar()" alt="bar-icon" class="pointer">
<p>Tasks</p>
</div>
<!-- Main Container-->
<div class="main-container">
<!-- Left Column -->
<div class="side-bar" [class.hidden]="isHidden">
<div class="my-date">
<img src="../../../../../assets/images/mydate-icon.svg" alt="my date" />
<img src="/assets/images/myday.svg" alt="my day" />
<span>Add to My Day</span>
</div>
<div class="mycourses">
<img src="/assets/images/mycourses.svg" alt="my Courses" title="my Courses">
<span>My Courses</span>
</div>
<div class="calendar">
<img src="/assets/images/task-calendar.svg" alt="planned Tasks" title="Calendar">
<img src="/assets/images/task-calendar1.svg" alt="planned Tasks" title="Planned Tasks">
<span>Planned Tasks</span>
</div>

<div class="People">
<img src="/assets/images/assigned-icon.svg" alt="Assigned to me" title="People">
<img src="/assets/images/assigned-icon.svg" alt="Assigned to me" title="Assigned to me">
<span>Assigned to me</span>
</div>

<div class="tasks">
<div class="tasks" (click)="showSidebar()">
<img src="/assets/images/tasks-icon.svg" alt="tasks">
<span>Tasks</span>
</div>
Expand Down Expand Up @@ -85,7 +85,7 @@
<li *ngFor="let item of taskList; let i=index" (click)="showbar()">
<input class="checkbox" type="checkbox" name="done" id="done" />
{{ item.task }}
<img src="/assets/images/delete-icon.svg" (click)="removeTask(i)" alt="delete Task" title="Delete Task">
<img src="/assets/images/delete-icon.svg" (click)="removeTask(i)" alt="delete Task" title="Delete Task" class="pointer">
</li>
</ul>

Expand All @@ -95,18 +95,21 @@
<!-- Right Column -->
<div class="details" [class.hidden]="Hidden">
<div class="task-name">
<input type="checkbox" name="done" id="done" style="margin:0.8rem 0 0 0.7rem;" /> task name
<div class="sub-container" style="margin-top: 1rem;">
<div class="task">
<input type="checkbox" name="done" id="done" style="margin:0rem 1rem 1rem 1rem;" />
<span>Task name</span>
</div>

<div class="task-steps">
<label for="addTask" class="form-label">
<img src="/assets/images/add-icon.svg" alt="add task" />
</label>
<input type="text" id="addTask" class="form-input" name="addTask" placeholder="Add step" />
<input type="text" id="addTask" class="steps-input" name="addTask" placeholder="Add step" />
</div>
</div>

<div class="mydate">
<label for="my-day">
<img src="/assets/images/mydate-icon.svg" alt="my date" />
<img src="/assets/images/myday.svg" alt="my date" />
</label>
<span id="my-day">Add to My Day</span>
</div>
Expand All @@ -115,31 +118,38 @@
<div class="date">
<div class="due-date">
<label for="dueDate">
<img src="/assets/images/task-calendar.svg" alt="" srcset="" />
<img src="/assets/images/task-calendar1.svg" alt="" srcset="" />
</label>
<!-- <input type="date" style="padding: 0px; border: none; outline: none" name="dueDate"/> -->
<span>Add due date</span>

</div>
<div class="repeat">
<label for="repeat">
<img src="../../../../../assets/images/repeat(black).svg" alt="repeat" />
<img src="/assets/images/repeat(black).svg" alt="repeat" />
</label>
<span>Repeat</span>
</div>
</div>

<div class="add-file">
<label>
<img src="../../../../../assets/images/addfile-icon.svg" alt="">
<img src="/assets/images/addfile-icon.svg" alt="">
</label>
<div class="file-attach">
<input id="file" type="file" value="Add file">
<label for="file">Add file</label>
<label for="file" class="pointer">Add file</label>
</div>
</div>
<div class="add-note">
<textarea name="add note" cols="30" rows="8" placeholder="Add note"></textarea>
<textarea name="add note" cols="30" rows="5" placeholder="Add note"></textarea>
</div>
<div class="right-footer">
<div class="backtotask">
<img (click)="showbar()" class=" pointer" src="/assets/images/goback-icon.svg" alt="الرجوع الي المهمة">
</div>
<div class="delete">
<img src="/assets/images/delete-icon.svg" alt="حذف المهمة" title="حذف المهمة" class="pointer">
</div>
</div>

</div>
Expand Down
Loading