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'; 16import {classNames} from '../base/classnames'; 17 18interface DetailsShellAttrs { 19 title: m.Children; 20 description?: m.Children; 21 buttons?: m.Children; 22 23 // Vertically fill parent container and disable scrolling 24 fillParent?: boolean; 25} 26 27// A shell for details panels to be more visually consistent. 28// It provides regular placement for the header bar and placement of buttons 29export class DetailsShell implements m.ClassComponent<DetailsShellAttrs> { 30 view({attrs, children}: m.Vnode<DetailsShellAttrs>) { 31 const {title, description, buttons, fillParent = true} = attrs; 32 33 return m( 34 'section.pf-details-shell', 35 {class: classNames(fillParent && 'pf-fill-parent')}, 36 m( 37 'header.pf-header-bar', 38 m('h1.pf-header-title', title), 39 m('span.pf-header-description', description), 40 m('nav.pf-header-buttons', buttons), 41 ), 42 m('article.pf-content', children), 43 ); 44 } 45} 46