apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

message box popover

Browse Source
pull/7748/head
Karl Prieb 8 years ago
parent 21ca3b6546
commit 8c2cf18a8a
2 changed files with 124 additions and 5 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 31
      packages/rocketchat-theme/client/imports/general/forms.css
  2. 98
      packages/rocketchat-ui-message/client/messageBox.html

31
packages/rocketchat-theme/client/imports/general/forms.css
Unescape View File

@ -255,6 +255,37 @@
justify-content: center;
height: 21px;
align-items: center;
& .rc-input__icon-svg--plus {
transition: transform 0.2s linear;
}
}
&__action-label {
position: relative;
& #rc-message-box__action-input:checked ~ .rc-message-box__icon .rc-input__icon-svg {
transform: rotate(45deg);
}
& .rc-popover {
bottom: 30px;
right: 8px;
&__column {
justify-content: space-between;
}
&__title {
font-size: 0.75rem;
color: #9ea2a8;
text-transform: none;
}
&__item {
padding: 1px 0;
}
}
}
}

98
packages/rocketchat-ui-message/client/messageBox.html
Unescape View File

@ -27,11 +27,99 @@
</svg>
</div>
<textarea autofocus dir="auto" name="msg" maxlength="{{maxMessageLength}}" placeholder="{{_ 'Message'}}" rows="1" class="rc-message-box__textarea js-input-message autogrow-short"></textarea>
<div class="rc-message-box__icon">
<svg class="rc-input__icon-svg rc-input__icon-svg--plus">
<use href="#icon-plus"></use>
</svg>
</div>
<label class="rc-message-box__action-label" for="rc-message-box__action-input" data-popover="label">
<input id="rc-message-box__action-input" type="checkbox" class="rc-popover-anchor" data-popover="anchor">
<div class="rc-popover" data-popover="popover">
<div class="rc-popover__content">
<div class="rc-popover__column">
<h3 class="rc-popover__title">Create new</h3>
<ul class="rc-popover__list">
<li class="rc-popover__item" data-action="open" data-open="account">
<span class="rc-popover__icon">
<svg class="rc-popover__icon-element rc-popover__icon-element--user">
<use href="#icon-user"></use>
</svg>
</span>
<span class="rc-popover__item-text">{{_ "My_Account"}}</span>
</li>
<li class="rc-popover__item" data-action="open" data-open="account">
<span class="rc-popover__icon">
<svg class="rc-popover__icon-element rc-popover__icon-element--user">
<use href="#icon-user"></use>
</svg>
</span>
<span class="rc-popover__item-text">{{_ "My_Account"}}</span>
</li>
<li class="rc-popover__item" data-action="open" data-open="account">
<span class="rc-popover__icon">
<svg class="rc-popover__icon-element rc-popover__icon-element--user">
<use href="#icon-user"></use>
</svg>
</span>
<span class="rc-popover__item-text">{{_ "My_Account"}}</span>
</li>
<li class="rc-popover__item" data-action="open" data-open="account">
<span class="rc-popover__icon">
<svg class="rc-popover__icon-element rc-popover__icon-element--user">
<use href="#icon-user"></use>
</svg>
</span>
<span class="rc-popover__item-text">{{_ "My_Account"}}</span>
</li>
<li class="rc-popover__item" data-action="open" data-open="account">
<span class="rc-popover__icon">
<svg class="rc-popover__icon-element rc-popover__icon-element--user">
<use href="#icon-user"></use>
</svg>
</span>
<span class="rc-popover__item-text">{{_ "My_Account"}}</span>
</li>
</ul>
</div>
<div class="rc-popover__column">
<div class="rc-popover__stretched-item">
<h3 class="rc-popover__title">Add files from</h3>
<ul class="rc-popover__list">
<li class="rc-popover__item" data-action="open" data-open="account">
<span class="rc-popover__icon">
<svg class="rc-popover__icon-element rc-popover__icon-element--user">
<use href="#icon-user"></use>
</svg>
</span>
<span class="rc-popover__item-text">{{_ "My_Account"}}</span>
</li>
<li class="rc-popover__item" data-action="open" data-open="account">
<span class="rc-popover__icon">
<svg class="rc-popover__icon-element rc-popover__icon-element--user">
<use href="#icon-user"></use>
</svg>
</span>
<span class="rc-popover__item-text">{{_ "My_Account"}}</span>
</li>
</ul>
</div>
<div class="rc-popover__stretched-item">
<h3 class="rc-popover__title">Share</h3>
<ul class="rc-popover__list">
<li class="rc-popover__item" data-action="open" data-open="account">
<span class="rc-popover__icon">
<svg class="rc-popover__icon-element rc-popover__icon-element--user">
<use href="#icon-user"></use>
</svg>
</span>
<span class="rc-popover__item-text">{{_ "My_Account"}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="rc-message-box__icon">
<svg class="rc-input__icon-svg rc-input__icon-svg--plus">
<use href="#icon-plus"></use>
</svg>
</div>
</label>
</div>
<div class="rc-message-box__toolbar-markdown">
<!-- {{#if allowedToSend}}

Write Preview
Loading…
Cancel
Save