Skip to content

Commit ed374d2

Browse files
lancelilanceli
committed
feat(newTopic): optimize new topic modal
1 parent 7f3ff50 commit ed374d2

File tree

7 files changed

+99
-10
lines changed

7 files changed

+99
-10
lines changed

‎src/app/app.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,42 @@
1414
// To declare rules for a specific mode, create a child rule
1515
// for the .md, .ios, or .wp mode classes. The mode class is
1616
// automatically applied to the <body> element in the app.
17+
.item {
18+
left: 0;
19+
right: 0;
20+
}
21+
.item-divider {
22+
color: #555;
23+
font-weight: normal;
24+
font-size: 14px;
25+
}
26+
.item-gap {
27+
border: 0 none;
28+
min-height: 0px;
29+
}
30+
.item-loading {
31+
text-align: center;
32+
color: #aaa;
33+
}
34+
.saverMode {
35+
.item-avatar {
36+
padding-left: 14px;
37+
&.item-complex {
38+
padding-left: 0;
39+
}
40+
> img {
41+
&:first-child {
42+
-webkit-transform: translate3d(-2000px, -2000px, 0px);
43+
}
44+
}
45+
.item-content {
46+
padding-left: 14px;
47+
padding-right: 16px;
48+
> img {
49+
&:first-child {
50+
-webkit-transform: translate3d(-2000px, -2000px, 0px);
51+
}
52+
}
53+
}
54+
}
55+
}

‎src/pages/new-topic-modal/new-topic-modal.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@
2121
<form>
2222
<div class="list">
2323
<label class="item item-input item-select">
24-
<select ([ngModel])="newTopicData.tab" class="topic-tabs">
24+
<select [(ngModel)]="newTopicData.tab" class="topic-tabs" name="tab">
2525
<ng-container *ngFor="let tab of tabs">
2626
<option *ngIf="tab.value != undefined && tab.value != 'all'" value="{{tab.value}}">{{tab.label}}</option>
2727
</ng-container>
2828
</select>
2929
</label>
3030
<label class="item item-input">
31-
<input type="text" ([ngModel])="newTopicData.title" placeholder="标题10字以上">
31+
<input type="text" [(ngModel)]="newTopicData.title" name="title" placeholder="标题10字以上">
3232
</label>
3333
<label class="item item-input">
34-
<textarea placeholder="内容" ([ngModel])="newTopicData.content" rows="5" class="content"></textarea>
34+
<textarea placeholder="内容" [(ngModel)]="newTopicData.content" name="content" rows="5" class="content"></textarea>
3535
</label>
3636
</div>
3737
</form>

‎src/pages/new-topic-modal/new-topic-modal.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ import { Tab } from '../../classes/tab';
2525
export class NewTopicModal {
2626

2727
tabs: Tab[];
28-
newTopicData: {
28+
newTopicData: any = {
2929
tab: 'share',
3030
title: '',
3131
content: ''
3232
};
33-
newTopicId: '';
33+
newTopicId:string;
3434

3535
constructor(
3636
private userService: UserService,
@@ -52,7 +52,7 @@ export class NewTopicModal {
5252
console.log('new topic data:', this.newTopicData);
5353
this.topicService.saveNewTopic(this.newTopicData).then((response) => {
5454
this.newTopicId = response['topic_id'];
55-
//$scope.closeNewTopicModal();
55+
this.closeModal();
5656
});
5757
};
5858

‎src/pages/topics/topics.scss‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,40 @@
11
page-topics {
2-
2+
.topics {
3+
.item-content {
4+
padding: 14px 16px 18px 72px;
5+
> img {
6+
&:not(:first-child) {
7+
-webkit-transform: translate3d(-2000px, -2000px, 0px);
8+
position: absolute;
9+
}
10+
}
11+
}
12+
.activated {
13+
.tab {
14+
&:not(.hl) {
15+
background-color: #aeaeae;
16+
color: #fff;
17+
}
18+
}
19+
}
20+
.ago,
21+
.summary {
22+
font-size: 12px;
23+
}
24+
.tab {
25+
background-color: #E5E5E5;
26+
color: #999;
27+
border-radius: 2px;
28+
padding: 2px 4px;
29+
}
30+
.hl {
31+
background-color: $node-green;
32+
color: #fff;
33+
}
34+
}
35+
.topic-content {
36+
img {
37+
max-width: 100%;
38+
}
39+
}
340
}

‎src/pages/topics/topics.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export class TopicsPage {
8383
}
8484

8585
showNewTopicModal (): void {
86-
console.log('new topic modal 123');
86+
console.log('new topic modal');
8787

8888
let modal = this.modalCtrl.create(NewTopicModal);
8989
modal.present();

‎src/providers/topic-service.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Injectable } from '@angular/core';
2-
import { Http } from '@angular/http';
2+
import { Http, Headers, RequestOptions } from '@angular/http';
33
import 'rxjs/add/operator/map';
44
import 'rxjs/add/operator/toPromise';
55

@@ -80,8 +80,15 @@ export class TopicService {
8080
);
8181
}
8282
saveNewTopic(newTopicData) {
83+
let body = JSON.stringify(newTopicData);
84+
let headers = new Headers({
85+
'content-type': 'application/json'
86+
});
87+
let options = new RequestOptions({
88+
headers: headers
89+
});
8390
return this.userService.getCurrentUser().then((currentUser) => {
84-
return this.http.post(`${this.topicsUrl}?accesstoken=${currentUser.accesstoken}`, newTopicData).toPromise()
91+
return this.http.post(`${this.topicsUrl}?accesstoken=${currentUser.accesstoken}`, body, options).toPromise()
8592
})
8693
}
8794

‎src/theme/variables.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,9 @@ $colors: (
7676

7777
@import "roboto";
7878
@import "noto-sans";
79+
80+
// Colors
81+
// -------------------------------
82+
83+
$node-green: #80bd01;
84+
$node-black: #444;

0 commit comments

Comments
 (0)