feature/App bar use clipped-left (#587)

* Update vuetify theme primary color; change footer and header color (#558) * 前端UI改版-Extension页面v1.0版本 (#565) * Fe 2.x extension (#566) * 前端UI改版-Extension页面v1.0版本 * 前端UI改版-Extension页面v1.1版本： 1.修改部分变量名：checker->extension 2.侧边栏样式修改 3.Extension空态样式修改 * Feature/new main (#567) * Add new main and advanced * update inspector * change height * Plugin view height * remove border * Feature/new status bar (#569) * Fix app crash if load plugin moudle failed (#562) * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. (#560) * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. * Revert "Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc." This reverts commit 7180b42. * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. * Modify version code * Frontend load config and init (#564) * New status bar * remove margin Co-authored-by: ye zhao <[email protected]> Co-authored-by: Rena-Yuan <[email protected]> * Feature/new status bar (#570) * Fix app crash if load plugin moudle failed (#562) * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. (#560) * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. * Revert "Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc." This reverts commit 7180b42. * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. * Modify version code * Frontend load config and init (#564) * New status bar * remove margin * Add new status bar class Selector * Update save btn color in DataManager * merge branch * Add get_detail Co-authored-by: ye zhao <[email protected]> Co-authored-by: Rena-Yuan <[email protected]> * Not display notice badge with an empty notice list (#571) * fe-2.x: v-main margin, bottom shading,etc. (#572) * 前端UI改版： 1.每个页面添加页面标题，修改页面内容的宽高及margin 2.调整所有页面的自适应高度值 * 前端UI改版问题修复：恢复导航栏图标与文字的间距 * 1.修改全部Save-btn样式 2.修改Conflict界面的自适应高度 * AppBar右侧插件栏渲染，暂存 * Remove redundant code * Modify selector: return selected_value * Modify selector: return selected_api * New vuetify theme color (#573) * New vuetify theme color * remove quote * Appbar update (#574) * 前端UI改版： 1.每个页面添加页面标题，修改页面内容的宽高及margin 2.调整所有页面的自适应高度值 * 前端UI改版问题修复：恢复导航栏图标与文字的间距 * 1.修改全部Save-btn样式 2.修改Conflict界面的自适应高度 * AppBar右侧插件栏渲染，暂存 * Remove redundant code * Modify selector: return selected_value * Modify selector: return selected_api * 1. Add bandwidth&Env-switch selector 2. Remove backgourd:#ffffff 3. Add all calc description * 1. Modify bandwidth& env-switch controller width 2. Modify notice-center icon * Fix bandwidth bug * feature/new inspector (#575) * new inspector * 1. Modify side-bar/save-btn/tooltip/split-trigger z-index 2. Update inspector button bar * update tabel * update inspector * change file name * small pagination * new height of flow list * inspector button bar icon padding * update v-pagination__item style * change pdag size * change scope * add click add select * change inspector pro name * update text * add item-class in table * Update color Co-authored-by: Rena-Yuan <[email protected]> * Page detail update (#576) * 1. Bugfix：display place error when there's no activated extensions 2. Modify notice center icon size 3. Fix event list table height * Update event list - event-table height description * Update inspector color (#577) * Update inspector color * Fix inspector url overlength * reset change * change width * reset change * fix button status after clear * add default filter (#578) * Feature/merge master (#580) * Fix app crash if load plugin moudle failed (#562) * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. (#560) * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. * Revert "Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc." This reverts commit 7180b42. * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. * Extension update: Editor->Modifier, CheckerCategory->ExtensionCategory,etc. * Modify version code * Frontend load config and init (#564) Co-authored-by: ye zhao <[email protected]> Co-authored-by: Rena-Yuan <[email protected]> * Docs update: datamanager/inspector/extension (#579) * 1.Modify checker list's min-width 2.docs update: datamanager/inspector/extension * Text replace: Checker -> Extension * Update version (#581) * feature/Update docs (#582) * Update docs * Update bugit_guide.png * add bugit_text_extra.gif * Docs update 2.x (#583) * 1.Modify checker list's min-width 2.docs update: datamanager/inspector/extension * Text replace: Checker -> Extension * Text replace: Checker -> Extension * Update checker -> extension * Add bugit draft png * bugfix/app-bar-logo-click (#584) * Update app bar logo and title * Remove class * Update selection margin-bottom * Update selection margin-bottom * Update class * Fix overlay is displayed above drawer (#586) * App bar use clipped-left * remove dalay time on hover icon * Update drawer; change Inspector Pro Detail tab * change quote * Update version code * remove notes Co-authored-by: Rena-Yuan <[email protected]> Co-authored-by: ye zhao <[email protected]> Co-authored-by: Rena-Yuan <[email protected]>
Meituan-Dianping · Jan 6, 2022 · 5b44bc0 · 5b44bc0
1 parent 5e9a466
commit 5b44bc0
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 146 deletions.
diff --git a/frontend/src/views/Main.vue b/frontend/src/views/Main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="shading">
     <AppBar/>
 
     <!-- The navigation drawer display from y-axis 0px by default -->
@@ -9,6 +9,7 @@
     <!-- <v-navigation-drawer mini-variant-width=50> -->
 
     <v-navigation-drawer
+      app
       absolute
       permanent
       width=200
@@ -29,9 +30,9 @@
       </v-list>
     </v-navigation-drawer>
 
-    <v-main class="shading main-container pb-0">
-      <v-toolbar-title class="shading pt-4 pb-2 page-title">{{activeMenuItemName}}</v-toolbar-title>
-      <router-view class="router-container background mr-3 mb-3" style="margin-left: 68px"/>
+    <v-main class="ma-3">
+      <v-toolbar-title class="mt-1 mb-2 page-title">{{activeMenuItemName}}</v-toolbar-title>
+      <router-view class="router-container background"/>
     </v-main>
 
     <v-footer app color="primary" class="main-footer">
@@ -183,7 +184,6 @@ export default {
   font-size: 16px;
   color: #000520;
   line-height: 16px;
-  margin-left: 68px;
 }
 .router-container{
   height: calc(100vh - 44px - 40px - 28px - 12px);
@@ -210,12 +210,6 @@ export default {
   line-height: 28px;
   padding: 0;
 }
-.main-container {
-  height: calc(100vh - 28px);
-  /*
-  footer:28px
-   */
-}
 .v-list-active {
   background-color: #eeeef9;
   color: #5F5CCA !important;

diff --git a/frontend/src/views/appbar/AppBar.vue b/frontend/src/views/appbar/AppBar.vue
@@ -1,13 +1,12 @@
 <template>
   <div>
-    <v-app-bar app dense elevation="3" height="44" color="background">
+    <v-app-bar app dense clipped-left elevation="3" height="44" color="background">
       <v-app-bar-title width="30">
         <img src="@/assets/logo.svg" width="40" style="margin: 12px 12px 0px -8px;"/>
         <img src="@/assets/lyrebird.svg" width="120" style="margin-bottom:8px;"/>
       </v-app-bar-title>
       <v-spacer/>
 
-      <!-- Load plugin status which placement is top-right -->
       <span v-for="item in statusTopRightList" :key="item.id" class="top-bar-item mr-5">
         <v-select
           v-model="item.src.selected"
@@ -25,9 +24,7 @@
         />
       </span>
 
-      <!-- Add Bandwidth here -->
       <Bandwidth />
-      <!-- <Bandwidth/> -->
 
       <!-- Settings -->
       <!-- Not display -->

diff --git a/frontend/src/views/event/EventDetail.vue b/frontend/src/views/event/EventDetail.vue
@@ -6,8 +6,8 @@
       </Col>
       <Col span="23" class="small-tab">
         <Tabs :value="currentTab" :animated="false" size="small" @on-click="switchTab">
-          <TabPane label="Message" name="msg"></TabPane>
-          <TabPane label="Raw" name="raw"></TabPane>
+          <TabPane label="Raw" name="raw"/>
+          <TabPane label="Message" name="msg"/>
         </Tabs>
       </Col>
     </Row>

diff --git a/frontend/src/views/inspector/ButtonBar.vue b/frontend/src/views/inspector/ButtonBar.vue
@@ -41,7 +41,7 @@
         @change="changeDiffMode"
       />
 
-      <v-tooltip bottom open-delay=500>
+      <v-tooltip bottom>
         <template v-slot:activator="{ on, attrs }">
           <v-btn plain icon small v-bind="attrs" v-on="on">
             <v-icon small size="18px" color="content">mdi-help-circle-outline</v-icon>
@@ -82,7 +82,7 @@
       </v-chip>
     </span>
 
-      <v-tooltip bottom open-delay=500>
+      <v-tooltip bottom>
         <template v-slot:activator="{ on, attrs }">
           <v-btn plain icon v-bind="attrs" v-on="on" small>
             <v-icon size="18px" color="content" small style="opacity:1">mdi-help-circle-outline</v-icon>

diff --git a/frontend/src/views/notice/NotRemindMessage.vue b/frontend/src/views/notice/NotRemindMessage.vue
diff --git a/frontend/src/views/notice/NoticeCenter.vue b/frontend/src/views/notice/NoticeCenter.vue
@@ -6,13 +6,24 @@
       :value="noticeList.length"
       offset-x="10"
       offset-y="16"
+      class="main-header-notice-badge"
     >
       <v-icon>
         mdi-bell-outline
       </v-icon>
     </v-badge>
 
-    <Drawer width="380" :closable="true" :mask="false" v-model="drawerIsCollapsed">
+    <v-navigation-drawer
+      v-model="drawerIsCollapsed"
+      app
+      absolute
+      temporary
+      hide-overlay
+      right
+      class="side-navgation-right"
+      width="400"
+      color="rgba(230, 230, 230, 0.6)"
+    >
       <div class="drawer-header">
         <ButtonGroup>
           <Button v-for="tab in tabList" :key="tab" :class="[setResultClass(tab)]" @click="setTargetTab(tab)"><p>{{tab}}</p></Button>
@@ -21,7 +32,7 @@
       <div v-if="selectedTab === tabList[0]">
         <div v-if="noticeList.length" style="height:calc(100% - 31px);overflow-x:auto">
           <div v-for="(notice, index) in noticeList" :key="index" style="padding: 5px 10px;">
-            <NoticeMessage :notice="notice"></NoticeMessage>
+            <NoticeMessage :notice="notice" :alert="true"/>
           </div>
         </div>
         <div v-else class="notice-empty">
@@ -31,28 +42,26 @@
       <div v-else-if="selectedTab === tabList[1]">
         <div v-if="notRemindList.length" style="height:calc(100% - 31px);overflow-x:auto">
           <div v-for="(notice, index) in notRemindList" :key="index" style="padding: 5px 10px;">
-            <NotRemindMessage :notice="notice"></NotRemindMessage>
+            <NoticeMessage :notice="notice" :alert="false"/>
           </div>
         </div>
         <div v-else class="notice-empty">
           <p>Nothing here</p>
         </div>
       </div>
-    </Drawer>
+    </v-navigation-drawer>
   </div>
 </template>
 
 <script>
 import Alert from '@/views/notice/Alert.vue'
 import NoticeMessage from '@/views/notice/NoticeMessage.vue'
-import NotRemindMessage from '@/views/notice/NotRemindMessage.vue'
 
 export default {
   name: "noticeCenter",
   components: {
     Alert,
-    NoticeMessage,
-    NotRemindMessage
+    NoticeMessage
   },
   data() {
     return {
@@ -114,8 +123,11 @@ export default {
 
 <style>
 .main-header-notice {
- float: right;
- margin-right: 15px;
+  float: right;
+  margin-right: 15px;
+}
+.main-header-notice-badge {
+  cursor: pointer;
 }
 .drawer-header {
   height: 38px;
@@ -161,10 +173,7 @@ export default {
   background: #cccccc;
   color: #ffffff;
 }
-.ivu-drawer-right > .ivu-drawer-content {
-  background:  rgba(230,230,230,0.8);
-}
-.ivu-drawer-content > .ivu-drawer-body {
-  padding: 0px;
+.side-navgation-right p {
+  margin-bottom: 0px;
 }
 </style>
diff --git a/frontend/src/views/notice/NoticeMessage.vue b/frontend/src/views/notice/NoticeMessage.vue
@@ -7,7 +7,12 @@
             <span style="display:inline-block;max-width:245px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
               {{notice.sender.file}}
             </span>
-            <Badge v-if="notice.count > 1" :count="notice.count" class-name="notice-badge" style="padding-left:5px"></Badge>
+            <Badge
+              v-if="notice.count > 1"
+              :count="notice.count"
+              :class-name="alert?'notice-badge':'notice-badge-gray'"
+              style="padding-left:5px"
+            />
           </div>
         </Col>
         <Col span="8" align="right">
@@ -30,8 +35,9 @@
         </p>
       </Col>
       <Col span="24" align="right">
-        <a href="#" @click.stop="changeNoticeStatusToFalse(notice)" title="Don't remind again">
-          <Icon type="ios-eye-off" style="font-size:16px"/>
+        <a href="#" @click.stop="changeNoticeStatus(notice)" :title="alert?'Don\'t remind again':'Remind me again'">
+          <Icon v-if="alert" type="ios-eye-off" style="font-size:16px"/>
+          <Icon v-else type="ios-eye" style="font-size:16px"/>
         </a>
       </Col>
     </Row>
@@ -40,8 +46,8 @@
 
 <script>
 export default {
-  name: "noticeMessage",
-  props: ["notice"],
+  name: 'noticeMessage',
+  props: ['notice', 'alert'],
   data() {
     return {
       isDisplayDate: true,
@@ -60,7 +66,11 @@ export default {
       return month + '/' + date + ' ' + hour + ':' + minute + ':' + second
     },
     deleteNotice(noticeKey){
-      this.$store.dispatch('deleteNotice', noticeKey)
+      if (alert) {
+        this.$store.dispatch('deleteNotice', noticeKey)
+      } else {
+        this.$store.dispatch('deleteNotRemind', noticeKey)
+      }
     },
     jump(notice) {
       this.$bus.$emit('toggleNotice')
@@ -77,13 +87,12 @@ export default {
       }
       this.$store.commit('plugin/setSrc', this.jumpToUrl)
       this.$router.push({name:'plugin-view', params:{name:this.jumpToName, query:'event_id='+this.notice.id}})
-      // this.$store.dispatch("createIssue", notice)
-      this.$store.dispatch('deleteNotice', notice.key)
+      this.deleteNotice(notice.key)
     },
-    changeNoticeStatusToFalse(notice) {
+    changeNoticeStatus(notice) {
       this.$store.dispatch('updateNoticeStatus', {
-        key:notice.key,
-        status:false
+        key: notice.key,
+        status: !this.alert
       })
     }
   }

diff --git a/lyrebird/version.py b/lyrebird/version.py
@@ -1,3 +1,3 @@
-IVERSION = (2, 0, 0)
+IVERSION = (2, 0, 1)
 VERSION = ".".join(str(i) for i in IVERSION)
 LYREBIRD = "Lyrebird " + VERSION