scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 17:45:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Make the border of editable fields dashed gray for studios. Otherwise, make them match the fields on project pages.

Browse source
This commit is contained in:
DD Liu 2021-06-15 01:58:04 -04:00
parent 016b7720f4
commit 8ea97e4577
3 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/views/studio/studio-description.jsx
View file

@ -12,6 +12,7 @@ import {
Errors, mutateStudioDescription, selectIsMutatingDescription, selectDescriptionMutationError
} from '../../redux/studio-mutations';
import '../../components/forms/inplace-input.scss';
import ValidationMessage from '../../components/forms/validation-message.jsx';
import decorateText from '../../lib/decorate-text.jsx';
import StudioMuteEditMessage from './studio-mute-edit-message.jsx';
@ -52,7 +53,7 @@ const StudioDescription = ({
<React.Fragment>
<textarea
rows="20"
className={fieldClassName}
className={classNames('inplace-textarea', fieldClassName)}
disabled={isMutating || isFetching || isMutedEditor}
defaultValue={description}
onBlur={e => {
@ -67,7 +68,7 @@ const StudioDescription = ({
{showMuteMessage && <StudioMuteEditMessage />}
</React.Fragment>
) : (
<div className={fieldClassName}>
<div className={classNames('uneditable', fieldClassName)}>
{decorateText(description, {
usernames: true,
hashtags: false,

3
src/views/studio/studio-title.jsx
View file

@ -6,6 +6,7 @@ import classNames from 'classnames';
import {FormattedMessage} from 'react-intl';
import onClickOutside from 'react-onclickoutside';
import '../../components/forms/inplace-input.scss';
import {selectStudioTitle, selectIsFetchingInfo} from '../../redux/studio';
import {selectCanEditInfo, selectShowEditMuteError} from '../../redux/studio-permissions';
import {Errors, mutateStudioTitle, selectIsMutatingTitle, selectTitleMutationError} from '../../redux/studio-mutations';
@ -47,7 +48,7 @@ const StudioTitle = ({
{canEditInfo || isMutedEditor ? (
<React.Fragment>
<textarea
className={fieldClassName}
className={classNames('inplace-textarea', fieldClassName)}
disabled={isMutating || !canEditInfo || isFetching}
defaultValue={title}
onKeyDown={e => e.key === 'Enter' && e.target.blur()}

27
src/views/studio/studio.scss
View file

@ -119,10 +119,6 @@ $radius: 8px;
}
.studio-description {
background: $ui-blue-10percent;
padding: 15px 20px;
border-color: transparent;
border-radius: $radius;
word-wrap: break-word;
white-space: pre-wrap;
width: 300px;
@ -135,17 +131,26 @@ $radius: 8px;
height: 18rem;
}
}
}
/* Overrides for when title and description are editable textareas */
&.uneditable {
background: $ui-blue-10percent;
padding: 15px 20px;
border-color: transparent;
border-radius: $radius;
}
}
/* Overrides for when title and description are editable textareas. These override inplace-input */
textarea.studio-title, textarea.studio-description {
background: transparent;
padding: 5px 8px;
border: 2px dashed $ui-blue-25percent;
border-radius: $radius;
resize: none;
width: 300px;
box-sizing: border-box;
line-height: 1.2em;
&:not(:focus) {
background: transparent;
border: 2px dashed $ui-dark-gray;
border-radius: $radius;
}
}
.studio-image {