Merge pull request #5489 from fsih/editThumbnailButton

Edit thumbnail button

src/views/studio/icons/edit-icon.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9577C9.96446 16.0524 9.85758 16.1132 9.72976 16.1709L7.56659 17.0793C7.48799 16.8113 7.29336 16.4707 6.93361 16.1109C6.58592 15.7633 6.25738 15.5807 5.99914 15.4901L6.89672 13.3378C6.94337 13.199 7.0271 13.0934 7.1208 12.9997C7.14262 12.9998 7.16333 12.9791 7.17418 12.9682L7.20476 12.9376C7.35075 12.7917 7.55585 12.7028 7.79617 12.6709C8.40705 12.5953 9.11521 12.8852 9.64935 13.4193C10.1835 13.9535 10.4734 14.6616 10.3857 15.2605C10.3505 15.458 10.2854 15.6613 10.1833 15.8116C10.1529 15.864 10.1114 15.9055 10.069 15.9479L10.0592 15.9577ZM13.6054 6.53701C13.9427 6.19967 14.4603 6.12739 14.9902 6.28635C15.2973 6.37845 15.4255 6.75916 15.2154 6.96926L10.177 12.0077C10.0566 12.128 9.86135 12.1478 9.70333 12.047C9.54003 11.9449 9.37127 11.857 9.20119 11.7836C8.92376 11.664 8.82736 11.315 9.02168 11.1207L13.6054 6.53701ZM16.5317 9.46328L11.9489 14.046C11.7586 14.2364 11.4084 14.1545 11.2923 13.8845C11.2173 13.705 11.1239 13.5307 11.0163 13.362C10.9099 13.1964 10.9364 12.99 11.0616 12.8648L16.0882 7.83815C16.2964 7.63003 16.677 7.75614 16.7711 8.06339C16.9356 8.59871 16.871 9.12397 16.5317 9.46328ZM18.5347 4.534C17.2459 3.24525 15.3869 3.01376 14.3838 4.01691L6.29247 12.1082C6.09421 12.3065 5.91898 12.5278 5.81284 12.7984L4.10642 16.8959C3.89183 17.4132 4.05796 18.0587 4.53397 18.5347C5.00998 19.0107 5.65549 19.1769 6.1728 18.9623L10.2703 17.2558C10.5398 17.1486 10.7611 16.9734 10.9594 16.7751L19.0507 8.68382C20.0538 7.68067 19.8234 5.82274 18.5347 4.534Z" fill="#4C97FF"/>
+</svg>

src/views/studio/l10n.json

@@ -41,6 +41,8 @@
     "studio.unfollowStudio": "Unfollow Studio",
     "studio.followStudio": "Follow Studio",
 
+    "studio.editThumbnail": "Edit Thumbnail",
+
     "studio.curatorsHeader": "Curators",
     "studio.inviteCuratorsHeader": "Invite Curators",
     "studio.inviteCurator": "Invite",

src/views/studio/studio-image.jsx

@@ -15,6 +15,8 @@ import ValidationMessage from '../../components/forms/validation-message.jsx';
 import StudioMuteEditMessage from './studio-mute-edit-message.jsx';
 
 
+import editIcon from './icons/edit-icon.svg';
+
 const errorToMessageId = error => {
     switch (error) {
     case Errors.THUMBNAIL_INVALID: return 'studio.updateErrors.thumbnailInvalid';
@@ -35,6 +37,10 @@ const StudioImage = ({
     });
     let src = image || blankImage;
     if (uploadPreview && !imageError) src = uploadPreview;
+    const labelFieldClassName = classNames({
+        'mod-mutating': isMutating,
+        'mod-clickable': !isMutating
+    });
 
     const [showMuteMessage, setShowMuteMessage] = useState(false);
     return (
@@ -49,7 +55,22 @@ const StudioImage = ({
             />
             {(isMutedEditor || canEditInfo) && !isFetching &&
                 <React.Fragment>
+                    <label
+                        htmlFor="studio-thumb-edit-input"
+                        className={labelFieldClassName}
+                    >
+                        <div className="studio-thumb-edit-button">
+                            <img
+                                className="studio-thumb-edit-img"
+                                src={editIcon}
+                            />
+
+                            <FormattedMessage id="studio.editThumbnail" />
+                        </div>
+                    </label>
                     <input
+                        id="studio-thumb-edit-input"
+                        className="hidden"
                         disabled={isMutating || !canEditInfo}
                         type="file"
                         accept="image/*"

src/views/studio/studio.scss

@@ -438,6 +438,23 @@ $radius: 8px;
     }
 }
 
+.hidden {
+    display: none;
+}
+
+.studio-thumb-edit-button {
+    color: #4C97FF;
+    font-size: 1rem;
+    font-weight: bold;
+    height: 40px;
+    display: flex;
+    align-items: center;
+}
+
+.studio-thumb-edit-img {
+    padding-right: 10px;
+}
+
 .studio-admin-panel {
     margin-top: 51px;
     border: 0;