mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Improvement variable height in single column layout 

Port d93b82af87 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
pull/1112/head
Takeshi Umeda 2019-06-02 17:05:54 +09:00 committed by ThibG
parent 02d6187894
commit 1329308bc7
7 changed files with 93 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/javascript/flavours/glitch/components/autosuggest_textarea.js
View File

@ -192,7 +192,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
}
render () {
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, children } = this.props;
const { suggestionsHidden } = this.state;
const style = { direction: 'ltr' };
@ -200,7 +200,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
style.direction = 'rtl';
}
return (
return [
<div className='compose-form__autosuggest-wrapper'>
<div className='autosuggest-textarea'>
<label>
<span style={{ display: 'none' }}>{placeholder}</span>
@ -222,12 +223,15 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
aria-autocomplete='list'
/>
</label>
</div>
{children}
</div>,
<div className='autosuggest-textarea__suggestions-wrapper'>
<div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
{suggestions.map(this.renderSuggestion)}
</div>
</div>
);
</div>,
];
}
}

13
app/javascript/flavours/glitch/features/compose/components/compose_form.js
View File

@ -335,8 +335,9 @@ class ComposeForm extends ImmutablePureComponent {
/>
</div>
<div className='composer--textarea'>
<TextareaIcons advancedOptions={advancedOptions} />
<div className='emoji-picker-wrapper'>
<EmojiPicker onPickEmoji={handleEmoji} />
</div>
<AutosuggestTextarea
ref={this.setAutosuggestTextarea}
@ -352,15 +353,13 @@ class ComposeForm extends ImmutablePureComponent {
onSuggestionSelected={this.onSuggestionSelected}
onPaste={onPaste}
autoFocus={!showSearch && !isMobile(window.innerWidth, layout)}
/>
<EmojiPicker onPickEmoji={handleEmoji} />
</div>
>
<TextareaIcons advancedOptions={advancedOptions} />
<div className='compose-form__modifiers'>
<UploadFormContainer />
<PollFormContainer />
</div>
</AutosuggestTextarea>
<OptionsContainer
advancedOptions={advancedOptions}

3
app/javascript/flavours/glitch/features/ui/components/compose_panel.js
View File

@ -9,9 +9,6 @@ const ComposePanel = () => (
<SearchContainer openInRoute />
<NavigationContainer />
<ComposeFormContainer />
<div className='flex-spacer' />
<LinkFooter withHotkeys />
</div>
);

2
app/javascript/flavours/glitch/features/ui/index.js
View File

@ -320,7 +320,7 @@ export default class UI extends React.Component {
handleHotkeyNew = e => {
e.preventDefault();
const element = this.node.querySelector('.composer--textarea textarea');
const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea');
if (element) {
element.focus();

17
app/javascript/flavours/glitch/styles/components/composer.scss
View File

@ -12,7 +12,8 @@
opacity: 0.0;
&.composer--spoiler--visible {
height: 47px;
height: 36px;
margin-bottom: 11px;
opacity: 1.0;
}
@ -98,6 +99,9 @@
border-radius: 4px;
padding: 10px;
background: $ui-primary-color;
min-height: 23px;
overflow-y: auto;
flex: 0 2 auto;
& > header {
margin-bottom: 5px;
@ -218,6 +222,7 @@
position: absolute;
right: 5px;
top: 5px;
z-index: 1;
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {
@ -225,7 +230,7 @@
}
}
.composer--textarea,
.compose-form__autosuggest-wrapper,
.autosuggest-input {
position: relative;
@ -284,6 +289,12 @@
}
}
.emoji-picker-wrapper,
.autosuggest-textarea__suggestions-wrapper {
position: relative;
height: 0;
}
.autosuggest-textarea__suggestions {
display: block;
position: absolute;
@ -485,6 +496,7 @@
box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
border-radius: 0 0 4px 4px;
height: 27px;
flex: 0 0 auto;
& > * {
display: inline-block;
@ -575,6 +587,7 @@
text-align: right;
white-space: nowrap;
overflow: hidden;
justify-content: flex-end;
& > .count {
display: inline-block;

27
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -818,7 +818,8 @@
margin-top: 10px;
display: flex;
flex-direction: column;
height: 100%;
height: calc(100% - 10px);
overflow-y: hidden;
.search__input {
line-height: 18px;
@ -834,14 +835,33 @@
.navigation-bar {
padding-top: 20px;
padding-bottom: 20px;
flex: 0 1 48px;
min-height: 20px;
}
.flex-spacer {
background: transparent;
}
.compose-form {
flex: 1;
overflow-y: hidden;
display: flex;
flex-direction: column;
min-height: 310px;
padding-bottom: 71px;
margin-bottom: -71px;
}
.compose-form__autosuggest-wrapper {
overflow-y: auto;
background-color: $white;
border-radius: 4px 4px 0 0;
flex: 0 1 auto;
}
.autosuggest-textarea__textarea {
max-height: 200px;
overflow-y: hidden;
}
.compose-form__upload-thumbnail {
@ -851,6 +871,9 @@
.navigation-panel {
margin-top: 10px;
margin-bottom: 10px;
height: calc(100% - 20px);
overflow-y: auto;
hr {
border: 0;

2
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
View File

@ -125,7 +125,7 @@
// Change the default color of several parts of the compose form
.composer {
.composer--spoiler input, .composer--textarea textarea {
.composer--spoiler input, .compose-form__autosuggest-wrapper textarea {
color: lighten($ui-base-color, 80%);
&:disabled { background: lighten($simple-background-color, 10%) }