feat: Allow users to remove paddings on frame cards #495 (#1735)

h2oai · Dec 9, 2022 · 2b16927 · 2b16927
1 parent 48032db
commit 2b16927
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 5 deletions.
diff --git a/py/h2o_wave/types.py b/py/h2o_wave/types.py
@@ -8242,12 +8242,14 @@ def __init__(
             title: str,
             path: Optional[str] = None,
             content: Optional[str] = None,
+            compact: Optional[bool] = None,
             commands: Optional[List[Command]] = None,
     ):
         _guard_scalar('FrameCard.box', box, (str,), False, False, False)
         _guard_scalar('FrameCard.title', title, (str,), False, False, False)
         _guard_scalar('FrameCard.path', path, (str,), False, True, False)
         _guard_scalar('FrameCard.content', content, (str,), False, True, False)
+        _guard_scalar('FrameCard.compact', compact, (bool,), False, True, False)
         _guard_vector('FrameCard.commands', commands, (Command,), False, True, False)
         self.box = box
         """A string indicating how to place this component on the page."""
@@ -8257,6 +8259,8 @@ def __init__(
         """The path or URL of the web page, e.g. `/foo.html` or `http://example.com/foo.html`."""
         self.content = content
         """The HTML content of the page. A string containing `<html>...</html>`."""
+        self.compact = compact
+        """True if title and padding should be removed. Defaults to False."""
         self.commands = commands
         """Contextual menu commands for this component."""
 
@@ -8266,13 +8270,15 @@ def dump(self) -> Dict:
         _guard_scalar('FrameCard.title', self.title, (str,), False, False, False)
         _guard_scalar('FrameCard.path', self.path, (str,), False, True, False)
         _guard_scalar('FrameCard.content', self.content, (str,), False, True, False)
+        _guard_scalar('FrameCard.compact', self.compact, (bool,), False, True, False)
         _guard_vector('FrameCard.commands', self.commands, (Command,), False, True, False)
         return _dump(
             view='frame',
             box=self.box,
             title=self.title,
             path=self.path,
             content=self.content,
+            compact=self.compact,
             commands=None if self.commands is None else [__e.dump() for __e in self.commands],
         )
 
@@ -8287,18 +8293,22 @@ def load(__d: Dict) -> 'FrameCard':
         _guard_scalar('FrameCard.path', __d_path, (str,), False, True, False)
         __d_content: Any = __d.get('content')
         _guard_scalar('FrameCard.content', __d_content, (str,), False, True, False)
+        __d_compact: Any = __d.get('compact')
+        _guard_scalar('FrameCard.compact', __d_compact, (bool,), False, True, False)
         __d_commands: Any = __d.get('commands')
         _guard_vector('FrameCard.commands', __d_commands, (dict,), False, True, False)
         box: str = __d_box
         title: str = __d_title
         path: Optional[str] = __d_path
         content: Optional[str] = __d_content
+        compact: Optional[bool] = __d_compact
         commands: Optional[List[Command]] = None if __d_commands is None else [Command.load(__e) for __e in __d_commands]
         return FrameCard(
             box,
             title,
             path,
             content,
+            compact,
             commands,
         )
 

diff --git a/py/h2o_wave/ui.py b/py/h2o_wave/ui.py
@@ -2889,6 +2889,7 @@ def frame_card(
         title: str,
         path: Optional[str] = None,
         content: Optional[str] = None,
+        compact: Optional[bool] = None,
         commands: Optional[List[Command]] = None,
 ) -> FrameCard:
     """Render a card containing a HTML page inside an inline frame (an `iframe`).
@@ -2900,6 +2901,7 @@ def frame_card(
         title: The title for this card.
         path: The path or URL of the web page, e.g. `/foo.html` or `http://example.com/foo.html`.
         content: The HTML content of the page. A string containing `<html>...</html>`.
+        compact: True if title and padding should be removed. Defaults to False.
         commands: Contextual menu commands for this component.
     Returns:
         A `h2o_wave.types.FrameCard` instance.
@@ -2909,6 +2911,7 @@ def frame_card(
         title,
         path,
         content,
+        compact,
         commands,
     )
 

diff --git a/r/R/ui.R b/r/R/ui.R
@@ -3350,6 +3350,7 @@ ui_form_card <- function(
 #' @param title The title for this card.
 #' @param path The path or URL of the web page, e.g. `/foo.html` or `http://example.com/foo.html`.
 #' @param content The HTML content of the page. A string containing `<html>...</html>`.
+#' @param compact True if title and padding should be removed. Defaults to False.
 #' @param commands Contextual menu commands for this component.
 #' @return A FrameCard instance.
 #' @export
@@ -3358,17 +3359,20 @@ ui_frame_card <- function(
   title,
   path = NULL,
   content = NULL,
+  compact = NULL,
   commands = NULL) {
   .guard_scalar("box", "character", box)
   .guard_scalar("title", "character", title)
   .guard_scalar("path", "character", path)
   .guard_scalar("content", "character", content)
+  .guard_scalar("compact", "logical", compact)
   .guard_vector("commands", "WaveCommand", commands)
   .o <- list(
     box=box,
     title=title,
     path=path,
     content=content,
+    compact=compact,
     commands=commands,
     view='frame')
   class(.o) <- append(class(.o), c(.wave_obj, "WaveFrameCard"))

diff --git a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
@@ -1331,11 +1331,12 @@
       <option name="Python" value="true"/>
     </context>
   </template>
-  <template name="w_full_frame_card" value="ui.frame_card(box='$box$',title='$title$',path='$path$',content='$content$',commands=[&#10;	$commands$	&#10;])$END$" description="Create Wave FrameCard with full attributes." toReformat="true" toShortenFQNames="true">
+  <template name="w_full_frame_card" value="ui.frame_card(box='$box$',title='$title$',path='$path$',content='$content$',compact=$compact$,commands=[&#10;	$commands$	&#10;])$END$" description="Create Wave FrameCard with full attributes." toReformat="true" toShortenFQNames="true">
     <variable name="box" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="title" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="path" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="content" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="compact" expression="" defaultValue="&quot;False&quot;" alwaysStopAt="true"/>
     <variable name="commands" expression="" defaultValue="" alwaysStopAt="true"/>
     <context>
       <option name="Python" value="true"/>

diff --git a/tools/vscode-extension/component-snippets.json b/tools/vscode-extension/component-snippets.json
@@ -1129,7 +1129,7 @@
   "Wave Full FrameCard": {
     "prefix": "w_full_frame_card",
     "body": [
-      "ui.frame_card(box='$1', title='$2', path='$3', content='$4', commands=[\n\t\t$5\t\t\n])$0"
+      "ui.frame_card(box='$1', title='$2', path='$3', content='$4', compact=${5:False}, commands=[\n\t\t$6\t\t\n])$0"
     ],
     "description": "Create a full Wave FrameCard."
   },

diff --git a/ui/src/frame.tsx b/ui/src/frame.tsx
@@ -16,14 +16,16 @@ import { B, Model, S, xid } from 'h2o-wave'
 import React from 'react'
 import { stylesheet } from 'typestyle'
 import { cards, grid } from './layout'
-import { formItemWidth } from './theme'
+import { formItemWidth, clas } from './theme'
 import { bond } from './ui'
 
 const
   css = stylesheet({
     card: {
       display: 'flex',
       flexDirection: 'column',
+    },
+    cardPadding: {
       padding: grid.gap,
     },
     body: {
@@ -83,6 +85,10 @@ interface State {
    * :value ""
    */
   content?: S
+  /**
+   * True if title and padding should be removed. Defaults to False.
+   */
+  compact?: B
 }
 
 const
@@ -104,8 +110,8 @@ export const XFrame = ({ model: { name, path, content, width = '100%', height =
 export const
   View = bond(({ name, state, changed }: Model<State>) => {
     const render = () => (
-      <div data-test={name} className={css.card}>
-        <div className='wave-s12 wave-w6'>{state.title}</div>
+      <div data-test={name} className={clas(css.card, state.compact ? '' : css.cardPadding)}>
+        {!state.compact && <div className='wave-s12 wave-w6'>{state.title}</div>}
         <div className={css.body}>
           <InlineFrame path={state.path} content={state.content} />
         </div>

diff --git a/website/widgets/content/frame.md b/website/widgets/content/frame.md
@@ -21,3 +21,20 @@ html = '''
 
 q.page['example'] = ui.frame_card(box='1 1 2 2', title='Example', content=html)
 ```
+
+## Without padding
+
+You can set the `compact` attribute to `True` to remove the title and padding of a frame card.
+
+```py
+html = '''
+<!DOCTYPE html>
+<html>
+<body>
+  <h1>Hello World!</h1>
+</body>
+</html>
+'''
+
+q.page['example'] = ui.frame_card(box='1 1 2 2', title='Example', content=html, compact=True)
+```