Search UI and caret
This commit is contained in:
parent
e7d3bc6d35
commit
0ee01fc8fd
|
@ -82,6 +82,9 @@ $session-margin-sm: 10px;
|
|||
$session-margin-md: 15px;
|
||||
$session-margin-lg: 20px;
|
||||
|
||||
$session-search-input-height: 34px;
|
||||
|
||||
|
||||
div.spacer-sm {
|
||||
height: $session-margin-sm;
|
||||
}
|
||||
|
@ -194,6 +197,9 @@ $session_message-container-border-radius: 5px;
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.session-button {
|
||||
@mixin transparent-background($textAndBorderColor) {
|
||||
background-color: Transparent;
|
||||
|
|
|
@ -102,7 +102,7 @@ $session-compose-margin: 20px;
|
|||
&__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 28px 7px 28px 0px;
|
||||
padding: 28px 7px 28px 0px;
|
||||
|
||||
background-color: $session-shade-3;
|
||||
|
||||
|
@ -212,7 +212,7 @@ $session-compose-margin: 20px;
|
|||
}
|
||||
|
||||
.session-search-input {
|
||||
height: 34px;
|
||||
height: $session-search-input-height;
|
||||
width: 100%;
|
||||
margin-right: 1px;
|
||||
margin-bottom: 10px;
|
||||
|
@ -393,6 +393,28 @@ $session-compose-margin: 20px;
|
|||
&-input-group {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&-input-button .session-button.square{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
height: $session-search-input-height;
|
||||
width: $session-search-input-height;
|
||||
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
||||
svg {
|
||||
transition: $session-transition-duration;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
svg {
|
||||
fill: $session-color-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-text-divider {
|
||||
|
|
|
@ -125,8 +125,13 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
|
|||
<SessionButton
|
||||
buttonType={SessionButtonType.Square}
|
||||
buttonColor={SessionButtonColor.Green}
|
||||
text={'>'}
|
||||
/>
|
||||
>
|
||||
<SessionIcon
|
||||
iconType={SessionIconType.Caret}
|
||||
iconSize={SessionIconSize.Large}
|
||||
|
||||
/>
|
||||
</SessionButton>
|
||||
</div>
|
||||
</div>
|
||||
{this.renderCategories()}
|
||||
|
|
|
@ -23,7 +23,7 @@ export enum SessionButtonColor {
|
|||
}
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
text?: string;
|
||||
buttonType: SessionButtonType;
|
||||
buttonColor: SessionButtonColor;
|
||||
onClick: any;
|
||||
|
@ -57,7 +57,7 @@ export class SessionButton extends React.PureComponent<Props> {
|
|||
role="button"
|
||||
onClick={this.clickHandler}
|
||||
>
|
||||
{text}
|
||||
{this.props.children || text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
export enum SessionIconType {
|
||||
AddUser = 'addUser',
|
||||
Arrow = 'arrow',
|
||||
Caret = 'caret',
|
||||
ChatBubble = 'chatBubble',
|
||||
Check = 'check',
|
||||
Chevron = 'chevron',
|
||||
|
@ -47,6 +48,11 @@ export const icons = {
|
|||
'M33.187,12.438 L6.097,12.438 L16.113,2.608 C16.704,2.027 16.713,1.078 16.133,0.486 C15.551,-0.105 14.602,-0.113 14.011,0.466 L1.407,12.836 C1.121,13.117 0.959,13.5 0.957981241,13.9 C0.956,14.3 1.114,14.685 1.397,14.968 L14.022,27.593 C14.315,27.886 14.699,28.032 15.083,28.032 C15.466,28.032 15.85,27.886 16.143,27.593 C16.729,27.007 16.729,26.057 16.143,25.472 L6.109,15.438 L33.187,15.438 C34.015,15.438 34.687,14.766 34.687,13.938 C34.687,13.109 34.015,12.438 33.187,12.438',
|
||||
viewBox: '0 -4 37 37',
|
||||
},
|
||||
[SessionIconType.Caret]: {
|
||||
path:
|
||||
'M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z',
|
||||
viewBox: '-200 -200 640 640',
|
||||
},
|
||||
[SessionIconType.ChatBubble]: {
|
||||
path:
|
||||
'M6.29289322,16.2928932 C6.4804296,16.1053568 6.73478351,16 7,16 L19,16 C19.5522847,16 20,15.5522847 20,15 L20,5 C20,4.44771525 19.5522847,4 19,4 L5,4 C4.44771525,4 4,4.44771525 4,5 L4,18.5857864 L6.29289322,16.2928932 Z M7.41421356,18 L3.70710678,21.7071068 C3.07714192,22.3370716 2,21.8909049 2,21 L2,5 C2,3.34314575 3.34314575,2 5,2 L19,2 C20.6568542,2 22,3.34314575 22,5 L22,15 C22,16.6568542 20.6568542,18 19,18 L7.41421356,18 Z',
|
||||
|
|
Loading…
Reference in New Issue