Merge pull request #7629 from sagemathinc/jupyter-tweak-cells

Jupyter: tweak cell prompt and buttonbar

Author: williamstein

src/packages/frontend/_jupyter.sass

@@ -4,73 +4,73 @@
  */
 
 .smc-jupyter-nbviewer-content
-  border : 1px solid lightgray
+  border: 1px solid lightgray
 
 .smc-jupyter-nbviewer
-  background : white
-  position   : fixed
-  width      : 100%
+  background: white
+  position: fixed
+  width: 100%
 
 .smc-jupyter-notebook
-  background : white
-  width      : 100%
-  left       : 0px
-  min-height : 10em   /* ensure path is covered while loading notebook */
+  background: white
+  width: 100%
+  left: 0px
+  min-height: 10em /* ensure path is covered while loading notebook */
 
 .smc-jupyter-notebook-history-slider-controls
-  position      : absolute
-  top           : 8px
-  right         : 5px
-  width         : 80%
-  background    : white
-  border        : 2px solid orange
-  border-radius : 4px
-  padding       : 20px
-  box-shadow    : 5px 6px 4px lightgray
+  position: absolute
+  top: 8px
+  right: 5px
+  width: 80%
+  background: white
+  border: 2px solid orange
+  border-radius: 4px
+  padding: 20px
+  box-shadow: 5px 6px 4px lightgray
 
 .smc-jupyter-notebook-history-slider
-  margin-top : 11px
+  margin-top: 11px
 
 .smc-jupyter-notebook-status-messages
-  font-size : 10pt
+  font-size: 10pt
 
 .smc-jupyter-notebook-danger
-  color       : white
-  font-weight : bold
-  font-size   : 7pt
-  background  : red
+  color: white
+  font-weight: bold
+  font-size: 7pt
+  background: red
 
 .smc-jupyter-history-revision-number
-  font-size : 10pt
+  font-size: 10pt
 
 .smc-jupyter-history-revision-time
-  font-size : 10pt
+  font-size: 10pt
 
 /* Used for new sync. */
 .smc-jupyter-cursor
-  position : absolute
-  width    : 15em
-  z-index  : 5 !important
+  position: absolute
+  width: 15em
+  z-index: 5 !important
 
 .smc-jupyter-cursor-inside
-  height   : 1.2em
-  width    : 1px
+  height: 1.2em
+  width: 1px
 
 .smc-jupyter-cursor-label
-  font-size   : 8pt
-  font-family : serif
-  color       : #fff
-  z-index     : 1000
+  font-size: 8pt
+  font-family: serif
+  color: #fff
+  z-index: 1000
 
 .smc-jupyter-notebook-notebook
-  width : 100%
+  width: 100%
 
 .cc-jupyter-snippets
   .ant-collapse-content-box
-    padding: 0  !important
+    padding: 0 !important
 
   span.hl
-    background-color : yellow
+    background-color: yellow
     font-weight: bold
 
 .cc-jupyter-snippet
@@ -94,7 +94,7 @@
     font-size: 80%
 
 .cc-jupyter-snippet-header
-  vertical-align: -0.125em  // to match ANTD's collapse icon
+  vertical-align: -0.125em // to match ANTD's collapse icon
   p
     display: inline
 
@@ -107,3 +107,8 @@
 
   .MathJax_SVG_Display
     padding-right: 1em
+
+.cc-jupyter-buttonbar-dropdown
+  .ant-dropdown-menu-item
+    font-size: 12px !important
+    color: $COL_GRAY_D !important

src/packages/frontend/components/copy-button.tsx

@@ -9,13 +9,15 @@ interface Props {
   value?: string;
   size?;
   noText?: boolean;
+  block?: true;
 }
 
 export default function CopyButton({
   style,
   value,
   size,
   noText = false,
+  block,
 }: Props) {
   const [copied, setCopied] = useState<boolean>(false);
   useEffect(() => {
@@ -24,6 +26,7 @@ export default function CopyButton({
   return (
     <CopyToClipboard text={value} onCopy={() => setCopied(true)}>
       <Button
+        block={block}
         size={size}
         type="text"
         style={style}

src/packages/frontend/components/icon.tsx

@@ -73,6 +73,7 @@ import {
   DoubleRightOutlined,
   DownCircleOutlined,
   DownOutlined,
+  DownSquareOutlined,
   DownloadOutlined,
   EditFilled,
   EditOutlined,
@@ -95,6 +96,7 @@ import {
   FolderOpenOutlined,
   FolderOutlined,
   FontSizeOutlined,
+  ForkOutlined,
   ForwardOutlined,
   FrownOutlined,
   FunctionOutlined,
@@ -138,6 +140,7 @@ import {
   MedicineBoxOutlined,
   MehOutlined,
   MenuOutlined,
+  MergeCellsOutlined,
   MinusCircleOutlined,
   MinusOutlined,
   MinusSquareOutlined,
@@ -203,6 +206,7 @@ import {
   UnorderedListOutlined,
   UpCircleOutlined,
   UpOutlined,
+  UpSquareOutlined,
   UploadOutlined,
   UserAddOutlined,
   UserDeleteOutlined,
@@ -612,6 +616,10 @@ const IconSpec: { [name: string]: any } = {
   "clean-outlined": ClearOutlined,
   "sound-outlined": SoundOutlined,
   "rise-outlined": RiseOutlined,
+  "up-square-outlined": UpSquareOutlined,
+  "down-square-outlined": DownSquareOutlined,
+  "merge-cells-outlined": MergeCellsOutlined,
+  "fork-outlined": ForkOutlined,
 };
 
 // Icon Fonts coming from https://www.iconfont.cn/?lang=en-us

src/packages/frontend/components/paste-button.tsx

@@ -7,9 +7,10 @@ import { alert_message } from "@cocalc/frontend/alerts";
 interface Props {
   style?: CSSProperties;
   paste: (text: string) => any;
+  block?: true;
 }
 
-export default function PasteButton({ style, paste }: Props) {
+export default function PasteButton({ style, paste, block }: Props) {
   const [pasted, setPasted] = useState<boolean>(false);
 
   async function onClick() {
@@ -27,7 +28,13 @@ export default function PasteButton({ style, paste }: Props) {
   }
 
   return (
-    <Button size="small" type="text" style={style} onClick={onClick}>
+    <Button
+      size="small"
+      type="text"
+      style={style}
+      onClick={onClick}
+      block={block}
+    >
       <Icon name={pasted ? "check" : "paste"} />
       {pasted ? "Pasted" : "Paste"}
     </Button>

src/packages/frontend/frame-editors/whiteboard-editor/elements/code/input-prompt.tsx

@@ -33,9 +33,6 @@ export default function CodeInputPrompt({ element }) {
       end={element.data?.end}
       actions={actions}
       id={element.id}
-      hideMove
-      hideCut
-      hideRun
     />
   );
 }