ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

Browse Source
This commit is contained in:
richard-loafle 2020-01-29 17:17:10 +09:00
commit b0f7a90f3d
10 changed files with 154 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
View File

@ -4,13 +4,12 @@
</div>
<div class="app-layout-native-title-bar-title">DS Talk</div>
<div class="btn-area">
<ucap-integrated-search-form (search)="onIntegratedSearch($event)" class="input-lineless integrated-search">
</ucap-integrated-search-form>
<div
*ngIf="!!loginRes && !!weblink"
class="app-layout-native-title-bar-link"
>
<ucap-integrated-search-form (search)="onIntegratedSearch($event)">
</ucap-integrated-search-form>
<ng-container *ngFor="let link of weblink" [ngSwitch]="link.key">
<button
mat-icon-button
@ -147,11 +146,8 @@
></path>
</svg>
</button>
<span
*ngIf="(!!weblink && weblink.length > 0) || (updateInfo$ | async)"
class="stroke-bar"
></span>
</div>
<span *ngIf="(!!weblink && weblink.length > 0) || (updateInfo$ | async)" class="stroke-bar"></span>
<ucap-profile-my-profile-widget
[profileImageRoot]="sessionVerinfo.profileRoot"
[profileImageFile]="getMyProfileImageWidget()"

44
projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
View File

@ -25,42 +25,43 @@
}
.btn-area {
display: flex;
flex-wrap: wrap;
margin-left: auto;
flex-flow: row;
justify-items: center;
width: calc(100% - 100px);
max-width: calc(100% - 100px);
overflow: hidden;
white-space: nowrap;
position: relative;
margin-left: auto;
justify-content: flex-end;
height: 100%;
align-items: center;
.integrated-search {
height: 100%;
display: inline-flex;
align-items: center;
}
.app-layout-native-title-bar-link {
-webkit-box-align: center;
align-items: center;
position: relative;
display: flex;
justify-content: flex-end;
width: calc(100% - 100px);
display: inline-block;
min-width: 0;
width: auto;
overflow: hidden;
white-space: nowrap;
transform: translateY(2px);
.stroke-bar {
width: 1px;
height: 20px;
background-color: rgba(256, 256, 256, 0.3);
margin: 0 10px 0 20px;
display: inline-flex;
}
.button {
-webkit-app-region: no-drag;
outline: 0;
cursor: pointer;
border: none;
height: 30px;
min-width: 30px;
max-width: 30px;
padding: 3px;
width: 28px;
height: 28px;
min-width: 28px;
max-width: 28px;
line-height: 10px;
background-color: #ffffff;
border-radius: 50%;
@ -68,7 +69,8 @@
text-align: center;
font-size: 10px;
vertical-align: middle;
margin-left: 16px;
margin-left: 10px;
transform: translateY(-2px);
.weblink {
display: inline-flex;
line-height: 24px;
@ -115,7 +117,13 @@
}
}
}
.stroke-bar {
width: 10px;
height: 20px;
border-right: 1px solid rgba(255, 255, 255, 0.3);
margin: 0 10px 0 10px;
display: inline-block;
}
.myprofile-item {
-webkit-app-region: no-drag;
align-items: center;

4
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
View File

@ -38,8 +38,8 @@
>
<span
class="mdi"
[class.mdi-greater-than]="!showLeftDrawer"
[class.mdi-less-than]="showLeftDrawer"
[class.mdi-chevron-right]="!showLeftDrawer"
[class.mdi-chevron-left]="showLeftDrawer"
></span>
</button>
</div>

4
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
View File

@ -61,7 +61,5 @@
display: flex;
justify-content: center;
justify-items: center;
.mat-icon {
font-size: 18px;
}
font-size: 1.8em;
}

31
projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html
View File

@ -1,7 +1,9 @@
<div fxFlex fxLayout="row" class="chatroom-search">
<div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
<div fxLayout="row" fxLayoutAlign="start center" class="input input-lineless search-form">
<form [formGroup]="fgSearch">
<i class="material-icons icon-search"> </i>
<span class="icon-img">
<i class="mid mdi-magnify"></i>
</span>
<mat-form-field floatLabel="never">
<input
matInput
@ -12,14 +14,6 @@
formControlName="searchInput"
(keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
/>
<!-- <button
mat-button
matSuffix
mat-icon-button
aria-label="Clear"
(click)="inputSearch.value = ''; onClickSearchCancel()"
>
-->
<button
mat-button
matSuffix
@ -42,22 +36,7 @@
(click)="onClickSearchAndPrev()"
class="btn-toggle"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-arrow-up"
>
<path d="M3.3,9v6.7c0,0.9,0.7,1.7,1.7,1.7h10c0.9,0,1.7-0.7,1.7-1.7V9" />
<polyline class="st0" points="13.3,6 10,2.7 6.7,6 " />
<line class="st0" x1="10" y1="2.7" x2="10" y2="12.5" />
</svg>
<i class="mid mdi-arrow-up"></i>
</button>
<button class="icon-button btn-search" (click)="onClickPrevSearch()">
<i class="mid mdi-arrow-up"></i>

109
projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss
View File

@ -1,5 +1,6 @@
$tablet-l-width: 1024px;
$tablet-s-width: 768px;
$search-item-color: #ffffff;
.chatroom-search {
display: flex;
@ -18,14 +19,17 @@ $tablet-s-width: 768px;
}
form {
display: inline-flex;
flex: 0 0 auto;
width: 100%;
.icon-img {
color: $search-item-color;
}
@media screen and (max-width: #{$tablet-s-width}),
(max-height: 600px) {
.icon-img {
display: none;
}
}
.mat-form-field {
flex-flow: row;
flex: 1 1 auto;
width: 70%;
align-items: center;
display: flex;
.mat-form-field-label,
.mat-hint {
color: rgba(0, 0, 0, 0.54);
@ -46,61 +50,6 @@ $tablet-s-width: 768px;
}
}
::ng-deep .search-form {
form {
.icon-search {
height: 100%;
display: flex;
align-self: center;
color: #ffffff;
margin-right: 10px;
}
@media screen and (max-width: #{$tablet-s-width}),
(max-height: 600px) {
.icon-search {
display: none;
}
}
.mat-form-field-appearance-legacy {
.mat-form-field-wrapper {
color: #ffffff;
width: 100%;
padding-bottom: 0.8em;
.mat-form-field-infix {
.mat-input-element {
font-size: 1em;
}
}
.mat-form-field-suffix {
button {
position: relative;
transform: translateY(2px);
.mat-button-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
font-size: 1.2em;
}
}
}
.mat-form-field-label {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 1em;
}
.mat-form-field-underline {
height: 0;
.mat-form-field-ripple {
top: 6px;
height: 1px;
overflow: hidden;
display: none;
}
}
}
}
}
}
::ng-deep .chat-search {
margin: 0 4px 4px;
padding: 6px;
@ -111,40 +60,12 @@ $tablet-s-width: 768px;
.search-form {
form {
display: flex;
i {
icon-img {
display: none;
}
}
}
}
.search-form {
form {
display: flex;
.mat-form-field {
.mat-form-field-wrapper {
padding: 0;
display: flex;
flex: 1 1 auto;
.mat-form-field-infix {
border: 0;
padding: 0;
width: auto;
input {
margin: 0;
}
.mat-form-field-label-wrapper {
top: 0;
.mat-form-field-label {
top: 0;
font-size: 0.9em;
}
}
}
}
}
}
}
}
::ng-deep .chatroom-search {
@ -161,22 +82,18 @@ $tablet-s-width: 768px;
align-self: center;
width: 30px;
height: 30px;
color: #ffffff;
color: $search-item-color;
}
}
}
.btn-close-searchbox {
width: 36px;
height: 100%;
//background: #0367a6;
stroke: #ffffff;
stroke: $search-item-color;
border: none;
display: flex;
justify-content: center;
justify-items: center;
svg {
stroke: #ffffff;
}
}
}

87
projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
View File

@ -13,3 +13,90 @@ textarea {
-webkit-appearance: none;
outline: none;
}
.input-lineless {
form {
display: flex;
flex: 0 0 auto;
width: 100%;
.mat-form-field-appearance-legacy {
.mat-form-field-wrapper {
color: #ffffff;
width: 100%;
padding-bottom: 0.8em;
.mat-form-field-infix {
.mat-input-element {
font-size: 1em;
}
}
.mat-form-field-suffix {
button {
position: relative;
transform: translateY(2px);
.mat-button-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
font-size: 1.2em;
}
}
}
.mat-form-field-label {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 1em;
}
.mat-form-field-underline {
height: 0;
.mat-form-field-ripple {
top: 6px;
height: 1px;
overflow: hidden;
display: none;
}
}
}
}
.icon-img {
align-items: center;
justify-content: center;
height: 100%;
display: flex;
align-self: center;
margin-right: 10px;
}
}
.mat-form-field {
flex-flow: row;
flex: 1 1 auto;
width: 90%;
align-items: center;
display: flex;
.mat-form-field-wrapper {
padding: 0;
display: flex;
flex: 1 1 auto;
.mat-form-field-infix {
border: 0;
padding: 0;
width: auto;
input {
margin: 0;
}
.mat-form-field-label-wrapper {
top: 0;
.mat-form-field-label {
top: 0;
color: rgba(255, 255, 255, 0.7) !important;
font-size: 0.9em;
}
}
}
.mat-form-field-underline {
display: none;
}
}
}
}

3
projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss
View File

@ -25,7 +25,8 @@ mat-icon {
}
}
.icon-button {
.icon-button,
.icon-img {
display: flex;
justify-content: center;
justify-items: center;

7
projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html
View File

@ -1,5 +1,9 @@
<div class="search-container">
<mat-form-field appearance="outline">
<span class="icon-img">
<i class="mid mdi-magnify"></i>
</span>
<!--<mat-form-field appearance="outline">-->
<mat-form-field>
<input
matInput
#searchWordInput
@ -7,6 +11,5 @@
(keydown.enter)="onKeyDownEnter(searchWordInput.value)"
[value]="!!searchWord ? searchWord : ''"
/>
<mat-icon matPrefix>search</mat-icon>
</mat-form-field>
</div>

10
projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss
View File

@ -1,3 +1,13 @@
.search-container {
-webkit-app-region: no-drag;
display: flex;
flex-flow: row;
align-items: center;
width: 250px;
max-width: 250px;
color: #ffffff;
font-size: 0.9em;
.icon-img {
flex: 0 0 auto;
}
}