Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

styling context menu

This commit is contained in:
Nicolas Constant 2019-07-01 22:05:48 -04:00
parent 7d4e4e90c6
commit 3f8df79f33
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
6 changed files with 80 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/components/stream/status/action-bar/action-bar.component.html
View File

@ -27,19 +27,19 @@
<fa-icon [icon]="faWindowCloseRegular"></fa-icon>
</a>
<!-- <a href class="action-bar__link action-bar__link--more" (click)="return false;" title="More" [contextMenu]="basicMenu" [contextMenuSubject]="item"> -->
<fa-icon [icon]="faEllipsisH" [contextMenu]="basicMenu" [contextMenuSubject]="item"></fa-icon>
<!-- </a> -->
<a href class="action-bar__link action-bar__link--more" (click)="onContextMenu($event, item)" title="More" [contextMenu]="basicMenu" [contextMenuSubject]="item">
<fa-icon [icon]="faEllipsisH" [contextMenu]="basicMenu" [contextMenuSubject]="item" ></fa-icon>
</a>
<context-menu #basicMenu>
<ng-template contextMenuItem (execute)="showMessage('Hi, ' + $event.item.name)">
Say hi!
</ng-template>
<ng-template contextMenuItem divider="true"></ng-template>
<!-- <ng-template contextMenuItem divider="true"></ng-template> -->
<ng-template contextMenuItem let-item (execute)="showMessage($event.item.name + ' said: ' + $event.item.otherProperty)">
Bye, {{item?.name}}
</ng-template>
<ng-template contextMenuItem passive="true">
<!-- <ng-template contextMenuItem passive="true">
Input something: <input type="text">
</ng-template>
</ng-template> -->
</context-menu>
</div>

17
src/app/components/stream/status/action-bar/action-bar.component.scss
View File

@ -1,8 +1,9 @@
@import "variables";
@import "context-menu";
.action-bar {
// outline: 1px solid greenyellow; // height: 20px;
margin: 5px 10px 5px $avatar-column-space;
margin: 5px 0px 5px $avatar-column-space;
padding: 0;
font-size: 18px;
height: 30px;
@ -41,14 +42,12 @@
font-size: 22px;
}
// &--more {
// position: absolute;
// left: 155px;
// bottom: -6px;
// }
&--more {
position: absolute;
right: -5px;
// left: 155px;
bottom: -2px;
}
}
&__lock {

14
src/app/components/stream/status/action-bar/action-bar.component.ts
View File

@ -12,7 +12,7 @@ import { ToolsService } from '../../../../services/tools.service';
import { NotificationService } from '../../../../services/notification.service';
import { StatusWrapper } from '../../../../models/common.model';
import { ContextMenuComponent } from 'ngx-contextmenu';
import { ContextMenuComponent, ContextMenuService } from 'ngx-contextmenu';
@Component({
selector: 'app-action-bar',
@ -59,6 +59,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
private accountSub: Subscription;
constructor(
private contextMenuService: ContextMenuService,
private readonly store: Store,
private readonly toolsService: ToolsService,
private readonly mastodonService: MastodonService,
@ -220,4 +221,15 @@ export class ActionBarComponent implements OnInit, OnDestroy {
console.warn('more'); //TODO
return false;
}
public onContextMenu($event: MouseEvent, item: any): void {
this.contextMenuService.show.next({
// Optional - if unspecified, all context menu components will open
contextMenu: this.basicMenu,
event: $event,
item: item,
});
$event.preventDefault();
$event.stopPropagation();
}
}

2
src/index.html
View File

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<style>
.lds-ripple {

38
src/sass/_context-menu.scss Normal file
View File

@ -0,0 +1,38 @@
@import "variables";
::ng-deep .ngx-contextmenu {
transition: all .4s;
border-radius: 3px;
& .dropdown-menu {
border: solid 1px $context-menu-border-color;
background-color: $context-menu-border-color;
background-color: $context-menu-background;
padding: 0;
border: solid 2px $context-menu-border-color;
}
& li {
display: block;
// border-top: solid 1px $context-menu-border-color;
// text-transform: uppercase;
// text-align: center;
&:first-child {
border-top: none;
}
}
& a {
color: $btn-primary-font-color;
display: block;
padding: 0.5em 1em;
padding: 5px 10px;
text-decoration: none;
&:hover {
color: $btn-primary-font-color;
background-color: $context-menu-background-hover;
text-decoration: none;
}
}
}

15
src/sass/_variables.scss
View File

@ -52,4 +52,17 @@ $button-border-color: #303957;
$column-background: #0f111a;
$card-border-color: #1e2435;
$card-border-color: #1e2435;
$context-menu-background: #0f111a;
$context-menu-background: #686970;
$context-menu-background: #16171d;
$context-menu-background: #090b10;
$context-menu-background-hover: #16171d;
$context-menu-font-color: #4e5572;
$context-menu-border-color: #4e5572;
$context-menu-border-color: #cccccc;
$context-menu-border-color: #181616;
$context-menu-border-color: #555661;
$context-menu-border-color: #4e5572;