redesign study share/download screen

kran0 · Jan 15, 2018 · 9f91926 · 9f91926
1 parent ea28dc8
commit 9f91926
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 144 deletions.
diff --git a/public/stylesheets/study.css b/public/stylesheets/study.css
@@ -45,31 +45,6 @@ form.chapter_form.material.form .form-group textarea {
   line-height: 1.2em;
   font-size: 0.9em;
 }
-.form.share input {
-  font-size: 13px!important;
-}
-.form.share .ply-wrap {
-  margin-top: -5px;
-  text-align: left;
-  opacity: 0.7;
-  font-size: 0.8rem;
-}
-.form.share .ply {
-  cursor: pointer;
-}
-.form.share .ply input {
-  margin-right: 5px;
-  vertical-align: middle;
-}
-.form.share .fen {
-  overflow: hidden;
-  font-family: monospace;
-  font-size: 10px;
-  white-space: nowrap;
-  margin: -1rem 0 1rem 0;
-  background: #f0f0f0;
-  border-radius: 5px;
-}
 div.underboard {
   margin-top: 17px;
   min-height: 370px;
@@ -78,9 +53,6 @@ div.underboard {
   background: #e0e0e0;
   line-height: 30px;
 }
-.underboard_form .close {
-  float: right;
-}
 div.underboard .notif {
   margin: -20px 0 20px 0;
   width: 100%;
@@ -435,16 +407,9 @@ div.underboard .notif.error {
   opacity: 0.7;
   color: #3893E8;
 }
-.study_overboard a.form-help:hover {
+.material.form a.form-help:hover {
   text-decoration: underline;
 }
-.study_overboard .downloads {
-  display: flex;
-  justify-content: space-between;
-}
-.study_overboard .downloads a {
-  font-weight: normal;
-}
 .study_buttons {
   display: flex;
   justify-content: space-between;
@@ -548,10 +513,43 @@ div.underboard .notif.error {
   align-items: content;
   height: 200px;
 }
+.study_share input {
+  font-size: 13px!important;
+}
+.study_share .ply-wrap {
+  margin-top: -5px;
+  text-align: left;
+  opacity: 0.7;
+  font-size: 0.8rem;
+}
+.study_share .ply {
+  cursor: pointer;
+}
+.study_share .ply input {
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.study_share .fen {
+  overflow: hidden;
+  font-family: monospace;
+  font-size: 11px;
+  line-heigth: 2em;
+  white-space: nowrap;
+  margin: -1rem 0 1rem 0;
+  padding: 1em;
+  background: #f0f0f0;
+  border-radius: 5px;
+}
+.study_share .downloads {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 20px 20px 20px;
+}
 .server_eval,
 .study_glyph_form,
 .study_comment_form,
-.study_metadata {
+.study_metadata,
+.study_share {
   border-top: 2px solid #3893E8 !important;
 }
 .underboard .disabled {
@@ -565,7 +563,7 @@ body.dark .study_comments .comment,
 body.dark .glyph_form i::before {
   background: #262626;
 }
-body.dark .form.share .fen,
+body.dark .study_share .fen,
 body.dark .glyph_form a:hover {
   background: #383838;
 }

diff --git a/ui/analyse/src/study/dialog.ts b/ui/analyse/src/study/dialog.ts
@@ -12,7 +12,7 @@ interface Dialog {
 export function form(d: Dialog): VNode {
   return h('div.lichess_overboard.study_overboard.' + d.class, {
     hook: {
-      insert: _ => window.lichess.loadCss('/assets/stylesheets/material.form.css')
+      insert() { window.lichess.loadCss('/assets/stylesheets/material.form.css') }
     }
   }, ([
     h('a.close.icon', {

diff --git a/ui/analyse/src/study/gamebook/gamebookButtons.ts b/ui/analyse/src/study/gamebook/gamebookButtons.ts
@@ -3,7 +3,6 @@ import { VNode } from 'snabbdom/vnode'
 import { bind, dataIcon } from '../../util';
 import AnalyseCtrl from '../../ctrl';
 import { StudyCtrl } from '../interfaces';
-import { shareButton } from '../studyView';
 
 export function playButtons(root: AnalyseCtrl): VNode | undefined {
   const study = root.study!,
@@ -13,7 +12,6 @@ export function playButtons(root: AnalyseCtrl): VNode | undefined {
   fb = state.feedback,
   myTurn = fb === 'play';
   return h('div.study_buttons', [
-    shareButton(study),
     h('div.gb_buttons', [
       root.path ? h('a.fbt.text.back', {
         attrs: dataIcon('I'),

diff --git a/ui/analyse/src/study/interfaces.ts b/ui/analyse/src/study/interfaces.ts
@@ -54,7 +54,7 @@ export interface StudyCtrl {
 }
 
 export type Tab = 'members' | 'chapters';
-export type ToolTab = 'tags' | 'comments' | 'glyphs' | 'serverEval';
+export type ToolTab = 'tags' | 'comments' | 'glyphs' | 'serverEval' | 'share';
 
 export interface StudyVm {
   loading: boolean;

diff --git a/ui/analyse/src/study/studyShare.ts b/ui/analyse/src/study/studyShare.ts
@@ -1,6 +1,5 @@
 import { h } from 'snabbdom'
 import { VNode } from 'snabbdom/vnode'
-import * as dialog from './dialog';
 import { bind } from '../util';
 import { prop } from 'common';
 import { renderIndexAndMove } from '../moveView';
@@ -26,13 +25,8 @@ function fromPly(ctrl): VNode {
 }
 
 export function ctrl(data: StudyData, currentChapter: () => StudyChapterMeta, currentNode: () => Tree.Node, redraw: () => void) {
-  const open = prop(false);
   const withPly = prop(false);
   return {
-    open,
-    toggle() {
-      open(!open());
-    },
     studyId: data.id,
     chapter: currentChapter,
     isPrivate() {
@@ -45,10 +39,8 @@ export function ctrl(data: StudyData, currentChapter: () => StudyChapterMeta, cu
   }
 }
 
-export function view(ctrl): VNode | undefined {
-  if (!ctrl.open()) return;
-  const studyId = ctrl.studyId;
-  const chapter = ctrl.chapter();
+export function view(ctrl): VNode {
+  const studyId = ctrl.studyId, chapter = ctrl.chapter();
   let fullUrl = baseUrl + studyId + '/' + chapter.id;
   let embedUrl = baseUrl + 'embed/' + studyId + '/' + chapter.id;
   const isPrivate = ctrl.isPrivate();
@@ -57,86 +49,83 @@ export function view(ctrl): VNode | undefined {
     fullUrl += '#' + p;
     embedUrl += '#' + p;
   }
-  return dialog.form({
-    onClose: function() {
-      ctrl.open(false);
-      ctrl.redraw();
-    },
-    content: [
-      h('h2', 'Share & export'),
-      h('form.material.form.share', [
-        h('div.form-group.little-margin-bottom', [
-          h('input.has-value.autoselect', {
-            attrs: {
-              readonly: true,
-              value: baseUrl + studyId
-            }
-          }),
-          h('label.control-label', 'Study URL'),
-          h('i.bar')
-        ]),
-        h('div.form-group', [
-          h('input.has-value.autoselect', {
-            attrs: {
-              readonly: true,
-              value: fullUrl
-            }
-          }),
+  return h('div.study_share.underboard_form.box', {
+    hook: {
+      insert() { window.lichess.loadCss('/assets/stylesheets/material.form.css') }
+    }
+  }, [
+    h('div.downloads', [
+      ctrl.cloneable ? h('a.button.text', {
+        attrs: {
+          'data-icon': '4',
+          href: '/study/' + studyId + '/clone'
+        }
+      }, 'Clone') : null,
+      h('a.button.text', {
+        attrs: {
+          'data-icon': 'x',
+          href: '/study/' + studyId + '.pgn'
+        }
+      }, 'Study PGN'),
+      h('a.button.text', {
+        attrs: {
+          'data-icon': 'x',
+          href: '/study/' + studyId + '/' + chapter.id + '.pgn'
+        }
+      }, 'Chapter PGN')
+    ]),
+    h('form.material.form', [
+      h('div.form-group.little-margin-bottom', [
+        h('input.has-value.autoselect', {
+          attrs: {
+            readonly: true,
+            value: baseUrl + studyId
+          }
+        }),
+        h('label.control-label', 'Study URL'),
+        h('i.bar')
+      ]),
+      h('div.form-group', [
+        h('input.has-value.autoselect', {
+          attrs: {
+            readonly: true,
+            value: fullUrl
+          }
+        }),
+        fromPly(ctrl),
+        !isPrivate ? h('p.form-help.text', {
+          attrs: { 'data-icon': '' }
+        }, 'You can paste this in the forum to embed the chapter.') : null,
+        h('label.control-label', 'Current chapter URL'),
+        h('i.bar')
+      ]),
+      h('div.form-group', [
+        h('input.has-value.autoselect', {
+          attrs: {
+            readonly: true,
+            disabled: isPrivate,
+            value: !isPrivate ? '<iframe width=600 height=371 src="' + embedUrl + '" frameborder=0></iframe>' : 'Only public studies can be embedded!'
+          }
+        })
+      ].concat(
+        !isPrivate ? [
           fromPly(ctrl),
-          !isPrivate ? h('p.form-help.text', {
-            attrs: { 'data-icon': '' }
-          }, 'You can paste this in the forum to embed the chapter.') : null,
-          h('label.control-label', 'Current chapter URL'),
-          h('i.bar')
-        ]),
-        h('div.form-group', [
-          h('input.has-value.autoselect', {
-            attrs: {
-              readonly: true,
-              disabled: isPrivate,
-              value: !isPrivate ? '<iframe width=600 height=371 src="' + embedUrl + '" frameborder=0></iframe>' : 'Only public studies can be embedded!'
-            }
-          })
-        ].concat(
-          !isPrivate ? [
-            fromPly(ctrl),
-            h('a.form-help.text', {
-              attrs: {
-                href: '/developers#embed-study',
-                target: '_blank',
-                'data-icon': ''
-              }
-            }, 'Read more about embedding a study chapter'),
-            h('label.control-label', 'Embed current chapter in your website or blog')
-          ] : []).concat(h('i.bar'))
-        ),
-        h('div.fen', {
-          attrs: { title: 'FEN - click to select' },
-          hook: bind('click', e => {
-            window.getSelection().selectAllChildren((e.target as HTMLElement))
-          })
-        }, ctrl.currentNode().fen),
-        h('div.downloads', [
-          ctrl.cloneable ? h('a.button.text', {
-            attrs: {
-              'data-icon': '4',
-              href: '/study/' + studyId + '/clone'
-            }
-          }, 'Clone') : null,
-          h('a.button.text', {
-            attrs: {
-              'data-icon': 'x',
-              href: '/study/' + studyId + '.pgn'
-            }
-          }, 'Study PGN'),
-          h('a.button.text', {
+          h('a.form-help.text', {
             attrs: {
-              'data-icon': 'x',
-              href: '/study/' + studyId + '/' + chapter.id + '.pgn'
+              href: '/developers#embed-study',
+              target: '_blank',
+              'data-icon': ''
             }
-          }, 'Chapter PGN')
-        ])
-      ])
-    ]
-  });
+          }, 'Read more about embedding a study chapter'),
+          h('label.control-label', 'Embed current chapter in your website or blog')
+        ] : []).concat(h('i.bar'))
+      ),
+      h('div.fen', {
+        attrs: { title: 'FEN - click to select' },
+        hook: bind('click', e => {
+          window.getSelection().selectAllChildren((e.target as HTMLElement))
+        })
+      }, ctrl.currentNode().fen)
+    ])
+  ]);
 }