1// Copyright (C) 2023 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15import m from 'mithril'; 16 17import {classNames} from '../base/classnames'; 18 19interface DetailsShellAttrs { 20 title: m.Children; 21 description?: m.Children; 22 buttons?: m.Children; 23 24 // Vertically fill parent container and disable scrolling 25 fillParent?: boolean; 26} 27 28// A shell for details panels to be more visually consistent. 29// It provides regular placement for the header bar and placement of buttons 30export class DetailsShell implements m.ClassComponent<DetailsShellAttrs> { 31 view({attrs, children}: m.Vnode<DetailsShellAttrs>) { 32 const {title, description, buttons, fillParent = true} = attrs; 33 34 return m( 35 'section.pf-details-shell', 36 {class: classNames(fillParent && 'pf-fill-parent')}, 37 m( 38 'header.pf-header-bar', 39 m('h1.pf-header-title', title), 40 m('span.pf-header-description', description), 41 m('nav.pf-header-buttons', buttons), 42 ), 43 m('article.pf-content', children), 44 ); 45 } 46} 47