github.com/alibaba/sealer@v0.8.6-0.20220430115802-37a2bdaa8173/pkg/cloud/dashboard/src/components/header.rs (about)

     1  // Copyright © 2021 Alibaba Group Holding Ltd.
     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  
    15  use yew::{html, Component,ComponentLink,Html,ShouldRender};
    16  
    17  pub struct Header {
    18      // props: Props,
    19  }
    20  
    21  pub enum Msg {}
    22  
    23  impl Component for Header {
    24      type Message = Msg;
    25      type Properties = ();
    26      
    27      fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
    28          Header {}
    29      }
    30      
    31      fn update(&mut self, _msg: Self::Message) -> ShouldRender {
    32          true
    33      }
    34      
    35      fn change(&mut self, props: Self::Properties) -> ShouldRender {
    36          true
    37      }
    38      
    39      fn view(&self) -> Html {
    40          html! {
    41              <nav class="navbar is-primary block" role="navigation" aria-label="main navigation">
    42                  { self.logo_name() }
    43                  { self.search() }
    44                  { self.login() }
    45              </nav>
    46          }
    47      }
    48  }
    49  
    50  impl Header {
    51     fn logo_name(&self) -> Html {
    52         html! {
    53             <div class="navbar-brand">
    54              <div class="navbar-item">
    55                  <i class="far fa-cloud fa-2x fa-pull-left"></i>
    56                  <strong> { "Sealer Cloud" }</strong>
    57              </div>
    58             </div>
    59         }
    60     }
    61  
    62     fn login(&self) -> Html {
    63         html! {
    64             <div class="navbar-end">
    65               <div class="navbar-item">
    66                 <div class="botton" >
    67                    <i class="fab fa-github fa-2x"></i>
    68                 </div>
    69               </div>
    70             </div>
    71         }
    72     }
    73  
    74     fn search(&self) -> Html {
    75         html! {
    76          <div class="nav-brand">
    77              <div class="navbar-item">
    78                  <div class="control has-icons-left has-icons-right">
    79                      <input class="input is-success" type="text" placeholder="image name" value="" />
    80                      <span class="icon is-small is-left">
    81                      <i class="fas fa-search"></i>
    82                      </span>
    83                  </div>
    84              </div>
    85           </div>
    86         }
    87     }
    88  }