Kaynağa Gözat

ref(toolbar): re-wrap buttons for torture tests

The inline classes for the toolbars were re-arranged
to fix non-rounded corners in the always-on-top window's
toolbar. However, those classes were also used by the
torture tests as a way to find stable elements that will
not get blown away by a react re-render. So re-wrap the
buttons with a div that will not get blown away,
add back the inline classes to those divs, and change
the CSS to round the corners in the always-on-top
window's toolbar.
master
Leonard Kim 7 yıl önce
ebeveyn
işleme
e217c172f8

+ 3
- 0
css/_toolbars.scss Dosyayı Görüntüle

153
 
153
 
154
         @include transform(translateX(-50%));
154
         @include transform(translateX(-50%));
155
 
155
 
156
+        > a:first-child.button,
156
         > div:first-child .button {
157
         > div:first-child .button {
157
             border-bottom-left-radius: 3px;
158
             border-bottom-left-radius: 3px;
158
             border-top-left-radius: 3px;
159
             border-top-left-radius: 3px;
159
         }
160
         }
161
+
162
+        > a:last-child.button,
160
         > div:last-child .button {
163
         > div:last-child .button {
161
             border-bottom-right-radius: 3px;
164
             border-bottom-right-radius: 3px;
162
             border-top-right-radius: 3px;
165
             border-top-right-radius: 3px;

+ 1
- 1
react/features/toolbox/components/StatelessToolbarButton.js Dosyayı Görüntüle

96
         const attributes = getButtonAttributesByProps(button);
96
         const attributes = getButtonAttributesByProps(button);
97
 
97
 
98
         return (
98
         return (
99
-            <div className = { `toolbar-button-wrapper ${button.id}-wrapper` }>
99
+            <div className = 'toolbar-button'>
100
                 <a
100
                 <a
101
                     { ...attributes }
101
                     { ...attributes }
102
                     onClick = { this._onClick }>
102
                     onClick = { this._onClick }>

+ 5
- 1
react/features/toolbox/components/ToolbarButton.web.js Dosyayı Görüntüle

140
             );
140
             );
141
         }
141
         }
142
 
142
 
143
-        return children;
143
+        return (
144
+            <div className = { `toolbar-button-wrapper ${button.id}-wrapper` }>
145
+                { children }
146
+            </div>
147
+        );
144
     }
148
     }
145
 
149
 
146
     /**
150
     /**

Loading…
İptal
Kaydet