From 093e6a8dc2fc52ca448af8ab3f0572fb564daa72 Mon Sep 17 00:00:00 2001 From: Mostafa Said <94674993+MooseSaeed@users.noreply.github.com> Date: Mon, 4 Apr 2022 00:18:42 +0200 Subject: [PATCH] adding magic keys button --- public/css/app.css | 46 +++++++++++++++++++++ public/js/app.js | 12 +++--- resources/js/components/Markdowntoolbar.vue | 28 +++++++++++++ 3 files changed, 80 insertions(+), 6 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index 9a5b5c6..d3033da 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -514,6 +514,9 @@ Ensure the default browser behavior of the `hidden` attribute. .mt-5 { margin-top: 1.25rem; } +.mt-1 { + margin-top: 0.25rem; +} .block { display: block; } @@ -746,12 +749,19 @@ Ensure the default browser behavior of the `hidden` attribute. --tw-gradient-from: #9333ea; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(147 51 234 / 0)); } +.from-pink-500 { + --tw-gradient-from: #ec4899; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(236 72 153 / 0)); +} .via-purple-600 { --tw-gradient-stops: var(--tw-gradient-from), #9333ea, var(--tw-gradient-to, rgb(147 51 234 / 0)); } .via-green-600 { --tw-gradient-stops: var(--tw-gradient-from), #16a34a, var(--tw-gradient-to, rgb(22 163 74 / 0)); } +.via-red-500 { + --tw-gradient-stops: var(--tw-gradient-from), #ef4444, var(--tw-gradient-to, rgb(239 68 68 / 0)); +} .to-purple-700 { --tw-gradient-to: #7e22ce; } @@ -761,6 +771,9 @@ Ensure the default browser behavior of the `hidden` attribute. .to-blue-500 { --tw-gradient-to: #3b82f6; } +.to-yellow-500 { + --tw-gradient-to: #eab308; +} .bg-clip-padding { background-clip: padding-box; } @@ -836,6 +849,14 @@ Ensure the default browser behavior of the `hidden` attribute. padding-top: 1.5rem; padding-bottom: 1.5rem; } +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} .pb-2 { padding-bottom: 0.5rem; } @@ -864,6 +885,10 @@ Ensure the default browser behavior of the `hidden` attribute. font-size: 2.25rem; line-height: 2.5rem; } +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} .font-bold { font-weight: 700; } @@ -1457,6 +1482,19 @@ Ensure the default browser behavior of the `hidden` attribute. transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +@keyframes ping { + + 75%, 100% { + transform: scale(2); + opacity: 0; + } +} + +.hover\:animate-ping:hover { + -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} + .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -1628,6 +1666,10 @@ Ensure the default browser behavior of the `hidden` attribute. margin-right: 0.5rem; } + .md\:mt-0 { + margin-top: 0px; + } + .md\:flex { display: flex; } @@ -1677,6 +1719,10 @@ Ensure the default browser behavior of the `hidden` attribute. @media (min-width: 1024px) { + .lg\:mt-0 { + margin-top: 0px; + } + .lg\:flex-row { flex-direction: row; } diff --git a/public/js/app.js b/public/js/app.js index 8322033..08b052e 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -18538,20 +18538,20 @@ var _hoisted_2 = { "class": "flex flex-col gap-1 lg:flex-row justify-between items-center font-semibold text-white text-bold w-full bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 rounded-lg text-sm px-5 py-1 text-center mr-2 mb-2" }; -var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)(" Start AI Speech ", 2); +var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)(" Start AI Speech
", 3); -var _hoisted_5 = { +var _hoisted_6 = { "class": "relative" }; -var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)("\"Bold\"Italic\"Link\"Ordered\"Unordered\"Heading\"Quote\"Code\"Table\"Image\"Underline\"Strikethrough\"Line", 1); +var _hoisted_7 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)("\"Bold\"Italic\"Link\"Ordered\"Unordered\"Heading\"Quote\"Code\"Table\"Image\"Underline\"Strikethrough\"Line", 1); function render(_ctx, _cache, $props, $setup, $data, $options) { var _component_Stoprecroding = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Stoprecroding"); var _component_Microphone = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Microphone"); - return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [_hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_5, [$data.recording ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Stoprecroding, { + return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [_hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [$data.recording ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Stoprecroding, { key: 0, onClick: $options.toggleRecording }, null, 8 @@ -18567,7 +18567,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) { onClick: $options.toggleRecording }, null, 8 /* PROPS */ - , ["onClick"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])]), _hoisted_6], 64 + , ["onClick"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])]), _hoisted_7], 64 /* STABLE_FRAGMENT */ ); } @@ -20729,7 +20729,7 @@ __webpack_require__.r(__webpack_exports__); var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]}); // Module -___CSS_LOADER_EXPORT___.push([module.id, "\n.linedivider {\r\n fill: rgb(33, 33, 219) !important;\n}\r\n", ""]); +___CSS_LOADER_EXPORT___.push([module.id, "\n.linedivider {\r\n fill: rgb(33, 33, 219) !important;\n}\n.background-animate {\r\n background-size: 400%;\r\n -webkit-animation: gradColor 3s ease infinite;\r\n animation: gradColor 3s ease infinite;\n}\n@-webkit-keyframes gradColor {\n0%,\r\n 100% {\r\n background-position: 0% 50%;\n}\n50% {\r\n background-position: 100% 50%;\n}\n}\n@keyframes gradColor {\n0%,\r\n 100% {\r\n background-position: 0% 50%;\n}\n50% {\r\n background-position: 100% 50%;\n}\n}\r\n", ""]); // Exports /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); diff --git a/resources/js/components/Markdowntoolbar.vue b/resources/js/components/Markdowntoolbar.vue index 7d121d2..6dfcc2e 100644 --- a/resources/js/components/Markdowntoolbar.vue +++ b/resources/js/components/Markdowntoolbar.vue @@ -26,6 +26,18 @@ +
+ + +