From 0fed69f367899c6f5d3321e5cb86b84faa08d2e9 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 13 Feb 2019 16:34:03 +0800
Subject: [PATCH] perf[Screenfull]: refactor screenfull component

---
 package.json                                     | 2 +-
 src/components/Screenfull/index.vue              | 6 ++++--
 src/icons/svg/exit-fullscreen.svg                | 1 +
 src/icons/svg/{screenfull.svg => fullscreen.svg} | 0
 src/lang/en.js                                   | 1 -
 src/lang/es.js                                   | 1 -
 src/lang/zh.js                                   | 1 -
 src/views/layout/components/Navbar.vue           | 4 +---
 8 files changed, 7 insertions(+), 9 deletions(-)
 create mode 100644 src/icons/svg/exit-fullscreen.svg
 rename src/icons/svg/{screenfull.svg => fullscreen.svg} (100%)

diff --git a/package.json b/package.json
index 5854b8d6..77c25de4 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
-    "screenfull": "3.3.3",
+    "screenfull": "4.0.0",
     "showdown": "1.8.6",
     "sortablejs": "1.7.0",
     "tui-editor": "1.2.7",
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 7f8e6fc3..8e7bcba4 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <svg-icon class-name="screenfull-icon" icon-class="screenfull" @click="click" />
+    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
   </div>
 </template>
 
@@ -23,7 +23,9 @@ export default {
         })
         return false
       }
-      screenfull.toggle()
+      screenfull.toggle().then(() => {
+        this.isFullscreen = screenfull.isFullscreen
+      })
     }
   }
 }
diff --git a/src/icons/svg/exit-fullscreen.svg b/src/icons/svg/exit-fullscreen.svg
new file mode 100644
index 00000000..485c128b
--- /dev/null
+++ b/src/icons/svg/exit-fullscreen.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/screenfull.svg b/src/icons/svg/fullscreen.svg
similarity index 100%
rename from src/icons/svg/screenfull.svg
rename to src/icons/svg/fullscreen.svg
diff --git a/src/lang/en.js b/src/lang/en.js
index ef98af4b..05b34598 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -69,7 +69,6 @@ export default {
     logOut: 'Log Out',
     dashboard: 'Dashboard',
     github: 'Github',
-    screenfull: 'Screenfull',
     theme: 'Theme',
     size: 'Global Size'
   },
diff --git a/src/lang/es.js b/src/lang/es.js
index ed71fc15..8575d382 100755
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -69,7 +69,6 @@ export default {
     logOut: 'Salir',
     dashboard: 'Panel de control',
     github: 'Github',
-    screenfull: 'Pantalla completa',
     theme: 'Tema',
     size: 'Tamaño global'
   },
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 7da0ccee..1fd18355 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -69,7 +69,6 @@ export default {
     logOut: '退出登录',
     dashboard: '首页',
     github: '项目地址',
-    screenfull: '全屏',
     theme: '换肤',
     size: '布局大小'
   },
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index dcb09ec1..5c3bcda4 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -10,9 +10,7 @@
 
         <error-log class="errLog-container right-menu-item hover-effect"/>
 
-        <el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
-          <screenfull class="right-menu-item hover-effect"/>
-        </el-tooltip>
+        <screenfull class="right-menu-item hover-effect"/>
 
         <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
           <size-select class="right-menu-item hover-effect"/>