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

tweak context-menu

This commit is contained in:
Nicolas Constant 2019-07-26 00:01:39 -04:00
parent 2339ca55ea
commit bf9fe144b3
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
4 changed files with 31 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/components/create-status/create-status.component.html
View File

@ -34,7 +34,7 @@
</a>
<input #fileInput type="file" id="file" style="display: none;" (change)="handleFileInput($event.target.files)">
<a href class="status-editor__footer--link" title="adjust status privacy" (click)="onContextMenu($event)">
<a href class="status-editor__footer--link" title="{{ selectedPrivacy }}" (click)="onContextMenu($event)">
<fa-icon [icon]="faGlobeAmericas" *ngIf="selectedPrivacy === 'Public'"></fa-icon>
<fa-icon [icon]="faLockOpen" *ngIf="selectedPrivacy === 'Unlisted'"></fa-icon>
<fa-icon [icon]="faLock" *ngIf="selectedPrivacy === 'Follows-only'"></fa-icon>
@ -46,32 +46,22 @@
start in order to use multiposting.</div>
<context-menu #contextMenu>
<ng-template contextMenuItem (execute)="changePrivacy('Public')">
<fa-icon [icon]="faGlobeAmericas"></fa-icon> Public
<ng-template contextMenuItem
(execute)="changePrivacy('Public')">
<fa-icon [icon]="faGlobeAmericas" class="context-menu-icon"></fa-icon> Public
</ng-template>
<ng-template contextMenuItem (execute)="changePrivacy('Unlisted')">
<fa-icon [icon]="faLockOpen"></fa-icon> Unlisted
<ng-template contextMenuItem
(execute)="changePrivacy('Unlisted')">
<fa-icon [icon]="faLockOpen" class="context-menu-icon"></fa-icon> Unlisted
</ng-template>
<ng-template contextMenuItem (execute)="changePrivacy('Follows-only')">
<fa-icon [icon]="faLock"></fa-icon> Followers-only
<ng-template contextMenuItem
(execute)="changePrivacy('Follows-only')">
<fa-icon [icon]="faLock" class="context-menu-icon"></fa-icon> Followers-only
</ng-template>
<ng-template contextMenuItem (execute)="changePrivacy('DM')">
<fa-icon [icon]="faEnvelope"></fa-icon> Direct
<ng-template contextMenuItem
(execute)="changePrivacy('DM')">
<fa-icon [icon]="faEnvelope" class="context-menu-icon"></fa-icon> Direct
</ng-template>
</context-menu>
<!--
<select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy"
[(ngModel)]="selectedPrivacy">
<option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>
</select> -->
<!-- <div class="status-form__counter">
<span class="status-form__counter--count">{{charCountLeft}}</span> <span
class="status-form__counter--posts">{{postCounts - 1}}/{{postCounts}}</span>
</div> -->
<!-- <button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="statusReplyingToWrapper">REPLY!</button>
<button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="!statusReplyingToWrapper">POST!</button> -->
<app-media></app-media>
</form>

7
src/app/components/create-status/create-status.component.scss
View File

@ -159,4 +159,11 @@ $counter-width: 90px;
padding: 5px 10px;
margin: 5px;
}
}
.context-menu-icon {
position: relative;
left: -3px;
font-size: 12px;
color: #1f1f1f;
}

2
src/app/components/create-status/create-status.component.ts
View File

@ -17,8 +17,6 @@ import { InstancesInfoService } from '../../services/instances-info.service';
import { MediaService } from '../../services/media.service';
import { AutosuggestSelection, AutosuggestUserActionEnum } from './autosuggest/autosuggest.component';
@Component({
selector: 'app-create-status',
templateUrl: './create-status.component.html',

19
src/sass/_context-menu.scss
View File

@ -1,16 +1,19 @@
@import "variables";
::ng-deep .ngx-contextmenu {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
& .dropdown-menu {
border: solid 1px $context-menu-border-color;
//border: solid 1px $context-menu-border-color;
border: none;
background-color: $context-menu-background;
padding: 2px 0;
border-radius: 2px;
padding: 0;
border-radius: 0px;
// padding: 2px 0;
// border-radius: 2px;
//border: solid 2px $context-menu-border-color;
}
@ -31,7 +34,7 @@
padding: 0.5em 1em;
padding: 3px 10px;
text-decoration: none;
transition: all .2s;
//transition: all .2s;
&:hover {
color: $context-menu-font-color;